#statusbar{
    display: inline-flex;
    position: relative;
    padding-left: calc(var(--ui-icon-size) + var(--ui-icon-padding) * 2);
    padding-right: calc(var(--ui-icon-padding) * 2);
}

#statusbar::before{
    /* more icon */
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--ui-icon-padding) * 2);
    translate: 0 -50%;
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    z-index: -1;
    background-image: url(icons/more.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 1;
    transition: var(--transition-duration);
}
#statusbar:hover::before, #statusbar:active::before, #statusbar:focus-visible::before{
    filter: blur(.5rem);
    opacity: 0;
    scale: 0;
}
#statusbar:hover, #statusbar:active, #statusbar:focus-visible{
    padding-left: var(--ui-icon-padding);
    padding-right: var(--ui-icon-padding);
}

#statusbar .icon{
    opacity: 0;
    filter: blur(.5rem);
    width: 0;
    padding: var(--ui-icon-padding) 0;
}
#statusbar:hover .icon, #statusbar:active .icon, #statusbar:focus-visible .icon{
    opacity: 1;
    filter: blur(0);
    width: var(--ui-icon-size);
    padding: var(--ui-icon-padding);
}

#statusbar:has(.icon[show="true"]):not(:hover):not(:active):not(:focus-visible){
    padding-left: calc(var(--ui-icon-size) + (var(--ui-icon-padding) * 2));
    padding-right: var(--ui-icon-padding);
}

#statusbar .icon[show="true"]{
    opacity: 1;
    filter: blur(0);
    width: var(--ui-icon-size);
    padding: var(--ui-icon-padding);
}