#library-popover {
    position-anchor: --library;
    position: absolute;
    inset: auto;

    top: anchor(bottom);
    right: anchor(left);
    margin-top: -1.5rem;
    margin-right: 0.5rem;

    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    position-visibility: anchors-visible;

    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}

#library-popover:popover-open {
    display: block;
}


#folder-popover {
    position-anchor: --folder;
    position: absolute;
    inset: auto;

    top: anchor(bottom);
    right: anchor(left);
    margin-top: -3rem;
    margin-right: -1rem;

    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    position-visibility: anchors-visible;

    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}

#folder-popover:popover-open {
    display: block;
}


dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#navigator-button {
    anchor-name: --anchor;
}

#controls-button {
    anchor-name: --anchor-controls;
}

#folder-controls-button {
    anchor-name: --anchor-folder-controls;
}

#navigator-popover,
#controls-popover,
#folder-controls-popover {
    position: fixed;
    position-area: bottom span-right;
    margin-block-start: 6px;

    position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;
    position-try-order: most-block-size;
    position-visibility: anchors-visible;

    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}

#navigator-popover {
    position-anchor: --anchor;
}

#controls-popover {
    position-anchor: --anchor-controls;
}

#folder-controls-popover {
    position-anchor: --anchor-folder-controls;
}

body {
    background-color: #020617;
}

input, textarea {
    outline: none;
}

* {
    color: white;
    font-family: 'Ubuntu', sans-serif;
}

button, a {
    @apply cursor-pointer;
}

.scrollbar-hide {
    scrollbar-width: none;
}