/* ============================================================================
   06-COMPONENTS -> #SIDEBAR
   ========================================================================= */

/**
 * A fixed column that holds the website branding and navigation.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Sidebar
 */

.sidebar {
    --sidebar-bg: var(--bg-secondary);
    --sidebar-border-color: var(--border-color-secondary);
    --sidebar-border-width: var(--border-width);
    --sidebar-scroll-thumb: var(--color-primary-500);
    --sidebar-padding-x: var(--card-padding-x);
    --sidebar-padding-y: var(--card-padding-y);
    
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-index-90);

    @include media-breakpoint-down('xl') {
        @include transition(('visibility'));
        padding-right: var(--space-16);

        &::after {
            @include transition(('opacity'));
            background-color: var(--bg-overlay);
            bottom: 0;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            right: 0;
            top: 0;            
            width: 100%;
            z-index: calc(var(--z-index-10) * -1);
        }
    }

    @include media-breakpoint-up('xl') {
        width: var(--sidebar-width);
    }
}


/**
 * Sidebar inner
 */

.sidebar__inner {
    align-items: flex-start;
    background-color: var(--sidebar-bg);
    border-right: var(--sidebar-border-width) solid var(--sidebar-border-color);
    display: flex;
    flex-direction: column;    
    height: 100%;    
    overflow-y: auto;
    padding: var(--sidebar-padding-y) var(--sidebar-padding-x);
    width: 100%;

    & > * + * {
        margin-top: var(--space-6);
    }

    @include media-breakpoint-up('sm') {
        width: 75%;
    }

    @include media-breakpoint-up('md') {
        width: 66.66%;
    }
    
    @include media-breakpoint-up('lg') {
        width: 50%;
    }
    
    @include media-breakpoint-up('xl') {
        width: 100%;
    }

    @include media-breakpoint-down('xl') {
        @include transition(('transform'), var(--duration-xl));
    }
}


/**
 * Sidebar header
 */

.sidebar__header {
    align-items: center;
    display: flex;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

/**
 * Sidebar navigation
 */

.sidebar__navigation {
    @include scrollbar;
    margin-top: var(--sidebar-padding-y);
    overflow-y: auto;
    width: 100%;
}


/**
 * sidebar logo
 */

.sidebar__logo {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding-bottom: var(--space-1);
    padding-top: var(--space-1);
    
    & > svg {
        fill: var(--logo-color);
        height: var(--space-8);
        width: auto;
        
        &.phq__logo {
            height: var(--space-12) !important;
        }
    }

}


/**
 * Sidebar footer
 */

.sidebar__footer {
    border-top: var(--sidebar-border-width) solid var(--sidebar-border-color);
    padding-top: var(--sidebar-padding-y);
    width: 100%;
}




/* MODIFIERS
   ========================================================================= */

/**
 * Closed state
 */

.sidebar {
    @include media-breakpoint-down('xl') {
        visibility: hidden;

        & > .sidebar__inner {
            transform: translateX(-100%);
        }
    }
}


/**
 * Open state
 */

.sidebar[data-open=true] {
    @include media-breakpoint-down('xl') {        
        visibility: visible;

        &::after {
            opacity: .85;
        }

        & > .sidebar__inner {
            transform: translateX(0%);
        }
    }
}