/* ============================================================================
 * Randnavigation (Offset-Tools) — Light-DOM-Styles zu <atomic-offsettools>.
 *
 * Zustaendigkeiten:
 *   Komponente (Shadow-DOM): Position am Rand, Flaeche, Radius, Aufklapp-Breite,
 *                            Bottom-Bar-Umschaltung unterhalb des Breakpoints.
 *   DIESE Datei:             Liste, Icon, Label — also alles im Light-DOM.
 *   Theme:                   NUR die --atomic-offset-tools-*-Slots ueberschreiben.
 *
 * Es gibt hier bewusst KEINE Sektions-Breite, kein Sektions-Padding und keinen
 * Sektions-Hintergrund — das Element ist fixiert und liegt ausserhalb des
 * Frame-Systems (harte Workspace-Regel).
 * ========================================================================== */

atomic-offsettools:not(:defined) {
    display: none;
}

atomic-offsettools.pl-aot {
    /* .mask-svg (Bootstrap-Utility) faerbt sich ueber --bs-icon-color. */
    --bs-icon-color: var(--atomic-offset-tools-icon-color, #fff);
}

.pl-aot .pl-aot__list {
    display: flex;
    flex-direction: column;
    gap: var(--atomic-offset-tools-gap, 5px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-aot .pl-aot__item {
    margin: 0;
}

.pl-aot .pl-aot__link {
    display: flex;
    align-items: center;
    gap: var(--atomic-offset-tools-label-gap, 10px);
    text-decoration: none;
    color: inherit;
    padding: var(--atomic-offset-tools-link-padding, 5px 0);
}

.pl-aot .pl-aot__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.pl-aot .pl-aot__label {
    white-space: nowrap;
    line-height: 1.1;
    color: var(--atomic-offset-tools-label-color, var(--atomic-offset-tools-icon-color, #fff));
    font-size: var(--atomic-offset-tools-label-font-size, 0.9375rem);
    /* Eingeklappt unsichtbar, aber im Accessibility-Tree (kein visibility:hidden). */
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.pl-aot:hover .pl-aot__label,
.pl-aot:focus-within .pl-aot__label {
    opacity: 1;
    transform: none;
}

.pl-aot .pl-aot__link:hover .pl-aot__icon .mask-svg,
.pl-aot .pl-aot__link:focus-visible .pl-aot__icon .mask-svg {
    background-color: var(--atomic-offset-tools-icon-hover-color, var(--atomic-offset-tools-icon-color, #fff));
}

.pl-aot .pl-aot__link:focus-visible {
    outline: 2px solid var(--atomic-offset-tools-focus-color, currentColor);
    outline-offset: 2px;
}

/* --- Bottom-Bar-Modus (unterhalb des Breakpoints) ------------------------- */
.pl-aot.bottom-bar .pl-aot__list {
    flex-direction: row;
    justify-content: center;
    gap: var(--atomic-offset-tools-gap-bottom-bar, 1.5rem);
    width: 100%;
}

.pl-aot.bottom-bar .pl-aot__link {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.5rem;
    text-align: center;
}

/* In der Bottom-Bar ist Platz — Labels sind dort dauerhaft sichtbar
   (auf Touch-Geraeten gibt es kein Hover). */
.pl-aot.bottom-bar .pl-aot__label {
    opacity: 1;
    transform: none;
    font-size: var(--atomic-offset-tools-label-font-size-bottom-bar, 0.75rem);
}

/* --- Sichtbarkeit an den Sticky-Zustand des Headers koppeln ---------------
   <atomic-stickystate> setzt beim Scrollen das Attribut `stuck` auf <html>. */
.pl-aot--stuck-only,
.pl-aot--unstuck-only {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out,
                max-width 0.5s ease-in-out, padding 0.5s ease-in-out;
}

html:not([stuck]) .pl-aot--stuck-only,
html[stuck] .pl-aot--unstuck-only {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .pl-aot .pl-aot__label,
    .pl-aot--stuck-only,
    .pl-aot--unstuck-only {
        transition: none;
    }
}