.mode-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: 2px;
    background: var(--color-bg);
}

/* width + transform written inline by mode-switch.js; sits under the
   labels (z-index 0) so the active label reads on top of the fill. */
.mode-switch__pill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 0;
    z-index: 0;
    background: var(--color-accent-strong);
    border-radius: var(--radius-pill);
    transform: translateX(0);
    transition:
        transform var(--motion-pill) var(--ease-decelerate),
        width var(--motion-pill) var(--ease-decelerate);
    will-change: transform, width;
    pointer-events: none;
}

.mode-switch__btn {
    position: relative;
    z-index: 1;
    padding: 0 var(--space-3);
    height: calc(var(--control-height-sm) - 4px);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--motion-pill) var(--ease-decelerate);
}

.mode-switch__btn:hover {
    color: var(--color-text-base);
}

.mode-switch--with-icons .mode-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.mode-switch__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.mode-switch__icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

.mode-switch__btn.is-active {
    color: var(--color-on-fill);
}

.mode-switch__btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
}