// Name:            Dropbar
// Description:     Component to create a dropbar based on Drop component
//
// Component:       `uk-dropbar`
//
// Modifiers:       `uk-dropbar-large`
//                  `uk-dropbar-top`
//                  `uk-dropbar-bottom`
//                  `uk-dropbar-left`
//                  `uk-dropbar-right`
//
// ========================================================================


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




/* ========================================================================
   Component: Dropbar
 ========================================================================== */

/*
 * Adopts `uk-drop`
 * 1. Reset drop
 * 2. Style
 */

.uk-dropbar {
    --uk-position-offset: #{$dropbar-margin};
    --uk-position-shift-offset: 0;
    --uk-position-viewport-offset: 0;
    /* 1 */
    width: auto;
    /* 2 */
    padding: $dropbar-padding-top $dropbar-padding-horizontal $dropbar-padding-bottom $dropbar-padding-horizontal;
    background: $dropbar-background;
    color: $dropbar-color;
    @if(mixin-exists(hook-dropbar)) {@include hook-dropbar();}
}

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

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

/* Phone landscape and bigger */
@media (min-width: $breakpoint-small) {

    .uk-dropbar {
        padding-left: $dropbar-padding-horizontal-s;
        padding-right: $dropbar-padding-horizontal-s;
    }

}

/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {

    .uk-dropbar {
        padding-left: $dropbar-padding-horizontal-m;
        padding-right: $dropbar-padding-horizontal-m;
    }

}

// Color Mode
@if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
@if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }

@if ($dropbar-color-mode != $inverse-global-color-mode) {
.uk-dropbar :focus-visible {
    outline-color: $dropbar-focus-outline !important;
}
}


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

.uk-dropbar-large {
    padding-top: $dropbar-large-padding-top;
    padding-bottom: $dropbar-large-padding-bottom;
}


/* Direction modifier
 ========================================================================== */

.uk-dropbar-top {
    @if(mixin-exists(hook-dropbar-top)) {@include hook-dropbar-top();}
}

.uk-dropbar-bottom {
    @if(mixin-exists(hook-dropbar-bottom)) {@include hook-dropbar-bottom();}
}

.uk-dropbar-left {
    @if(mixin-exists(hook-dropbar-left)) {@include hook-dropbar-left();}
}

.uk-dropbar-right {
    @if(mixin-exists(hook-dropbar-right)) {@include hook-dropbar-right();}
}


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

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

// @mixin hook-dropbar(){}
// @mixin hook-dropbar-top(){}
// @mixin hook-dropbar-bottom(){}
// @mixin hook-dropbar-left(){}
// @mixin hook-dropbar-right(){}
// @mixin hook-dropbar-misc(){}