/* Icon Button of UI Kit 2026: Figma «LidFly — Бренд и UI Kit 2026» → «Icon Button» (7:298).
   A round button with one icon from icons.svg and an aria-label. Sizes S 30 (icon 16) and M 36 (icon 18);
   styles Ghost (transparent, hover --lf-bg-hover) and Gray (--lf-action-gray). Whatever the circle size,
   the hit area is at least 44 × 44 (the ::after layer), so the button works on a phone as is.
   <button class="lf-icon-btn lf-icon-btn--ghost lf-icon-btn--s" type="button" aria-label="Закрыть">
     <svg class="lf-icon" aria-hidden="true"><use href="/images/icons.svg?v=2#x"></use></svg>
   </button> */
.lf-icon-btn {
  --lf-icon-btn-size: 36px;
  --lf-icon-btn-icon: 18px;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--lf-icon-btn-size);
  height: var(--lf-icon-btn-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--lf-radius-full);
  background: transparent;
  color: var(--lf-text-primary);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lf-icon-btn::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((var(--lf-icon-btn-size) - 44px) / 2));
}

.lf-icon-btn > svg {
  display: block;
  flex: none;
  width: var(--lf-icon-btn-icon);
  height: var(--lf-icon-btn-icon);
}

.lf-icon-btn--s {
  --lf-icon-btn-size: 30px;
  --lf-icon-btn-icon: 16px;
}

.lf-icon-btn--m {
  --lf-icon-btn-size: 36px;
  --lf-icon-btn-icon: 18px;
}

.lf-icon-btn--ghost:hover {
  background: var(--lf-bg-hover);
}

.lf-icon-btn--gray {
  background: var(--lf-action-gray);
}

.lf-icon-btn--gray:hover {
  background: var(--lf-action-gray-hover);
}

.lf-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--lf-focus-ring);
}

.lf-icon-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .lf-icon-btn {
    transition: none;
  }
}