.notifications-menu-label-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &:hover {
        background-color: var(--color-secondary);
    }

    &:global(.active) {
        background-color: var(--color-background);
    }

    .icon {
        flex: none;
        width: 50%;
        height: 50%;
        fill: var(--color-surfacelighter);
    }

    .notifications-menu-container {
        display: flex;
        flex-direction: column;
    
        .notifications-bar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem;
            border-bottom: thin solid var(--color-surfacelight);
    
            background-color: var(--color-surfacelighter);
    
            .notifications-label {
                padding-left: 0.5rem;
                color: var(--color-surfacedark);
            }
    
            .button-container {
                width: 2rem;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
    
                &:hover, &:focus {
                    background-color: var(--color-surfacelight);
                }
    
                .icon {
                    width: 1.2rem;
                    fill: var(--color-surfacedark);
                }
            }
        }
    
        .notifications-list {
            --item-size: 28rem;
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: auto;
            height: 30rem;
            align-self: stretch;
        }
    }
}