/*** openthinking-menu */
openthinking-menu { 
    --logoColor: initial;
    --logoShadow: rgba(255,255,255,.6);
    --logoFill: currentColor;
    --globalTime: 500ms;
    --globalTransition: all var(--globalTime) var(--easeInOutExpo);
    --menuMargin: 2em;

    display: grid; 
    place-items: end; 
    position: fixed; 
    z-index: 99999999999999; 
    inset-inline-end: 0rem; 
    inset-block-end: 0rem;
}

openthinking-menu .logo { position: relative; z-index: 9; text-align: end; width: max-content }
openthinking-menu .logo label { filter: var(--logoColor); display: inline-grid; place-items: center; cursor: pointer; }

openthinking-menu .logo svg { fill: var(--logoFill); filter: drop-shadow(0 0 20px var(--logoShadow)) }

openthinking-menu #openthinkingMenu { perspective: 600px; width: 0 } 

openthinking-menu #openthinkingMenu li { 
    opacity: 0;
    pointer-events: none;
    text-align: end; 

    transform: translateX(150px) scale(2) rotate(30deg);
    filter: blur(5px);

    transform-style: preserve-3d;
    transform-origin: center right;
    backface-visibility: hidden;

    transition: all var(--globalTime) var(--easeOutQuint);
    transition-delay: calc(var(--tDelay) * 60ms);
    margin: 2px 0px;

    justify-self: end; 
    text-align: end;
}

openthinking-menu [data-menu]:checked ~ #openthinkingMenu { width: fit-content }
openthinking-menu [data-menu]:checked ~ #openthinkingMenu li { opacity: 1; transform: none; filter: blur(0); pointer-events: all;}

openthinking-menu #openthinkingMenu .button.is-custom {
    --buttonBg: var(--color);
    --buttonColor: var(--bgColor);
    --buttonBorderColor: var(--buttonBorderColor);
    --buttonBorderHover: var(--buttonBorderWidth);
    --buttonRadius: 100vw;
    --buttonWeight: 400;
    --buttonPadding: 1rem;
    --buttonAlign: end;
    --buttonSize: 1.5rem;
    --buttonWidth: fit-content;

    line-height: 1.2;
    letter-spacing: 0px;
    position: relative;
}

openthinking-menu #openthinkingMenu li { display: flex; align-items: center; justify-content: flex-end; }

openthinking-menu #openthinkingMenu li::before { 
    content: "\2192";
    display: inline-block;
    border-radius: 100vw;
    border: var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    background: transparent;
    padding: 0.2rem 0.7rem;
    transition: all var(--globalTime) var(--easeOutQuint); 
    filter: blur(4px);
    transform: translateX(10px);
    opacity: 0;
}

openthinking-menu #openthinkingMenu li:where(:hover,:focus-visible,:focus-within)::before { filter: blur(0); opacity: 1; transform: none; }

openthinking-menu #openthinkingMenu li [data-new]::before {
    --newSize: 3px;

    content: attr(data-new) "";
    position: absolute;
    top: 0;
    left: calc(-15px + var(--newSize));
    padding: var(--newSize);
    font-size: 50%;
    background: var(--newBg, var(--red));
    color: var(--newColor, var(--white));
    border-radius: 100vw;
}

@media (width >= 600px) {
    openthinking-menu .logo { transform: scale(1); transition: all var(--globalTime) ease-in-out; }
    openthinking-menu .logo:where(:hover,:focus-visible,:focus-within) { transform: scale(1.1); }
    openthinking-menu:hover #openthinkingMenu { width: fit-content; }
    openthinking-menu:hover [data-menu] ~ #openthinkingMenu li { opacity: 1; transform: none; filter: blur(0); pointer-events: all; }
}