.cyl-sam {
    --sam-top: var(--sam-top-d);
    --sam-font-size: var(--sam-font-size-d);
    --sam-adminbar: 0px;
    /* Space the dropdown label has to leave free on the icon side. */
    --sam-dropdown-icon-space: calc(1.25em + 12px);
    /* Edge strip the scroll arrows sit on, where the row fades out. */
    --sam-arrow-fade: calc(var(--sam-arrow-size, 32px) + 14px);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--sam-height);
    background: var(--sam-bg);
    border-color: var(--sam-border-color);
    border-style: var(--sam-border-style);
    border-width: var(--sam-border-top) var(--sam-border-right) var(--sam-border-bottom) var(--sam-border-left);
    border-radius: var(--sam-radius);
    z-index: var(--sam-z-index);
}

body.admin-bar .cyl-sam { --sam-adminbar: 32px; }

.cyl-sam[data-sticky="1"][data-sticky-method="css"] {
    position: sticky;
    top: calc(var(--sam-top) + var(--sam-adminbar));
}

.cyl-sam.is-sam-fixed {
    position: fixed !important;
    margin: 0 !important;
    box-shadow: var(--sam-sticky-shadow);
}

.cyl-sam.is-sam-stuck:not(.is-sam-fixed) {
    box-shadow: var(--sam-sticky-shadow);
}

.cyl-sam__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: var(--sam-justify);
    gap: var(--sam-gap);
    width: 100%;
    height: 100%;
    max-width: var(--sam-max-width);
    margin: 0 auto;
    padding: var(--sam-pad-top) var(--sam-pad-right) var(--sam-pad-bottom) var(--sam-pad-left);
    /* A menu bar can outgrow its container on any screen -- a narrow phone, a
       small laptop or simply too many entries -- so the row scrolls everywhere
       instead of only below the mobile breakpoint. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

@supports (justify-content: safe center) {
    .cyl-sam__inner { justify-content: var(--sam-justify-safe); }
}

.cyl-sam__inner::-webkit-scrollbar { display: none; }
.cyl-sam--show-scrollbar .cyl-sam__inner { scrollbar-width: auto; }
.cyl-sam--show-scrollbar .cyl-sam__inner::-webkit-scrollbar { display: block; height: 7px; }

/* Horizontal scroll arrows ------------------------------------------------ */
.cyl-sam__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: var(--sam-arrow-size);
    height: var(--sam-arrow-size);
    padding: 0;
    border: var(--sam-arrow-border-width) solid var(--sam-arrow-border-color);
    border-radius: var(--sam-arrow-radius);
    background: var(--sam-arrow-bg);
    color: var(--sam-arrow-color);
    font-size: var(--sam-arrow-icon-size);
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, visibility .18s ease;
}

.cyl-sam__arrow > span { display: block; line-height: 1; pointer-events: none; }
.cyl-sam__arrow--prev { left: 6px; }
.cyl-sam__arrow--next { right: 6px; }

.cyl-sam__arrow:hover,
.cyl-sam__arrow:focus-visible {
    color: var(--sam-arrow-hover-color);
    background: var(--sam-arrow-hover-bg);
    border-color: var(--sam-arrow-hover-border);
    outline: none;
}

/* Shown by the script only while the row actually overflows in that direction. */
.cyl-sam--has-arrows.is-sam-overflowing .cyl-sam__arrow { display: flex; }
.cyl-sam--has-arrows.is-sam-overflowing.is-sam-scroll-start .cyl-sam__arrow--prev,
.cyl-sam--has-arrows.is-sam-overflowing.is-sam-scroll-end .cyl-sam__arrow--next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The row keeps its own padding and fades out underneath the buttons rather
   than reserving space for them: reserved space sits empty at whichever end of
   the scroll range the visitor stops at, where that arrow is hidden anyway. */
.cyl-sam--has-arrows.is-sam-overflowing .cyl-sam__inner {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sam-arrow-fade), #000 calc(100% - var(--sam-arrow-fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--sam-arrow-fade), #000 calc(100% - var(--sam-arrow-fade)), transparent 100%);
}

/* At either end the matching arrow is gone, so that side stays fully readable. */
.cyl-sam--has-arrows.is-sam-overflowing.is-sam-scroll-start .cyl-sam__inner {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--sam-arrow-fade)), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--sam-arrow-fade)), transparent 100%);
}

.cyl-sam--has-arrows.is-sam-overflowing.is-sam-scroll-end .cyl-sam__inner {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--sam-arrow-fade)), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - var(--sam-arrow-fade)), transparent 100%);
}

.cyl-sam__link {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sam-link-pad-y) var(--sam-link-pad-x);
    color: var(--sam-font-color) !important;
    background: transparent;
    font-size: var(--sam-font-size);
    font-weight: var(--sam-font-weight);
    line-height: 1.35;
    letter-spacing: var(--sam-letter-spacing);
    text-transform: var(--sam-text-transform);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.cyl-sam__link:hover,
.cyl-sam__link:focus-visible {
    color: var(--sam-hover-color) !important;
    background: var(--sam-hover-bg);
    outline: none;
}

.cyl-sam__link.is-active {
    color: var(--sam-active-color) !important;
    background: var(--sam-active-bg);
    font-weight: var(--sam-active-weight);
    box-shadow: inset 0 calc(-1 * var(--sam-active-border-width)) 0 var(--sam-active-border-color);
}

