// Name:            Search
// Description:     Defines a search component
//
// Component:       `uk-search`
//
// Sub-objects:     `uk-search-field`
//                  `uk-search-close`
//
// Modifier:        (Nav) `uk-nav-search`
//                  (Dropdown) `uk-dropdown-search`
//
// States:          `uk-active`
//                  `uk-loading`
//
// Uses:            Animation
//                  Icon: FontAwesome
//                  Navbar: `uk-navbar-flip`
//
// Used by:         Off-canvas
//
// ========================================================================


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

@search-width:                                  120px;
@search-focus-width:                            180px;
@search-height:                                 30px;
@search-padding:                                30px;
@search-border:                                 rgba(0,0,0,0);
@search-border-width:                           1px;
@search-background:                             rgba(0,0,0,0);
@search-color:                                  #444;
@search-placeholder-color:                      #999;

@search-icon:                                   "\f002";
@search-icon-size:                              14px;
@search-icon-color:                             rgba(0,0,0,0.2);

@search-close-icon:                             "\f00d";
@search-close-size:                             14px;
@search-close-color:                            rgba(0,0,0,0.2);
@search-close-icon-loading:                     "\f110";

// Dropdown modifier
@dropdown-search-width:                         300px;
@dropdown-search-margin-top:                    0;
@dropdown-search-background:                    #f5f5f5;
@dropdown-search-color:                         #444;
@dropdown-search-animation:                     uk-slide-top-fixed;
@dropdown-search-navbar-margin-top:             5px;
@dropdown-search-navbar-margin-right:           -15px;

// Nav modifier
@nav-search-color:                              #444;
@nav-search-active-background:                  #00a8e6;
@nav-search-active-color:                       #fff;
@nav-search-header-color:                       #999;
@nav-search-divider-border:                     #ddd;
@nav-search-divider-border-width:               1px;
@nav-search-nested-color:                       #07D;
@nav-search-nested-hover-color:                 #059;

// Search in offcanvas
@offcanvas-search-margin:                       20px 15px;
@offcanvas-search-background:                   #1a1a1a;
@offcanvas-search-border:                       rgba(0,0,0,0);
@offcanvas-search-color:                        #ccc;
@offcanvas-search-placeholder-color:            #777;
@offcanvas-search-icon-color:                   #777;


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

/*
 * 1. Create position context for dropdowns
 * 2. Needed for `form` element
 */

.uk-search {
    display: inline-block;
    /* 1 */
    position: relative;
    /* 2 */
    margin: 0;
    .hook-search;
}

/*
 * Icon
 */

.uk-search:before {
    content: @search-icon;
    position: absolute;
    top: 0;
    left: 0;
    width: @search-padding;
    line-height: @search-height;
    text-align: center;
    font-family: FontAwesome;
    font-size: @search-icon-size;
    color: @search-icon-color;
    .hook-search-icon;
}


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

/*
 * 1. Needed to reset iOS `input[type="search"]` appearance
 */

.uk-search-field {
    width: @search-width;
    height: @search-height;
    padding: 0 @search-padding;
    border: @search-border-width solid @search-border;
    background: @search-background;
    color: @search-color;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    /* 1 */
    border-radius: 0;
    .hook-search-field;
}

/*
 * Needed to reset iOS `input[type="search"]` appearance
 * Higher specificity to override appearance set by normalize.less
 */

input.uk-search-field { -webkit-appearance: none; }

/* Placeholder */
.uk-search-field:-ms-input-placeholder { color: @search-placeholder-color; }
.uk-search-field::-moz-placeholder { color: @search-placeholder-color; }
.uk-search-field::-webkit-input-placeholder { color: @search-placeholder-color; }

/* Removes cancel button in IE10 */
.uk-search-field::-ms-clear { display: none; }

/* Focus */
.uk-search-field:focus {
    outline: 0;
    .hook-search-field-focus;
}

/* Focus + active */
.uk-search-field:focus,
.uk-search.uk-active .uk-search-field { width: @search-focus-width; }


/* Sub-object `uk-search-close`
 ========================================================================== */

/*
 * 1. Required for `button` elements
 * 2. Needed for Safari
 */

.uk-search-close {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: @search-padding;
    line-height: @search-height;
    text-align: center;
    font-size: @search-close-size;
    color: @search-close-color;
    /* 1. */
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    /* 2. */
    background: transparent;
    .hook-search-close;
}

.uk-loading > .uk-search-close,
.uk-active > .uk-search-close { display: block; }

/*
 * Icon
 */

.uk-search-close:after {
    display: block;
    content: @search-close-icon;
    font-family: FontAwesome;
}

/* Loading icon */
.uk-loading > .uk-search-close:after {
    content: @search-close-icon-loading;
    -webkit-animation: uk-spin 2s infinite linear;
    animation: uk-spin 2s infinite linear;
}


/* Dropdown modifier: `uk-dropdown-search`
 ========================================================================== */

.uk-dropdown-search {
    width: @dropdown-search-width;
    margin-top: @dropdown-search-margin-top;
    background: @dropdown-search-background;
    color: @dropdown-search-color;
    .hook-dropdown-search;
}

.uk-open > .uk-dropdown-search {
    -webkit-animation: @dropdown-search-animation 0.2s ease-in-out;
    animation: @dropdown-search-animation 0.2s ease-in-out;
}

/*
 * Dependency `uk-navbar-flip`
 */

.uk-navbar-flip .uk-dropdown-search {
    margin-top: @dropdown-search-navbar-margin-top;
    margin-right: @dropdown-search-navbar-margin-right;
}


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

/*
 * Items
 */

.uk-nav-search > li > a {
    color: @nav-search-color;
    .hook-nav-search;
}

/*
 * Active
 * 1. Remove default focus style
 */

.uk-nav-search > li.uk-active > a {
    background: @nav-search-active-background;
    color: @nav-search-active-color;
    /* 1 */
    outline: none;
    .hook-nav-search-active;
}

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

.uk-nav-search .uk-nav-header {
    color: @nav-search-header-color;
    .hook-nav-search-header;
}

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

.uk-nav-search .uk-nav-divider {
    border-top: @nav-search-divider-border-width solid @nav-search-divider-border;
    .hook-nav-search-divider;
}

/*
 * Nested items
 */

.uk-nav-search ul a { color: @nav-search-nested-color; }
.uk-nav-search ul a:hover { color: @nav-search-nested-hover-color; }


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

.uk-offcanvas .uk-search {
    display: block;
    margin: @offcanvas-search-margin;
}

.uk-offcanvas .uk-search:before { color: @offcanvas-search-icon-color; }

.uk-offcanvas .uk-search-field {
    width: 100%;
    border-color: @offcanvas-search-border;
    background: @offcanvas-search-background;
    color: @offcanvas-search-color;
    .hook-offcanvas-search-field;
}

.uk-offcanvas .uk-search-field:-ms-input-placeholder { color: @offcanvas-search-placeholder-color; }
.uk-offcanvas .uk-search-field::-moz-placeholder { color: @offcanvas-search-placeholder-color; }
.uk-offcanvas .uk-search-field::-webkit-input-placeholder { color: @offcanvas-search-placeholder-color; }


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

.hook-search-misc;

.hook-search() {}
.hook-search-icon() {}
.hook-search-field() {}
.hook-search-field-focus() {}
.hook-search-close() {}

.hook-dropdown-search() {}
.hook-nav-search() {}
.hook-nav-search-active() {}
.hook-nav-search-header() {}
.hook-nav-search-divider() {}
.hook-offcanvas-search-field() {}

.hook-search-misc() {}