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

/**
 * 
 */


//
// SCSS imports
//

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


/**
 * Navigation
 */

.navigation {
    --navigation-link-padding-x: var(--space-3);
    --navigation-link-padding-y: var(--space-2);
    --navigation-link-border-radius: var(--rounded-sm);
    --navigation-link-border-width: var(--border-width);
    
    flex: 1 0 auto;
    width: 100%;
}


/**
 * Navigation list 
 */

.navigation__list {
    display: flex;
    flex-direction: column;
    height: 100%;
    list-style-type: none;
    margin-left: 0;
}


/**
 * Navigation item
 */

.navigation__item {
    & + & {
        margin-top: var(--space-1);
    }
}


/**
 * Navigation link
 *
 * 1. Centre the icon.
 */

.navigation__item-link {
    @include font-size('md');
    @include transition(('background-color', 'border-color', 'color'), var(--duration-sm));
    align-items: flex-start;
    background-color: var(--navigation-link-bg);
    border: var(--navigation-link-border-width) solid var(--navigation-link-border-color);
    border-radius: var(--navigation-link-border-radius);
    color: var(--navigation-link-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-weight: var(--font-weight-medium);
    padding: var(--navigation-link-padding-y) var(--navigation-link-padding-x);
    position: relative;    
    
    & > .icon {
        @include transition(('fill'), var(--duration-sm));
        
        color: var(--navigation-icon-color);
        margin-top: .125rem; // [1]
    }

    &:hover {
        background-color: var(--navigation-link-hover-bg);
        border-color: var(--navigation-link-hover-border-color);
        color: var(--navigation-link-hover-color);

        & > .icon {
            color: var(--navigation-icon-hover-color);
        }
    }

    /*
     * Active link
     */

    &[data-active=true] {
        background-color: var(--navigation-link-active-bg);
        border-color: var(--navigation-link-active-border-color);
        color: var(--navigation-link-active-color);

        & > .icon {
            color: var(--navigation-icon-active-color);
        }
    }


    /*
     * Aria expanded
     */

    &[aria-expanded=true] {
        & > .icon:last-child {
            transform: rotate(180deg);
        }

        & + .navigation__dropdown {            
            grid-template-rows: 1fr;
            opacity: 1;
            padding-bottom: var(--space-2);
            padding-top: var(--space-2);
            visibility: visible;
        }
    }
}


/**
 * Navigation text
 *
 * 1. Fill space between icons. 
 */

.navigation__item-text {
    flex-grow: 1; // [1]
    margin-left: var(--space-4);
    margin-right: var(--space-2);
    word-break: break-all;
}


/**
 * Navigation dropdown
 */

.navigation__dropdown {
    @include transition(('grid', 'opacity', 'padding', 'visibility'));
    display: grid;
    flex-direction: column;    
    grid-template-rows: 0fr;
    margin-left: var(--space-6);    
    opacity: 0;
    overflow: hidden;
    position: relative;    
    transform-origin: top;
    visibility: hidden;

    & > .navigation__list {
        min-height: 0;
    }
}


/**
 * Dropdown inner
 */

.navigation__dropdown-inner {
    min-height: 0;
}


/**
 * Navigation section
 */

.navigation__section {
    border-left: var(--border-width) solid var(--border-color-secondary);
    margin-top: var(--space-6);
    padding-left: var(--space-3);

    .navigation__list {
        margin-top: var(--space-2)
    }

    .navigation__item {
        --navigation-link-padding-x: var(--space-1);
    }
}


/**
 * Navigation section heading
 */

.navigation__section-heading {
    @include font-size('sm');
    color: var(--navigation-link-hover-color);
    font-weight: var(--font-weight-semi-bold);
    padding-left: var(--space-4);
}