/* Hamburger-Menu nach Video Web Dev Simplified angepasst für Bibliotheksgebrauch
   https://www.youtube.com/watch?v=dAIVbLrAb_U&t=30s

   Grundsätzliche Funktion: Eine Checkbox innerhalb eines Labels wird der Hamburger. Ein Aside mit passender Klasse 
   wird das Menü. Wenn das Menü aktiviert wird, wird das Menü eingeblendet und der Hamburger wird zu einem X. Durch
   nochmaligem Drücken wird aus dem X ein Hamburger und das Menü wird ausgeblendet.

*/


*, *::after, *::before { 
    box-sizing: border-box;
}

body {
    margin:0;
}


:root {
    --hamburger-bar-width: 30px; /* Die Breite eines Hamburger-Streifens */
    --hamburger-bar-height: 4px; /* Die Höhe eines Hamburger-Streifens */
    --hamburger-bar-gap: 3px;    /* Der Abstand zwischen 2 Hamburger-Streifen */
    --hamburger-bar-foreground: white;
    --hamburger-bar-background: white;
    --hamburger-margin: 5px;
    --hamburger-animation-timing: 200ms ease-in-out;
    --hamburger-height: calc( 3 * var(--hamburger-bar-height) 
                            + 2 * var(--hamburger-bar-gap)
                            );
    --hamburger-space-needed: calc(var(--hamburger-height) + var(--hamburger-margin)*2);

    --hamburger-menu-background: var(--Trappel-Lila);
    --hamburger-menu-foreground: white;
 
}

/* Hamburger */

.lib-hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356237); 
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-bar-gap);
    width:max-content;
    position: absolute;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    z-index:20;
    cursor: pointer;


}

.lib-hamburger-menu:has(input:checked) {
    --hamburger-bar-foreground: white; 
    --hamburger-bar-background: #333;   
}

.lib-hamburger-menu:has(input:focus-visible)::before,
.lib-hamburger-menu     input:focus-visible,
.lib-hamburger-menu:has(input:focus-visible)::after {
    border: 1px solid var(--hamburger-bar-background);
    box-shadow: 0 0 0 1px var(--hamburger-bar-foreground);
}


.lib-hamburger-menu::before,
.lib-hamburger-menu input,
.lib-hamburger-menu::after {
    content: "";
    width: var(--hamburger-bar-width);
    height:var(--hamburger-bar-height);
    background-color: var(--hamburger-bar-foreground);
    border-radius: 9999px;

    transform-origin: left center;
    transition: opacity   var(--hamburger-animation-timing),
                width     var(--hamburger-animation-timing),
                rotate    var(--hamburger-animation-timing),
                translate var(--hamburger-animation-timing),
                background-color var(--hamburger-animation-timing);
}

.lib-hamburger-menu:has(input:checked)::before {
    rotate:45deg;
    width: var(--x-width);
    /* Um die halbe Breite des Streifens nach oben verschieben. */
    translate: 0 calc(var(--hamburger-bar-height) / -2);
}

.lib-hamburger-menu:has(input:checked)::after {
    rotate:-45deg;
    width: var(--x-width);
    /* Um die halbe Breite des Streifens nach unten verschieben. */
    translate: 0 calc(var(--hamburger-bar-height) / 2);
}

.lib-hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline:none;
    pointer-events: none;
}

.lib-hamburger-menu input:checked{
    opacity: 0;
    width: 0;
}


/*   Sidebar  */
.lib-hamburger-sidebar {
    translate: -100%; /* Verstecken */
    padding: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem) 1rem;
    background-color: var(--hamburger-menu-background);
    color: var(--hamburger-menu-foreground);
    max-width: 10rem;
    height: fit-content;
    transition: translate var(--hamburger-animation-timing);
    z-index: 20;
}


.lib-hamburger-sidebar  a,
.lib-hamburger-sidebar  a:visited {
    text-decoration:none;
    color: var(--hamburger-menu-foreground); 
    display: block;
    padding:1px 0;
}

.lib-hamburger-sidebar  a:hover {
    color: var(--hamburger-menu-background);
    background-color: var(--hamburger-menu-foreground);
}



.lib-hamburger-menu:has(input:checked) ~ .lib-hamburger-sidebar {
    translate: 0 0;
}

.lib-hamburger-container {
    position:fixed;
    z-index:30;
}

.lib-hamburger-container span {
    padding-left:calc(var(--hamburger-space-needed)*2);
    vertical-align: middle;
}