// Name:            Nav
// Description:     Defines styles for list navigations
//
// Component:       `uk-nav`
//
// Sub-objects:     `uk-nav-parent-icon`
//                  `uk-nav-header`
//                  `uk-nav-divider`
//                  `uk-nav-subtitle`
//                  `uk-nav-sub`
//
// Modifiers:       `uk-nav-default`
//                  `uk-nav-primary`
//                  `uk-nav-center`,
//                  `uk-nav-divider`
//
// States:          `uk-active`
//                  `uk-parent`
//                  `uk-open`
//                  `uk-touch`
//
// ========================================================================


// Variables
// ========================================================================











/* ========================================================================
   Component: Nav
 ========================================================================== */

/*
 * Reset
 */

.uk-nav,
.uk-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Reset link
 */

.uk-nav li > a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    column-gap: 0.25em;
    /* 3*/
    text-decoration: none;
}

/*
 * Items
 * Must target `a` elements to exclude other elements (e.g. lists)
 */

.uk-nav > li > a { padding: $nav-item-padding-vertical $nav-item-padding-horizontal; }


/* Sublists
 ========================================================================== */

/*
 * Level 2
 * `ul` needed for higher specificity to override padding
 */

ul.uk-nav-sub {
    padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $nav-sublist-padding-left;
    @if(mixin-exists(hook-nav-sub)) {@include hook-nav-sub();}
}

/*
 * Level 3 and deeper
 */

.uk-nav-sub ul { padding-left: $nav-sublist-deeper-padding-left; }

/*
 * Items
 */

.uk-nav-sub a { padding: $nav-sublist-item-padding-vertical 0; }


/* Parent icon
 ========================================================================== */

.uk-nav-parent-icon {
    margin-left: auto;
    transition: transform 0.3s ease-out;
}

.uk-nav > li.uk-open > a .uk-nav-parent-icon { transform: rotateX(180deg); }


/* Header
 ========================================================================== */

.uk-nav-header {
    padding: $nav-header-padding-vertical $nav-header-padding-horizontal;
    text-transform: $nav-header-text-transform;
    font-size: $nav-header-font-size;
    @if(mixin-exists(hook-nav-header)) {@include hook-nav-header();}
}

.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; }


/* Divider
 ========================================================================== */

.uk-nav .uk-nav-divider {
    margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
    @if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
}


/* Default modifier
 ========================================================================== */

.uk-nav-default {
    font-size: $nav-default-font-size;
    line-height: $nav-default-line-height;
    @if(mixin-exists(hook-nav-default)) {@include hook-nav-default();}
}

/*
 * Items
 */

.uk-nav-default > li > a {
    color: $nav-default-item-color;
    @if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();}
}

/* Hover */
.uk-nav-default > li > a:hover {
    color: $nav-default-item-hover-color;
    @if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();}
}

/* Active */
.uk-nav-default > li.uk-active > a {
    color: $nav-default-item-active-color;
    @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
}

/*
 * Subtitle
 */

.uk-nav-default .uk-nav-subtitle {
    font-size: $nav-default-subtitle-font-size;
    @if(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
}

/*
 * Header
 */

.uk-nav-default .uk-nav-header {
    color: $nav-default-header-color;
    @if(mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();}
}

/*
 * Divider
 */

.uk-nav-default .uk-nav-divider {
    border-top: $nav-default-divider-border-width solid $nav-default-divider-border;
    @if(mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();}
}

/*
 * Sublists
 */

.uk-nav-default .uk-nav-sub {
    font-size: $nav-default-sublist-font-size;
    line-height: $nav-default-sublist-line-height;
}

.uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; }

.uk-nav-default .uk-nav-sub a:hover { color: $nav-default-sublist-item-hover-color; }

.uk-nav-default .uk-nav-sub li.uk-active > a { color: $nav-default-sublist-item-active-color; }


/* Primary modifier
 ========================================================================== */

.uk-nav-primary {
    font-size: $nav-primary-font-size;
    line-height: $nav-primary-line-height;
    @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
}

/*
 * Items
 */

.uk-nav-primary > li > a {
    color: $nav-primary-item-color;
    @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
}

/* Hover */
.uk-nav-primary > li > a:hover {
    color: $nav-primary-item-hover-color;
    @if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();}
}

/* Active */
.uk-nav-primary > li.uk-active > a {
    color: $nav-primary-item-active-color;
    @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
}

/*
 * Subtitle
 */

.uk-nav-primary .uk-nav-subtitle {
    font-size: $nav-primary-subtitle-font-size;
    @if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
}

/*
 * Header
 */

.uk-nav-primary .uk-nav-header {
    color: $nav-primary-header-color;
    @if(mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();}
}

/*
 * Divider
 */

.uk-nav-primary .uk-nav-divider {
    border-top: $nav-primary-divider-border-width solid $nav-primary-divider-border;
    @if(mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();}
}

/*
 * Sublists
 */

.uk-nav-primary .uk-nav-sub {
    font-size: $nav-primary-sublist-font-size;
    line-height: $nav-primary-sublist-line-height;
}

.uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; }

.uk-nav-primary .uk-nav-sub a:hover { color: $nav-primary-sublist-item-hover-color; }

.uk-nav-primary .uk-nav-sub li.uk-active > a { color: $nav-primary-sublist-item-active-color; }


/* Secondary modifier
 ========================================================================== */

.uk-nav-secondary {
    font-size: $nav-secondary-font-size;
    line-height: $nav-secondary-line-height;
    @if(mixin-exists(hook-nav-secondary)) {@include hook-nav-secondary();}
}

/*
 * Items
 */

.uk-nav-secondary > li > a {

    color: $nav-secondary-item-color;
    @if(mixin-exists(hook-nav-secondary-item)) {@include hook-nav-secondary-item();}
}

