/*
 * Tabs-Block (uniplus-gutenberg) im RT-BA-Design. Eigene Datei, weil Editor und Frontend
 * gleich aussehen sollen (add_editor_style); der Block nutzt in beiden dieselben Klassen.
 */

.uniplus-tabs-block__nav {
    margin: auto;
    width: fit-content;
    border-bottom: 4px solid var(--wp--preset--color--karbon-20);
}

.uniplus-tabs-block__nav-link {
    position: relative;
    font-family: var(--wp--preset--font-family--author), serif !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    text-align: center;
    padding-inline: clamp(var(--wp--preset--spacing--16), 0.3rem + 3vw, var(--wp--preset--spacing--48));
    padding-block: var(--wp--preset--spacing--12);
    border: none !important;
}

.uniplus-tabs-block__nav .uniplus-tabs-block__nav-link,
.uniplus-tabs-block__nav .uniplus-tabs-block__nav-link:hover,
.uniplus-tabs-block__nav .uniplus-tabs-block__nav-link:focus,
.uniplus-tabs-block__nav .uniplus-tabs-block__nav-link:focus-visible,
.uniplus-tabs-block__nav .uniplus-tabs-block__nav-link.is-active {
    color: var(--wp--preset--color--karbon);
    background: none; /* der aktive Reiter traegt im Plugin-CSS ein "background-color:#fff" */
}

.uniplus-tabs-block__nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background-color: var(--wp--preset--color--karbon);
}

.uniplus-tabs-block .uniplus-tabs-block__nav .uniplus-tabs-block__nav-link,
.uniplus-tabs-block .uniplus-tabs-block__nav .uniplus-tabs-block__nav-item {
    margin: 0;
}

.uniplus-tabs-block__pane {
    margin-top: var(--wp--preset--spacing--32);
    margin-inline: auto;
    width: 100%;
    background-color: var(--wp--preset--color--schnee-base);
    padding: clamp(var(--wp--preset--spacing--24), 0.97rem + 2.25vw, var(--wp--preset--spacing--48));
}

.uniplus-tabs-block {
    width: 100%;
    max-width: 1280px;
}