#main-container, #page-container {
    @apply bg-surface;
}

#dashboard-cards * {
    @apply text-typography;
}

#dashboard-aside {
    @apply bg-surface;
}

#dashboard-body {
    @apply bg-surface;
}

.ns-toggle-button {
    @apply border-box-edge text-primary;
    &:hover {
        @apply bg-tab-active border-transparent text-white;
    }
}

.ns-avatar { 
    @apply text-primary border-box-edge;

    &:hover {
        @apply bg-box-background text-primary border-transparent;
    }

    &.toggled {
        @apply bg-box-background text-primary border-transparent;
    }
}

/**
 * Notifications Wrapper
**/

#notificaton-wrapper {
    #notification-button {
        &.panel-visible {
            @apply bg-box-background;
        }
        &.panel-hidden {
            @apply border-box-edge;
        }

        &:hover {
            @apply bg-box-background text-primary;
        }

        @apply text-primary;
    }

    #notification-center > div > div {
        @apply bg-box-background;
    }

    .clear-all {
        @apply text-primary;

        &:hover {
            @apply bg-input-button-hover text-typography;
        }
    }

    .notification-card {
        h1 {
            @apply text-secondary;
        }
        p {
            @apply text-primary;
        }
    
        @apply border-box-edge;
    }
}