/* ============================================================
   Button component — KidsTools
   Зависимости: tokens.css (должен быть подключён выше)

   Сверено по Figma:
   - Primary CTA    (node 70:7783 "Каталог", 10:709 "Перейти в каталог",
                     70:7815 "Зайти в аккаунт", 10:949 "Добавить в корзину")
     bg #c08552, text #fff, Gilroy Semibold, rounded 8, py 12 / px 20
   - Secondary      (node 12:1403 "Фильтр", 11:1139 "Сортировка",
                     70:7795 icon-buttons 46×46)
     bg #efefef, text #111, rounded 8, py 12 / px 20
   - Ghost          (node 11:1130 "Сбросить фильтр")
     bg transparent, 1px border #efefef, text #111, rounded 8
   - Disabled       (нет в макете — стандартный паттерн: opacity 0.4,
                     cursor not-allowed, блок hover/active)

   Spacing / radius / typography берём строго из tokens.css.
   ============================================================ */

/* ---------- Base ---------- */
.btn {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);                      /* 12px между иконкой и текстом */
    min-width: 0;                             /* позволяет кнопке ужиматься в grid cell с minmax(0, 1fr) */

    /* box */
    height: var(--control-height-md);         /* 46px — базовая высота кнопки */
    padding: var(--space-3) var(--space-5);   /* 12px 20px */
    border: var(--border-width-1) solid transparent;
    border-radius: var(--radius-md);          /* 8px */
    background: transparent;

    /* typography */
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);           /* 14px по умолчанию */
    font-weight: var(--font-weight-semibold); /* Gilroy Semibold */
    line-height: 1;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text);
    white-space: nowrap;
    text-decoration: none;

    /* misc */
    cursor: pointer;
    user-select: none;
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        border-color     var(--duration-base) var(--ease-standard),
        color            var(--duration-base) var(--ease-standard),
        box-shadow       var(--duration-base) var(--ease-standard),
        transform        var(--duration-fast) var(--ease-standard);
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    box-shadow: var(--shadow-focus);
}

.btn:active {
    transform: translateY(1px);
}

/* Иконка внутри кнопки. В макете 22×22 для base и 16×16 для compact/chip. */
.btn__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.btn__icon svg,
.btn__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Variant: Primary ---------- */
/* Источник: node 70:7783, 10:709, 10:949, 70:7815 */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn--primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

/* ---------- Variant: Secondary ---------- */
/* Источник: node 12:1403 "Фильтр", 11:1139 "Сортировка: по популярности" */
.btn--secondary {
    background-color: var(--color-neutral-100);
    color: var(--color-text);
    border-color: var(--color-neutral-100);
}

.btn--secondary:hover {
    background-color: var(--color-neutral-200);
    border-color: var(--color-neutral-200);
}

.btn--secondary:active {
    background-color: var(--color-neutral-300);
    border-color: var(--color-neutral-300);
}

/* ---------- Variant: Ghost ---------- */
/* Источник: node 11:1130 "Сбросить фильтр" — 1px border #efefef, прозрачный фон */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-neutral-100);
}

.btn--ghost:hover {
    background-color: var(--color-neutral-50);
    border-color: var(--color-neutral-200);
}

.btn--ghost:active {
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-300);
}

/* ---------- State: Disabled ---------- */
.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* ---------- Size modifiers ---------- */

/* Large — product CTA "Добавить в корзину" (node 10:949): py 14 px 20, 16px medium */
.btn--lg {
    height: var(--control-height-lg);              /* 52px */
    padding: var(--space-3-5) var(--space-5);      /* 14px 20px */
    font-size: var(--font-size-md);                /* 16px */
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    gap: var(--space-3);
}

/* Small — компактная версия (в макете не встречается явно, но нужна для toolbars) */
.btn--sm {
    height: var(--control-height-sm);              /* 36px */
    padding: var(--space-2) var(--space-3);        /* 8px 12px */
    font-size: var(--font-size-xs);                /* 12px */
    gap: var(--space-2);
}

.btn--sm .btn__icon {
    width: 16px;
    height: 16px;
}

/* ---------- Shape modifiers ---------- */

/* Square icon-only (node 70:7795/7799/7803 — 46×46, только иконка) */
.btn--icon {
    width: var(--control-height-md);
    padding: var(--space-3) var(--space-5);
    gap: 0;
}

.btn--icon.btn--lg {
    width: var(--control-height-lg);
}

/* Pill (чипы фильтров — node 12:1364: bg primary, rounded 999px, 14px Bold) */
.btn--pill {
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    font-weight: var(--font-weight-bold);
    gap: var(--space-3);
}

.btn--pill .btn__icon {
    width: 16px;
    height: 16px;
}

/* ---------- Full-width ---------- */
.btn--block {
    width: 100%;
}

/* ---------- Badge-on-button (node 12:1408 — цифра 4 поверх "Фильтр") ---------- */
.btn {
    position: relative;
}

.btn__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-badge);
    font-size: var(--font-size-2xs);            /* 10px */
    font-weight: var(--font-weight-bold);
    line-height: 1;
}