#selection{
    padding: var(--selection-border-width);
    position: absolute;
    box-shadow: 0 0 10px #00000080;
    left: 50%;
    top: -0.5rem;
    z-index: 0;
    /* transition: var(--transition-edit-selection) var(--transition-curve-bounce); */
    transition: var(--transition-edit-selection) ease-out;
    opacity: 0;
    border-radius: var(--selection-border-roundness);
    scale: 0;
    anchor-name: --selection;
    /* pointer-events: none; */
    --min-hitbox-width: 2rem;
}

#selection.show{
    opacity: 1;
    scale: 1;
}

/* selection border gradient */
#selection::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    translate:  -50% -50%;
    width: 100%;
    padding: var(--selection-border-offset);
    height: 100%;
    border-radius: calc(var(--selection-border-roundness) + var(--selection-border-width));
    z-index: -1;
    border: var(--selection-border-width) solid transparent;
    background: linear-gradient(var(--selection-border-rotation), var(--selection-border-color1), var(--selection-border-color2)) border-box;
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: bc-rotation 4s linear infinite;
}
@property --selection-border-rotation {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes bc-rotation {
    from { --selection-border-rotation: 0deg; }
    to { --selection-border-rotation: 360deg; }
}



#selection-popup{
    position-anchor: --selection;
    anchor-name: --selection-popup;
    top: anchor(top);
    left: anchor(center);
    transition: all var(--transition-duration) var(--transition-curve-bounce), top 0s, left 0s;
    position: absolute;
    display: inline-flex;
    
    padding: var(--ui-icon-padding);
    flex-direction: row;
    align-items: center;
    border-radius: calc(var(--ui-icon-roundness) + var(--ui-icon-padding));
    
    translate: -50% 0%;
    opacity: 0;
    scale: 0;
    pointer-events: none;
}
/* selection popup hitbox */
#selection::after{
    content: '';
    position: absolute;
    top: .5rem;
    left: 50%;
    translate:  -50% -100%;
    height: calc(var(--selection-border-offset) * 2 + var(--selection-border-width) + 1rem);
    width: 100%;
    z-index: -1;
    transition: inherit;
    min-width: none;
}
#selection:hover::after, #selection:has(~#selection-popup:hover)::after{
    min-width: var(--min-hitbox-width);
}
/* backdrop-filter can only be used one per tree (.popup-section) so applied there (with also bg-clr and shadow) to have 2 blurs */
#selection-popup::before{
    content: '';
    position: absolute;
    inset: 0;
    transition: all var(--transition-duration) var(--transition-curve-bounce), top 0s, left 0s, right 0s, bottom 0s;
    z-index: -1;

    backdrop-filter: blur(var(--ui-blur));
    background-color: var(--ui-bg);
    box-shadow: var(--ui-shadow);
    border-radius: calc(var(--ui-icon-roundness) + var(--ui-icon-padding));
}
/* for #selection-popup (hover on selection and on selection popup) or edit-text mode active*/
#selection:not(:active):hover + #selection-popup, #selection-popup:hover, #selection-popup:active, #selection-popup:has(input[type='color']:focus), #selection-popup:has(+ #mode-toggle:checked) {
    translate: -50% calc(-100% - calc(var(--selection-border-offset) * 2 + var(--selection-border-width)));
    opacity: 1;
    scale: 1;
    pointer-events: all;
}
/* for #selection-popup::before (hover only on selection popup) */
#selection-popup:hover::before, #selection-popup:active::before, #selection-popup:has(input[type='color']:focus-visible)::before {
    box-shadow: var(--ui-shadow-hover);
    backdrop-filter: blur(var(--ui-blur-hover));
    background-color: var(--ui-bg-hover);
}


/* icons only in selection popup */
.popup-icon {
    position: relative;
    cursor: default;
}

