// Name:            Autocomplete
// Description:     Provides suggestions while you type into an input field
//
// Component:       `uk-autocomplete`
//
// Modifier:	    (Nav) `uk-nav-autocomplete`
//
// States:          `uk-active`
//
// ========================================================================
// Variables
// ========================================================================

@nav-autocomplete-color:                            @global-color;
@nav-autocomplete-dark-color:                       @global-dark-color;
@nav-autocomplete-active-background:                @nav-dropdown-hover-background;
@nav-autocomplete-active-dark-background:           @nav-dropdown-hover-dark-background;
@nav-autocomplete-active-color:                     @nav-dropdown-hover-color;
@nav-autocomplete-active-dark-color:                @nav-dropdown-hover-dark-color;
@nav-autocomplete-header-color:                     @nav-dropdown-header-color;

@nav-autocomplete-divider-border:                   @global-border;
@nav-autocomplete-divider-dark-border:              @global-dark-border;
@nav-autocomplete-divider-border-width:             1px;

/* ========================================================================
   Component: Autocomplete
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 */

.uk-autocomplete {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
}


/* Nav modifier `uk-nav-autocomplete`
 ========================================================================== */

/*
 * Items
 */

.uk-nav-autocomplete > li > a {
    color: @nav-autocomplete-color;
    
    .dark & {
        color: @nav-autocomplete-dark-color;
    }
}

.uk-nav-autocomplete > li.uk-active > a {
    background: @nav-autocomplete-active-background;
    color: @nav-autocomplete-active-color;

    .dark & {
        background-color: @nav-autocomplete-active-dark-background;
        color: @nav-autocomplete-active-dark-color;
    }
}

/*
 * Sub-object: `uk-nav-header`
 */

.uk-nav-autocomplete .uk-nav-header {
    color: @nav-autocomplete-header-color;
}

/*
 * Sub-object: `uk-nav-divider`
 */

.uk-nav-autocomplete .uk-nav-divider {
    border-top: @nav-autocomplete-divider-border-width solid @nav-autocomplete-divider-border;
    
    .dark & {
        border-color: @nav-autocomplete-divider-dark-border;
    }
}