// Name:            Dropdown
// Description:     Component to create dropdown menus
//
// Component:       `uk-dropdown`
//
// Adopted:         `uk-dropdown-nav`
//
// Modifiers:       `uk-dropdown-stretch`
//                  `uk-dropdown-stack`
//                  `uk-dropdown-grid`
//
// States:          `uk-active`
//
// ========================================================================


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

$dropdown-z-index:                               $global-z-index + 20 !default;
$dropdown-margin:                                $global-small-margin !default;
$dropdown-viewport-margin:                       15px !default;
$dropdown-min-width:                             200px !default;
$dropdown-padding:                               15px !default;
$dropdown-background:                            $global-muted-background !default;
$dropdown-color:                                 $global-color !default;

$dropdown-large-padding:                         40px !default;

$dropdown-nav-item-color:                        $global-muted-color !default;
$dropdown-nav-item-hover-color:                  $global-color !default;
$dropdown-nav-subtitle-font-size:                $global-small-font-size !default;
$dropdown-nav-header-color:                      $global-emphasis-color !default;
$dropdown-nav-divider-border-width:              $global-border-width !default;
$dropdown-nav-divider-border:                    $global-border !default;
$dropdown-nav-sublist-item-color:                $global-muted-color !default;
$dropdown-nav-sublist-item-hover-color:          $global-color !default;


/* ========================================================================
   Component: Dropdown
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 * 4. Style
 */

.uk-dropdown {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: $dropdown-z-index;
    --uk-position-offset: #{$dropdown-margin};
    --uk-position-viewport-offset: #{$dropdown-viewport-margin};
    /* 3 */
    box-sizing: border-box;
    min-width: $dropdown-min-width;
    max-width: 100vw;
    /* 4 */
    padding: $dropdown-padding;
    background: $dropdown-background;
    color: $dropdown-color;
    @if(mixin-exists(hook-dropdown)) {@include hook-dropdown();}
}

/* Show */
.uk-dropdown.uk-open { display: block; }

/*
 * Remove margin from the last-child
 */

.uk-dropdown > :last-child { margin-bottom: 0; }


/* Size modifier
 ========================================================================== */

.uk-dropdown-large { padding: $dropdown-large-padding; }


/* Stretch modifier
 ========================================================================== */

/*
 * 1. Allow scrolling
 */

.uk-dropdown-stretch {
    --uk-position-offset: 0;
    --uk-position-viewport-offset: 0;
    /* 1 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    @if(mixin-exists(hook-dropdown-stretch)) {@include hook-dropdown-stretch();}
}


/* Nav
 * Adopts `uk-nav`
 ========================================================================== */

.uk-dropdown-nav {
    @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
}

/*
 * Items
 */

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

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

/*
 * Subtitle
 */

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

/*
 * Header
 */

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

/*
 * Divider
 */

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

/*
 * Sublists
 */

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

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


/* Grid modifiers
 ========================================================================== */

.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; }



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

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

// @mixin hook-dropdown(){}
// @mixin hook-dropdown-stretch(){}
// @mixin hook-dropdown-nav(){}
// @mixin hook-dropdown-nav-item(){}
// @mixin hook-dropdown-nav-item-hover(){}
// @mixin hook-dropdown-nav-subtitle(){}
// @mixin hook-dropdown-nav-header(){}
// @mixin hook-dropdown-nav-divider(){}
// @mixin hook-dropdown-misc(){}