/* selections for sections inside popup icons */
.popup-icon .popup-section {
    display: flex;
    position: absolute;
    top: -1rem;
    left: 50%;
    translate: -50% -50%;
    opacity: 0;
    scale: 0;
    background-color: var(--ui-bg);
    backdrop-filter: blur(var(--ui-blur));
    box-shadow: var(--ui-shadow);
    pointer-events: none;
    transition: var(--transition-duration) var(--transition-curve-bounce);
    padding: var(--ui-padding);
    border-radius: calc(var(--ui-elements-roundness) + var(--ui-padding));

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 100%;
        height: 100%;
        z-index: -1;
        padding: var(--ui-popup-hitbox-size);
    }
}
.popup-icon:hover .popup-section, .popup-section:active {
    opacity: 1;
    scale: 1;
    top: -1rem;
    translate: -50% -100%;
    pointer-events: all;
}

.popup-section:hover, .popup-section:active {
    box-shadow: var(--ui-shadow-hover);
    backdrop-filter: blur(var(--ui-blur-hover));
    background-color: var(--ui-bg-hover);
}




.popup-section input[type="radio"] {
    appearance: none;
    cursor: pointer;
}
.popup-section input[type="radio"]:checked {
    background-color: var(--clr-desat);
}


#audio-bubble {
    width: 5rem;
    height: 5rem;
    background-color: var(--clr-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text);
    user-select: none;
    cursor: pointer;
    transition: all var(--transition-duration-button) ease;
}
#audio-bubble:hover {
    scale: 1.1;
}


#mode-toggle {
    position: absolute;
    position-anchor: --selection;
    anchor-name: --selection-popup;
    bottom: anchor(bottom);
    right: anchor(right);
    translate: calc(100% + 1rem) calc(100% + 1rem);
    transition: all var(--transition-duration) var(--transition-curve-bounce), right 0s, bottom 0s;
    position: absolute;
    display: inline-flex;
    
    padding: var(--ui-icon-padding);
    flex-direction: row;
    align-items: center;
    border-radius: calc(var(--ui-icon-roundness) + var(--ui-icon-padding));
}



#selection:not(.show) ~ #mode-toggle, #selection:not(.show) ~ #selection-popup{
    pointer-events: none;
    opacity: 0;
    scale: 0;
}



/* test styles for selection popup (needs #selection-popup-bg after #selection-popup in html)


bigger hitbox for selection popup
#selection-popup::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    height: 100%;
    z-index: -1;
    padding: var(--ui-popup-hitbox-size);
}
backdrop-filter can only be used one per tree (.popup-section) so applied there (with also bg-clr and shadow) to have 2 blurs
#selection-popup-bg{
    position-anchor: --selection-popup;
    content: '';
    position: absolute;
    top: anchor(top);
    left: anchor(left);
    translate: -50% -50%;
    right: anchor(right);
    bottom: anchor(bottom);
    transition: all var(--transition-duration) var(--transition-curve-bounce), top 0s, left 0s, right 0s, bottom 0s;

    backdrop-filter: blur(var(--ui-blur));
    background-color: var(--ui-bg);
    box-shadow: var(--ui-shadow);
    border-radius: calc(var(--ui-icon-roundness) + var(--ui-icon-padding));

    translate: -50% 0%;
    opacity: 0;
    scale: 0;
    pointer-events: none;
}
for #selection-popup (hover on selection and on selection popup)
#selection:not(:active):hover + #selection-popup, #selection-popup:hover, #selection-popup:active, #selection-popup:has(input[type='color']:focus),
#selection:not(:active):hover ~ #selection-popup-bg, #selection-popup:hover + #selection-popup-bg, #selection-popup:active + #selection-popup-bg, #selection-popup:has(input[type='color']:focus) + #selection-popup-bg {
    translate: -50% calc(-100% - calc(var(--selection-border-offset) * 2 + var(--selection-border-width)));
    opacity: 1;
    scale: 1;
    pointer-events: all;
}
for #selection-popup::before (hover only on selection popup)
#selection-popup:hover + #selection-popup-bg, #selection-popup:active + #selection-popup-bg, #selection-popup:has(input[type='color']:focus-visible) + #selection-popup-bg {
    box-shadow: var(--ui-shadow-hover);
    backdrop-filter: blur(var(--ui-blur-hover));
    background-color: var(--ui-bg-hover);
}

 */