/**
 * IconButton — круглая кнопка с иконкой
 * Референс: docs/design/screenshots/Компоненты/IconButton
 * Размеры: 24, 32, 40, 48, 56px
 * Варианты: accent, accent-subdued, secondary, destructive, destructive-subdued, flat
 * Состояния: default, hover, active, focus, disabled
 * Только токены из tokens.css
 */

.icon-button {
  box-sizing: border-box;
  padding: 0;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.icon-button:focus-visible {
  outline: 4px solid var(--Product-Theme-Light-border-basic-focus, rgba(8, 121, 77, 0.40));
  outline-offset: 0;
}

.icon-button:disabled {
  cursor: default;
}

/* Размеры */
.icon-button--24 {
  width: 24px;
  height: 24px;
}

.icon-button--32 {
  width: 32px;
  height: 32px;
}

.icon-button--40 {
  width: 40px;
  height: 40px;
}

.icon-button--48 {
  width: 48px;
  height: 48px;
}

.icon-button--56 {
  width: 56px;
  height: 56px;
}

/* Иконка — слот (размеры по дизайну, как ::before) */
.icon-button__icon {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
}

/* По макету IconButton: 24→16px, 32→20px, 40/48/56→24px */
.icon-button--24 .icon-button__icon { width: 16px; height: 16px; }
.icon-button--32 .icon-button__icon { width: 20px; height: 20px; }
.icon-button--40 .icon-button__icon,
.icon-button--48 .icon-button__icon,
.icon-button--56 .icon-button__icon { width: 24px; height: 24px; }

/* Иконка через ::before */
.icon-button::before {
  content: '';
  display: block;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Если иконка задана слотом (.icon-button__icon), ::before не показывать */
.icon-button:has(.icon-button__icon)::before {
  display: none;
}

.icon-button--24::before { width: 16px; height: 16px; }
.icon-button--32::before { width: 20px; height: 20px; }
.icon-button--40::before,
.icon-button--48::before,
.icon-button--56::before { width: 24px; height: 24px; }

/* === Accent (primary) === */
.icon-button--accent {
  background: var(--Product-Theme-Light-controls-accent-initial);
  color: var(--Product-Theme-Light-vector-basic-white-fixed);
}

.icon-button--accent:hover:not(:disabled) {
  background: var(--Product-Theme-Light-controls-accent-hover);
}

.icon-button--accent:active:not(:disabled) {
  background: var(--Product-Theme-Light-controls-accent-active);
}

.icon-button--accent:disabled {
  background: var(--Product-Theme-Light-controls-accent-disabled);
  color: var(--Product-Theme-Light-vector-basic-disabled);
}

/* === Accent subdued === */
.icon-button--accent-subdued {
  background: var(--Product-Theme-Light-controls-accent-subdued-initial);
  color: var(--Product-Theme-Light-controls-switch-button-active-text);
}

.icon-button--accent-subdued:hover:not(:disabled) {
  background: var(--Product-Theme-Light-controls-accent-subdued-hover);
}

.icon-button--accent-subdued:active:not(:disabled) {
  background: var(--Product-Theme-Light-controls-accent-subdued-active);
}

.icon-button--accent-subdued:disabled {
  background: var(--Product-Theme-Light-controls-accent-subdued-disabled);
  color: var(--Product-Theme-Light-vector-basic-disabled);
}

/* === Secondary === */
.icon-button--secondary {
  background: var(--Product-Theme-Light-controls-secondary-initial);
  color: var(--Product-Theme-Light-vector-basic-primary);
}

.icon-button--secondary:hover:not(:disabled) {
  background: var(--Product-Theme-Light-controls-secondary-hover);
}

.icon-button--secondary:active:not(:disabled) {
  background: var(--Product-Theme-Light-controls-secondary-active);
}

.icon-button--secondary:disabled {
  background: var(--Product-Theme-Light-controls-secondary-disabled);
  color: var(--Product-Theme-Light-vector-basic-disabled);
}

/* === Secondary selected (white bg) === */
.icon-button--secondary-selected {
  background: var(--Product-Theme-Light-controls-secondary-selected-fixed);
  color: var(--Product-Theme-Light-vector-basic-black-fixed);
}

.icon-button--secondary-selected:hover:not(:disabled) {
  opacity: 0.8;
}

.icon-button--secondary-selected:disabled {
  opacity: 0.5;
  color: var(--Product-Theme-Light-vector-basic-disabled);
}

/* === Flat (transparent) === */
.icon-button--flat {
  background: transparent;
  color: var(--Product-Theme-Light-vector-basic-primary);
}

.icon-button--flat:hover:not(:disabled) {
  opacity: 0.8;
}

.icon-button--flat:disabled {
  opacity: 0.5;
  color: var(--Product-Theme-Light-vector-basic-disabled);
}

/* === Destructive === */
.icon-button--destructive {
  background: var(--Product-Theme-Light-controls-destructive-initial);
  color: var(--Product-Theme-Light-vector-basic-white-fixed);
}

.icon-button--destructive:hover:not(:disabled) {
  background: var(--Product-Theme-Light-controls-destructive-hover);
}

.icon-button--destructive:active:not(:disabled) {
  background: var(--Product-Theme-Light-controls-destructive-active);
}

.icon-button--destructive:disabled {
  background: var(--Product-Theme-Light-controls-accent-disabled);
  color: var(--Product-Theme-Light-vector-basic-disabled);
}

/* === Destructive subdued === */
.icon-button--destructive-subdued {
  background: var(--Product-Theme-Light-controls-destructive-subdued-initial);
  color: var(--Product-Theme-Light-controls-destructive-initial);
}

.icon-button--destructive-subdued:hover:not(:disabled) {
  background: var(--Product-Theme-Light-controls-destructive-subdued-hover);
}

.icon-button--destructive-subdued:active:not(:disabled) {
  background: var(--Product-Theme-Light-controls-destructive-subdued-active);
}

/* === Invisible placeholder === */
.icon-button--invisible {
  opacity: 0;
  pointer-events: none;
}

.icon-button--invisible::before {
  display: none;
}

/* Иконки — модификаторы */
.icon-button--plus::before {
  mask: url('/masterclick/assets/icons/regular/plus.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/plus.svg') no-repeat center / contain;
}

.icon-button--minus::before {
  mask: url('/masterclick/assets/icons/regular/minus.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/minus.svg') no-repeat center / contain;
}

.icon-button--close::before {
  mask: url('/masterclick/assets/icons/regular/x.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/x.svg') no-repeat center / contain;
}

.icon-button--back::before {
  mask: url('/masterclick/assets/icons/regular/arrow-left.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/arrow-left.svg') no-repeat center / contain;
}

.icon-button--geo::before {
  mask: url('/masterclick/assets/icons/fill/navigation-arrow-left.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/fill/navigation-arrow-left.svg') no-repeat center / contain;
}

.icon-button--menu::before {
  mask: url('/masterclick/assets/icons/regular/list.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/list.svg') no-repeat center / contain;
}

.icon-button--list-bullets::before {
  mask: url('/masterclick/assets/icons/regular/list-bullets.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/list-bullets.svg') no-repeat center / contain;
}

.icon-button--caret-left::before {
  mask: url('/masterclick/assets/icons/regular/caret-left.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/caret-left.svg') no-repeat center / contain;
}

.icon-button--caret-right::before {
  mask: url('/masterclick/assets/icons/regular/caret-right.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/caret-right.svg') no-repeat center / contain;
}

.icon-button--caret-up::before {
  mask: url('/masterclick/assets/icons/regular/caret-up.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/caret-up.svg') no-repeat center / contain;
}

.icon-button--info::before {
  mask: url('/masterclick/assets/icons/regular/info.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/info.svg') no-repeat center / contain;
}

.icon-button--trash::before {
  mask: url('/masterclick/assets/icons/regular/trash.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/trash.svg') no-repeat center / contain;
}

.icon-button--arrows-clockwise::before {
  mask: url('/masterclick/assets/icons/regular/arrow-clockwise.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/arrow-clockwise.svg') no-repeat center / contain;
}

/* Иконка камеры (слот .icon-button__icon) */
.icon-button__icon--camera {
  background-color: currentColor;
  mask: url('/masterclick/assets/icons/regular/camera.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/camera.svg') no-repeat center / contain;
}