@layer default {
    #nav-app {
        top: 0;
        width: 16.6%;
        min-width: 200px;
        height: 100vh;
        background-image: url("../img/utilities/starsky.png");
        background-size: cover;
        inset: 0;
        position: sticky;
        align-self: flex-start;
    
        &::before {
            content: "";
            position: absolute;
            z-index: -1;
            inset: 0;
            background-color: var(--acs-blue);
            opacity: 0.5;
        }
    
        main {
            height: 100%;
            width: 100%;
            
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: space-around;
    
            #nav-icon-container {
                &>#nav-icon {
                    width: 10vw;
                }
            }
        
        
            #nav-items {
                width: 73%;
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
        
            .nav-item, .nav-link {
                color: white;
                display: block;
                text-align: center;
                border-radius: 3px;
                background: linear-gradient(to left, rgba(0,0,0,0) 50%, var(--acs-yellow) 50%) right;
                background-size: 200%;
                transition: .2s ease-out;
        
                img {
                    height: 1rem;
                    filter: brightness(0.0) invert(1);
                }
            }
        
            .nav-item.currentSection {
                background-position: left;
            }
        
            .nav-item:hover, .nav-link:hover {
                background-position: left;
            }
        
            .nav-item {
                font-size: 24px;
            }
        
            .nav-link {
                font-size: 18px;
            }
        }
    }
}