/* iconbutton — квадратная кнопка с иконкой.

   Общий вид кнопки без иконки: размер, скругление, подсветка, фокус.
   Иконку задаёт владелец — он знает, что именно на кнопке нарисовано.

   Размер настраивается переменными, поэтому один модуль подходит
   и доку, и строке настроек:

       --ib-size   сторона квадрата
       --ib-icon   сторона иконки внутри

   Владелец переопределяет их своим классом:

       .dock__link { --ib-icon: 22px; }
       .tb__button { --ib-icon: 20px; } */

.iconbutton {
    --ib-size: 44px;
    --ib-icon: 20px;

    flex: none;
    display: grid;
    place-items: center;
    width: var(--ib-size);
    height: var(--ib-size);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--color-iconbutton-background);
    color: var(--color-ink);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease), color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Наведение — та же акцентная подложка, что у капли выбора в доке,
   но в полтора раза реже: это фон под курсором, а не отметка того,
   что страница открыта. */
.iconbutton:hover {
    background: var(--color-iconbutton-hover);
}

/* Фокус обводится акцентом целиком — той же краской, что и все
   обводки сайта. */
.iconbutton:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Активность — это состояние кнопки, а не её оформление: фон рисует
   тот, кто знает, чем подсветить (в доке это переезжающий индикатор).
   Здесь только цвет иконки, чтобы она оставалась читаемой. */
.iconbutton.is-active {
    color: var(--color-ink);
}

/* Опасное действие остаётся красным в любой теме: это цвет
   опасности, а не акцент. */
.iconbutton--danger,
.iconbutton[data-variant="danger"] {
    color: var(--color-danger);
}

.iconbutton--danger:hover,
.iconbutton[data-variant="danger"]:hover {
    /* Опасное светлеет готовой краской из темы, а не фильтром:
       тот же --color-danger-hover, что и у остальных опасных мест. */
    color: var(--color-danger-hover);
    background: var(--color-danger-soft);
}

.iconbutton--danger:focus-visible,
.iconbutton[data-variant="danger"]:focus-visible {
    outline-color: var(--color-danger);
}

.iconbutton__icon {
    display: block;
    width: var(--ib-icon);
    height: var(--ib-icon);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

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

.iconbutton[data-size="compact"] { --ib-size: 30px; --ib-icon: 16px; border-radius: 10px; }

.iconbutton[data-variant="quiet"] { background:transparent; }
.iconbutton[data-variant="quiet"]:hover { background:var(--color-iconbutton-hover); }

.iconbutton:disabled { opacity:.35; cursor:default; pointer-events:none; }