/*
 * Persona-Umschalter mit gleitendem Indikator.
 *
 * Gemeinsam.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 */

/* Persona-Umschalter mit gleitendem Indikator */
.spo-personas-label {
    margin-top: 20px;
    font-size: calc(11px - var(--spo-text-shrink));
    font-weight: 700;
    letter-spacing: .15em;
    /*
     * Kein `text-transform`: die Großbuchstaben des Designs gehören der
     * Aufschrift. Wer die Zeile in Versalien will, tippt sie so — und wer eine
     * gemischte will, bekommt sie und nicht das Geschrei des Stylesheets.
     */
    color: var(--spo-blue-dark);
}

.spo-personas {
    position: relative;
    display: flex;
    padding: 5px;
    border-radius: 8px;
    background: var(--spo-sand-strong);
}

/*
 * Die 9px gehören an die Nachbarschaft, nicht an den Umschalter selbst — sonst
 * kommen sie zu dem Abstand hinzu, den .spo-tabs schon nach oben setzt, und
 * die Leiste steht 19px tief statt 10.
 *
 * Dasselbe Paar wie bei der Reihe: 20px über der Überschrift, 9px darunter
 * (siehe .spo-columns-title in 20-columns.css). Aufgefallen ist es erst, als
 * die Leiste überhaupt gerendert wurde — die Beschriftung steht bis heute in
 * keinem Partial.
 */
.spo-personas-label + .spo-personas {
    margin-top: 9px;
}

.spo-personas-indicator {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / var(--count, 4));
    border-radius: 8px;
    /*
     * Der eigene Verlauf des Bandes (--spo-indicator-gradient, tokens.css) und
     * nicht der der Kacheln: im Design sind die beiden verschieden, nachgemessen
     * am Bild. Bis dahin stand hier ein Token für beide, und weil das Band
     * stimmte, waren es die Kacheln, die falsch standen.
     *
     * Vorher stand hier die Akzentfarbe des Reiters, die Alpine als Inline-Style
     * setzte — eine Farbe je Tab. Sie ist keine Entscheidung des Redakteurs mehr,
     * und der Umschalter ist eine Fläche und nicht vier.
     */
    background: var(--spo-indicator-gradient);
    box-shadow: 0 6px 15px rgba(10, 55, 75, .35);
    transform: translateX(calc(var(--i, 0) * 100%));
    transition: transform .44s cubic-bezier(.34, 1.45, .5, 1);
}

.spo-persona {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    --spo-persona-padding: 9px 2px 8px;
    --spo-persona-fg: var(--spo-blue-dark);
    padding: var(--spo-persona-padding);
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--spo-persona-fg);
    cursor: pointer;
    transition: color .38s ease;
}

/*
 * Der aktive Reiter ist weiß — als Property, weil die Sperre unten die Farbe
 * zurückholt und den Zustand dabei nicht verlieren darf.
 */
.spo-persona.is-active {
    --spo-persona-fg: #fff;
}

.spo-persona-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

/*
 * 26px aus dem Design. Anders als Kachel und Button bringt der Reiter keine
 * Icongröße als Option mit — in einer Leiste stehen alle Reiter gleich hoch.
 *
 * Die Maske selbst (Wiederholung, Lage, Größe) steht in 66-icon.css und gilt für
 * jedes Icon; hier kommt nur das Maß dazu. Die Farbe holt sich das Icon über
 * currentColor aus dem Reiter.
 */
.spo-persona-glyph {
    /*
     * Als Custom Property und nicht als `width`: die Maske in 66-icon.css liest
     * sie und lädt später als diese Datei. Ein `width` hier wäre von ihr
     * überschrieben worden — und weil die Property dann nirgends stünde, hätte
     * das Icon keine Größe mehr gehabt.
     */
    --spo-icon-size: 26px;
}

.spo-persona-label {
    /* 14px auf dem Schreibtisch, 11.5px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-persona);
    font-weight: 500;
}

/*
 * Zeiger und Fokus ändern den Reiter nicht — dieselbe Sperre wie bei Kachel,
 * Fläche und Meldung. Der Reiter liegt über dem gleitenden Band
 * (.spo-personas-indicator); bekäme er im Fokus einen Rahmen und keinen
 * Innenabstand, sprängen Band und Beschriftung auseinander.
 */
.spo-persona:hover:not(:focus-visible),
.spo-persona:focus:not(:focus-visible) {
    background: transparent !important;
    color: var(--spo-persona-fg) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
}

.spo-persona:hover,
.spo-persona:focus {
    padding: var(--spo-persona-padding) !important;
    border: 0 !important;
    white-space: normal !important;
}