.cyl-sam__link[hidden] { display: none !important; }

.cyl-sam__dropdown-toggle {
    display: none;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--sam-height);
    border: 0;
    background: transparent;
    color: var(--sam-font-color);
    padding: var(--sam-pad-top) var(--sam-pad-right) var(--sam-pad-bottom) var(--sam-pad-left);
    font: inherit;
    font-size: var(--sam-font-size);
    font-weight: var(--sam-font-weight);
    text-align: var(--sam-dropdown-text-align);
    cursor: pointer;
}

/* The icon is taken out of the flow and the label reserves the same amount of
   room on the side(s) it needs: otherwise "Mitte" would centre the text inside
   the space left over next to the icon rather than inside the bar. */
.cyl-sam__dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: var(--sam-dropdown-icon-space);
    text-align: var(--sam-dropdown-text-align);
}

.cyl-sam--dropdown-align-center .cyl-sam__dropdown-label {
    padding-left: var(--sam-dropdown-icon-space);
}

.cyl-sam__dropdown-icons {
    position: absolute;
    top: 50%;
    right: var(--sam-pad-right);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
}

.cyl-sam__dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    font-size: 1.15em;
    line-height: 1;
}

.cyl-sam__dropdown-icon:empty { display: none; }
.cyl-sam__dropdown-icon--open { display: none; }
.cyl-sam__dropdown-toggle[aria-expanded="true"] .cyl-sam__dropdown-icon--closed { display: none; }
.cyl-sam__dropdown-toggle[aria-expanded="true"] .cyl-sam__dropdown-icon--open:not(:empty) { display: inline-flex; }
.cyl-sam__dropdown-toggle[aria-expanded="false"] .cyl-sam__dropdown-icons[data-closed-icon="none"],
.cyl-sam__dropdown-toggle[aria-expanded="true"] .cyl-sam__dropdown-icons[data-open-icon="none"] { display: none; }
.cyl-sam__dropdown-toggle[aria-expanded="false"]:has(.cyl-sam__dropdown-icons[data-closed-icon="none"]) .cyl-sam__dropdown-label,
.cyl-sam__dropdown-toggle[aria-expanded="true"]:has(.cyl-sam__dropdown-icons[data-open-icon="none"]) .cyl-sam__dropdown-label {
    padding-left: 0;
    padding-right: 0;
}

.cyl-sam-placeholder { width: 100%; }

@media (max-width: 1024px) {
    .cyl-sam {
        --sam-top: var(--sam-top-t);
        --sam-font-size: var(--sam-font-size-t);
    }
}

@media (max-width: 782px) {
    body.admin-bar .cyl-sam { --sam-adminbar: 46px; }
}

@media (max-width: 767px) {
    .cyl-sam {
        --sam-top: var(--sam-top-m);
        --sam-font-size: var(--sam-font-size-m);
    }

    .cyl-sam--mobile-scroll .cyl-sam__inner {
        justify-content: flex-start;
    }

    .cyl-sam--mobile-wrap .cyl-sam__inner {
        flex-wrap: wrap;
        overflow: visible;
    }

    .cyl-sam--mobile-dropdown .cyl-sam__dropdown-toggle {
        display: flex;
        align-items: center;
    }
    .cyl-sam--mobile-dropdown .cyl-sam__inner {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0;
        overflow-x: hidden;
        /* Without an own color the panel keeps the container background, so the
           toggle and the open list read as one surface. */
        background: var(--sam-dropdown-bg, var(--sam-bg));
        border-bottom-left-radius: var(--sam-radius);
        border-bottom-right-radius: var(--sam-radius);
    }
    .cyl-sam--mobile-dropdown.is-dropdown-open { height: auto; }
    .cyl-sam--mobile-dropdown.is-dropdown-open .cyl-sam__inner { display: flex; height: auto; }

    /* Animation "slide": the panel stays in the box model and its height is
       driven by the script, which measures the open state before each run. */
    .cyl-sam--mobile-dropdown.cyl-sam--dropdown-anim-slide.is-dropdown-animating { height: auto; }
    .cyl-sam--mobile-dropdown.cyl-sam--dropdown-anim-slide .cyl-sam__inner {
        display: flex;
        height: 0;
        padding-bottom: 0;
        overflow: hidden;
        transition: height var(--sam-dropdown-duration) cubic-bezier(.4, 0, .2, 1);
    }
    .cyl-sam--mobile-dropdown.cyl-sam--dropdown-anim-slide.is-dropdown-open .cyl-sam__inner {
        height: auto;
        padding-bottom: var(--sam-pad-bottom);
    }

    @media (prefers-reduced-motion: reduce) {
        .cyl-sam--mobile-dropdown.cyl-sam--dropdown-anim-slide .cyl-sam__inner { transition: none; }
    }
    .cyl-sam--mobile-dropdown .cyl-sam__link {
        width: 100%;
        justify-content: var(--sam-dropdown-justify);
        text-align: var(--sam-dropdown-text-align);
        white-space: normal;
        padding-top: max(var(--sam-link-pad-y), 10px);
        padding-bottom: max(var(--sam-link-pad-y), 10px);
    }
}