.uniplus-tabs-block {
    box-sizing: border-box;
}

/*
 * Klassen "nav"/"nav-tabs"/"nav-item"/"nav-link"/"tab-content"/"tab-pane" stehen
 * bewusst zusaetzlich zu den eigenen "uniplus-tabs-block__*"-Klassen im Markup
 * (siehe render.php) -- reine Bootstrap-Namenskonvention als Angebot, damit ein
 * Theme mit eigenem Bootstrap-CSS die Optik darueber ueberschreiben kann
 * (Nutzer-Vorgabe, siehe IMPL-019). Das eigene Basis-Styling haengt ausschliesslich
 * an den "uniplus-tabs-block__*"-Selektoren, damit es nicht mit ggf. bereits vom
 * Theme belegten generischen ".nav-link" o. ae. kollidiert.
 */
.uniplus-tabs-block__nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
}

.uniplus-tabs-block__nav-item {
    margin-bottom: -1px;
}

.uniplus-tabs-block__nav-link {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.uniplus-tabs-block__nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}

.uniplus-tabs-block__nav-link.is-active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 700;
}

/*
 * Sichtbarkeit: gesteuert wird sie in render.php/view.js weiterhin ueber das
 * native "hidden"-Attribut plus die eigene ".is-active"-Klasse. Die beiden Regeln
 * hier sind noetig, weil ein Theme mit eigenem Bootstrap-CSS (z. B. uni-rt-ba mit
 * Bootstrap 5) ".tab-content>.tab-pane{display:none}" mitbringt und als Gegenstueck
 * ".tab-content>.active{display:block}" erwartet -- also Bootstraps ".active", nicht
 * unser ".is-active". Ohne diese Regeln bleiben deshalb *alle* Panes verborgen.
 * Die Selektoren haengen bewusst an den eigenen "uniplus-tabs-block__*"-Klassen und
 * kommen mit drei Klassen auf eine hoehere Spezifitaet als Bootstraps zwei --
 * damit gewinnen sie unabhaengig von der Ladereihenfolge der Stylesheets.
 */
.uniplus-tabs-block__content > .uniplus-tabs-block__pane.is-active {
    display: block;
}

.uniplus-tabs-block__content > .uniplus-tabs-block__pane[hidden] {
    display: none;
}

/*
 * Editor (blocks/tabs/build-src/edit.js und blocks/tab/build-src/edit.js).
 *
 * Reiter-Leiste und Panes tragen im Editor DIESELBEN Klassen wie im Frontend
 * (".uniplus-tabs-block__nav", "__nav-item", "__nav-link", "__content",
 * "__pane") -- fruehere eigene "-edit"-Klassen gibt es nicht mehr. Nur so
 * greifen im Editor sowohl das Basis-Styling oben in dieser Datei als auch die
 * Theme-Ueberschreibungen: uni-rt-ba laedt seine style.css per
 * add_editor_style() zusaetzlich in den Editor-Canvas, stylt darin aber
 * ausschliesslich die Frontend-Klassen. Mit den alten "-edit"-Klassen sah der
 * Block im Admin deshalb voellig anders aus als in der Storefront.
 *
 * Rein editorseitig bleiben nur die Modifier "--edit" (siehe unten) und der
 * "+ Reiter"-Button.
 */

/* Umschliesst die Reiter-Leiste und den "+ Reiter"-Button. Positionsanker,
   damit der Button die <ul> nicht verbreitert und deren Zentrierung im Theme
   ("margin:auto; width:fit-content") unangetastet bleibt. */
.uniplus-tabs-block__nav-editbar {
    position: relative;
}

/* "+ Reiter": optisch klar als Aktion und nicht als weiterer Reiter erkennbar
   (gestrichelter Rahmen, gedeckte Schrift). Sitzt am rechten Rand und ist auch
   dann da, wenn noch kein Reiter existiert -- sonst gaebe es nach dem Loeschen
   des letzten Reiters keinen Weg zurueck. */
.uniplus-tabs-block__nav-add {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.5rem 1rem;
    border: 1px dashed #b0b7be;
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
    font: inherit;
    color: #50575e;
}

.uniplus-tabs-block__nav-add:hover {
    border-color: #50575e;
    color: #1e1e1e;
}

/* Im Editor zeigt der Block nur den aktiven Reiter; ausgeblendet wird per
   Inline-Style (blocks/tab/build-src/edit.js). Die Frontend-Regel
   "__content > __pane[hidden] {display:none}" greift hier also nicht --
   der Editor setzt kein [hidden], damit der Block auswaehlbar bleibt. */
.uniplus-tabs-block__content--edit > .uniplus-tabs-block__pane--edit.is-active {
    display: block;
}