/* Hover */
.uk-nav-secondary > li > a:hover {
    color: $nav-secondary-item-hover-color;
    @if(mixin-exists(hook-nav-secondary-item-hover)) {@include hook-nav-secondary-item-hover();}
}

/* Active */
.uk-nav-secondary > li.uk-active > a {
    color: $nav-secondary-item-active-color;
    @if(mixin-exists(hook-nav-secondary-item-active)) {@include hook-nav-secondary-item-active();}
}

/*
 * Subtitle
 */

.uk-nav-secondary .uk-nav-subtitle {
    font-size: $nav-secondary-subtitle-font-size;
    color: $nav-secondary-subtitle-color;
    @if(mixin-exists(hook-nav-secondary-subtitle)) {@include hook-nav-secondary-subtitle();}
}

/* Hover */
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
    color: $nav-secondary-subtitle-hover-color;
    @if(mixin-exists(hook-nav-secondary-subtitle-hover)) {@include hook-nav-secondary-subtitle-hover();}
}

/* Active */
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
    color: $nav-secondary-subtitle-active-color;
    @if(mixin-exists(hook-nav-secondary-subtitle-active)) {@include hook-nav-secondary-subtitle-active();}
}

/*
 * Header
 */

.uk-nav-secondary .uk-nav-header {
    color: $nav-secondary-header-color;
    @if(mixin-exists(hook-nav-secondary-header)) {@include hook-nav-secondary-header();}
}

/*
 * Divider
 */

.uk-nav-secondary .uk-nav-divider {
    border-top: $nav-secondary-divider-border-width solid $nav-secondary-divider-border;
    @if(mixin-exists(hook-nav-secondary-divider)) {@include hook-nav-secondary-divider();}
}

/*
 * Sublists
 */

.uk-nav-secondary .uk-nav-sub {
    font-size: $nav-secondary-sublist-font-size;
    line-height: $nav-secondary-sublist-line-height;
}

.uk-nav-secondary .uk-nav-sub a { color: $nav-secondary-sublist-item-color; }

.uk-nav-secondary .uk-nav-sub a:hover { color: $nav-secondary-sublist-item-hover-color; }

.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $nav-secondary-sublist-item-active-color; }


/* Alignment modifier
 ========================================================================== */

/*
 * 1. Center header
 * 2. Center items
 */

 /* 1 */
.uk-nav-center { text-align: center; }
 /* 2 */
.uk-nav-center li > a { justify-content: center; }

/* Sublists */
.uk-nav-center .uk-nav-sub,
.uk-nav-center .uk-nav-sub ul { padding-left: 0; }

/* Parent icon  */
.uk-nav-center .uk-nav-parent-icon { margin-left: $nav-parent-icon-margin-left; }


/* Style modifier
 ========================================================================== */

/*
 * Divider
 * Naming is in plural to prevent conflicts with divider sub object.
 */

.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
    margin-top: $nav-dividers-margin-top;
    padding-top: $nav-dividers-margin-top;
    border-top: $nav-dividers-border-width solid $nav-dividers-border;
    @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
}


// Hooks
// ========================================================================

@if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();}

// @mixin hook-nav-sub(){}
// @mixin hook-nav-header(){}
// @mixin hook-nav-divider(){}
// @mixin hook-nav-default(){}
// @mixin hook-nav-default-item(){}
// @mixin hook-nav-default-item-hover(){}
// @mixin hook-nav-default-item-active(){}
// @mixin hook-nav-default-subtitle(){}
// @mixin hook-nav-default-header(){}
// @mixin hook-nav-default-divider(){}
// @mixin hook-nav-primary(){}
// @mixin hook-nav-primary-item(){}
// @mixin hook-nav-primary-item-hover(){}
// @mixin hook-nav-primary-item-active(){}
// @mixin hook-nav-primary-subtitle(){}
// @mixin hook-nav-primary-header(){}
// @mixin hook-nav-primary-divider(){}
// @mixin hook-nav-secondary(){}
// @mixin hook-nav-secondary-item(){}
// @mixin hook-nav-secondary-item-hover(){}
// @mixin hook-nav-secondary-item-active(){}
// @mixin hook-nav-secondary-subtitle(){}
// @mixin hook-nav-secondary-subtitle-hover(){}
// @mixin hook-nav-secondary-subtitle-active(){}
// @mixin hook-nav-secondary-header(){}
// @mixin hook-nav-secondary-divider(){}
// @mixin hook-nav-dividers(){}
// @mixin hook-nav-misc(){}


// Inverse
// ========================================================================







// @mixin hook-inverse-nav-default-item(){}
// @mixin hook-inverse-nav-default-item-hover(){}
// @mixin hook-inverse-nav-default-item-active(){}
// @mixin hook-inverse-nav-default-header(){}
// @mixin hook-inverse-nav-default-divider(){}
// @mixin hook-inverse-nav-primary-item(){}
// @mixin hook-inverse-nav-primary-item-hover(){}
// @mixin hook-inverse-nav-primary-item-active(){}
// @mixin hook-inverse-nav-primary-header(){}
// @mixin hook-inverse-nav-primary-divider(){}
// @mixin hook-inverse-nav-secondary-item(){}
// @mixin hook-inverse-nav-secondary-item-hover(){}
// @mixin hook-inverse-nav-secondary-item-active(){}
// @mixin hook-inverse-nav-secondary-subtitle(){}
// @mixin hook-inverse-nav-secondary-subtitle-hover(){}
// @mixin hook-inverse-nav-secondary-subtitle-active(){}
// @mixin hook-inverse-nav-secondary-header(){}
// @mixin hook-inverse-nav-secondary-divider(){}
// @mixin hook-inverse-nav-dividers(){}