/* slider — переключатель взаимоисключающих пунктов.

   Геометрия задана токенами: их переопределяет тема, поэтому
   переключатель подстраивается под палитру вместе со всем сайтом. */

.slider {
    display: flex;
    gap: 6px;
    padding: var(--slider-pad);
    border-radius: var(--slider-radius);
    /* Группа утоплена в панель глубже поля ввода: пункты лежат
       в общем лотке. */
    background: color-mix(in srgb, var(--color-dark) 60%, transparent);
}

.slider__option {
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: var(--slider-item-radius);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease), color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

.slider__option:hover {
    color: var(--color-ink);
}

/* Выбранный пункт окрашен акцентом — той же краской, что обводки
   и капля выбора в доке. У пункта нет границы, фон у него сплошной,
   поэтому краска ложится напрямую — без прозрачной границы и подложек,
   как у полей. */
.slider__option[aria-checked="true"] {
    background: var(--color-accent);
    color: var(--color-accent-fg);
}

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

/* Пункт системной темы скрыт, если браузер не отдаёт акцентный цвет ОС.
   Класс ставит themes.js по результату проверки. */
html.no-system-accent .slider__option[data-value="system"] {
    display: none;
}

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

/* Public contextual variant. */
.slider[data-variant="surface"] {
    --ring-color: var(--color-border);
    --fill: var(--color-surface-inset);

    border: 1px solid transparent;
    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
}