nav, aside {
    padding: 0.8rem 0.6rem;
    padding-bottom: 0;
    gap: 1rem;

    min-height: 100vh;

    h2 {
        color: hsl(0 0 80);
        font-size: 1rem;
        font-weight: bold;
        font-style: normal;
        text-align: left;
        margin-left: 0.5rem;
        margin-top: 0.6rem;
    }

    & section > .dropdown-header {
        color: hsl(0 0 80);
        font-style: italic;
    }

    & section.closed > .dropdown-header > .dropdown-arrow {
        transform: rotate(-90deg); 
    }

    & .dropdown.closed > .dropdown-header > .folder-open { display: none; }
    & .dropdown:not(.closed) > .dropdown-header > .folder-closed { display: none; }

    & .dropdown {
        gap: 0;

        & .dropdown-header {
            font-size: 1rem;
            font-weight: normal;

            gap: 0.2em;

            padding: 0.2em 0.4em;
            border-radius: 0.2em;
            
            &:hover {
                background-color: hsl(0 0 10);
            }
        }
        
        & .dropdown-content {
            border-left: var(--border);
            margin-left: calc(var(--icon-size) / 2 - 1px + 0.4em);
            padding-left: calc(var(--icon-size) / 2 - 1px);
            display: flex;
            flex-direction: column;

            & > .dropdown-item {
                display: block;
                text-align: left;
                text-overflow: ellipsis;
                text-wrap: nowrap;

                &.active > .dropdown-header {
                    background-color: hsl(0 0 10);
                }

                & > .dropdown-header.selected {
                    background-color: hsl(330 100 50 / 0.2);
                }
            }
        }
    }

    section#workspace {
        position: sticky;
        margin-top: auto;
        bottom: 0px;
        
        border-top: var(--border);
        background-color: var(--bg-color);
        
        display: flex;
        flex-direction: row;
        
        text-align: left;
        gap: 0.4em;
        padding-top: 0.8em;
        padding-bottom: 1.2em;
        justify-content: space-between;

        --hover: hsl(0 0 100 / 0.2);
        
        & > #workspace-select-button {
            flex-grow: 1;
            
            justify-content: space-between;
            
            border: var(--border);
            padding: .4rem .6rem;
            border-radius: .6rem;
        }

        & > #workspace-select-popover:popover-open {
            display: flex;
            flex-direction: column;

            background-color: var(--bg-color);
            color: var(--text-color);
            cursor: pointer;
            text-align: left;

            outline: var(--border);
            border: none;
            border-radius: 0.6em;
            overflow: hidden;
            
            margin: 0;
            inset: auto;
            width: anchor-size(width);
            position-area: top;
            justify-self: anchor-center;
            position-try-fallbacks: flip-block;
            
            & > div {
                justify-content: space-between;
                
                padding: 0.4em 0.6em;
                border-radius: 0.6em;
                
                &.active {
                    background-color: var(--hover);
                }
            }
        }
    }
}