//
// Component: Search
//
// ========================================================================


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

@search-width:                                  200px;
@search-focus-width:                            250px;
@search-height:                                 30px;
@search-border:                                 fade(@global-toolbar-color, 80%);
@search-focus-border:                           @global-toolbar-color;
@search-background:                             @global-transparent;
@search-color:                                  @global-toolbar-color;
@search-placeholder-color:                      fade(@search-color, 60%);

@search-icon-size:                              12px;
@search-icon-color:                             fade(@global-toolbar-color, 75%);

@dropdown-search-margin-top:                    10px;
@dropdown-search-background:                    @global-background;
@dropdown-search-color:                         @global-panel-color;
@dropdown-search-navbar-margin-top:             10px;
@dropdown-search-navbar-margin-right:           0;

@nav-search-color:                              @global-panel-color;
@nav-search-active-background:                  @global-transparent;
@nav-search-active-color:                       @global-contrast-color;
@nav-search-header-color:                       @global-muted-color;
@nav-search-divider-border:                     @global-transparent;
@nav-search-nested-color:                       @global-panel-color;
@nav-search-nested-hover-color:                 @global-link-hover-color;

@offcanvas-search-margin:                       0;
@offcanvas-search-background:                   @global-transparent;
@offcanvas-search-border:                       @global-border;
@offcanvas-search-color:                        @global-panel-color;
@offcanvas-search-placeholder-color:            @global-muted-color;
@offcanvas-search-icon-color:                   @global-panel-color;


// Component
// ========================================================================

.hook-search() {
    padding-left: 15px;
    margin: 0;
}

.hook-search-icon() {
    left: 18px;
    z-index: 3;
    top: 0;
}


// Sub-object `uk-search-field`
// ========================================================================

.hook-search-field() {
    cursor: pointer;
    z-index: 1;
    position: relative;
    border-radius: 25px;
    font-size: 14px;
    background-color: @search-background;
    border: 1px solid @search-border;
    margin-top: -5px;
    -webkit-transition: @global-transition;
            transition: @global-transition;
}

.hook-search-field-focus() {
    border: 1px solid @search-focus-border;
}


// Modifier: `uk-dropdown-search`
// ========================================================================

.hook-dropdown-search() {
    padding: 10px;
    right: 0;
    border-radius: @global-border-radius;
}


// Modifier `uk-nav-search`
// ========================================================================

//
// Items
//

.hook-nav-search() {}

// Active
.hook-nav-search-active() {
    color: @panel-box-primary-color;
    background-color: @panel-box-primary-background;
}

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

.hook-nav-search-header() {
    padding: 0 10px 5px;
    margin-bottom: 10px;
    text-transform: none;
    color: @global-heading-color;
    border-bottom: 3px solid @global-primary-light-background;
    letter-spacing: @global-heading-letter-space;
}

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

.hook-nav-search-divider() {
    margin: 0;
}


// Search in offcanvas
// ========================================================================

.hook-offcanvas-search-field() {
    padding: 0 @search-padding;
    cursor: text;
}


// Miscellaneous
// ========================================================================

.hook-search-misc() {


    // Sub-object `uk-search-field`
    // ========================================================================

    .uk-search-field:focus,
    .uk-search.uk-active .uk-search-field {
        padding-left: 30px;
        cursor: text;
    }

    .uk-search.uk-loading:after {
        content: "\f110";
        position: absolute;
        font-family: @global-font-icon;
        right: 10px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: right;
        top: 6px;
        color: @search-color;
        .uk-icon-spin;
        -webkit-animation-duration: 0.6s;
                animation-duration: 0.6s;
    }


    // Modifier: `uk-nav-search`
    // ========================================================================

    .uk-nav-search ul.uk-nav-sub { border-bottom: 1px solid @global-border; }
    .uk-navbar-flip .uk-dropdown-search { padding: 0; }

    .uk-nav-search .uk-nav-header {
        font-family: @global-heading-font-family;
        font-size: @base-h4-font-size;
        font-weight: @global-heading-font-weight;
    }

    .uk-nav-search > li > a {
        font-family: @base-heading-font-family;
        font-weight: @global-heading-font-weight;
        font-size: @base-h4-font-size;
        color: @global-heading-color;
        letter-spacing: @global-heading-letter-space;
        padding: 15px;
        border-radius: @global-border-radius;
        -webkit-transition: @global-transition;
                transition: @global-transition;

        > div {
            font-family: @base-body-font-family;
            font-weight: @global-font-weight;
            line-height: @global-line-height;
            color: @global-panel-color;
            letter-spacing: 0;
            -webkit-transition: @global-transition;
                    transition: @global-transition;
        }
    }

    .uk-nav-search > li.uk-search-moreresults {
        border-top: 3px solid @global-primary-light-background;
        
        > a {
            padding: 2px 15px;
        }
    }

    .uk-nav-search > li.uk-active > a > div {
        color: @panel-box-primary-color;
    }

}