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

.card-widget {
    h1, h2, h3, h4, h5, h6, i {
        @apply text-typography;
    }
}

#dashboard-aside > div {
    @apply bg-surface-hard;
    .ns-aside-menu {
        @apply text-slate-300 hover:bg-slate-700;
        &.toggled {
            @apply border-slate-700 bg-slate-700;
        }
        &.normal {
            @apply border-transparent;
        }
        &.notification-label {
            @apply bg-red-600 text-slate-300;
        }
    }
    .ns-aside-submenu {
        @apply border-slate-700 bg-slate-800 hover:bg-slate-700 ;
        &.active {
            @apply text-slate-300;
        }
        &.normal {
            @apply text-slate-200;
        }
    }
}

#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;
    }
}

.pending-drag {
    @apply border-transparent;
}
.awaiting-drop {
    @apply border-gray-200;
}
.drag-over {
    @apply border-gray-200;
}

/**
 * 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;
        }

        .date {
            @apply text-secondary;
        }
    
        @apply border-box-edge;
    }
}