.button_icon {
  width: 24px;
  height: 24px;
  width: 16px;
  height: 16px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--text-tertiary);

}

.col:hover .button_icon {
  background-color: var(--primary);
}

.button_icon.edit {
  mask-image: url('/assets/icons/edit.svg');
}

.button_icon.add {
  mask-image: url('/assets/icons/add.svg');
}


.button_circular {
  width: 48px;
  height: 48px;
  background-color: var(--grey-50);
  border-radius: 48px;
  cursor: pointer;

}

.button_circular:hover {
  background-color: var(--grey-100);
}

.button_circular::after {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 24px 24px;
  background-color: var(--text-tertiary);
}


.button_circular.back::after {
  mask-image: url('/assets/icons/back.svg');
}