// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

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


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

@search-width:                                  40px;
@search-focus-width:                            140px;
@search-height:                                 @global-height;
@search-color:                                  @global-color;
@search-placeholder-color:                      rgba(0,0,0,0);

@search-icon:                                   "\e902";
@search-icon-size:                              20px;

@dropdown-search-navbar-margin-right:           -15px;
@dropdown-search-background:                    @global-background;
@dropdown-search-color:                         @global-color;
@dropdown-search-navbar-margin-top:             5px;
@dropdown-search-navbar-margin-right:           0;

@nav-search-color:                              @global-muted-color;
@nav-search-active-background:                  rgba(0,0,0,0);
@nav-search-active-color:                       @global-color;
@nav-search-header-color:                       @global-color;
@nav-search-divider-border:                     fade(@global-border, 30%);
@nav-search-nested-color:                       @global-color;
@nav-search-nested-hover-color:                 @global-muted-color;

@offcanvas-search-margin:                       20px 0;
@offcanvas-search-background:                   rgba(0,0,0,0);

//
// New
//

@search-icon-font-family:                       'Chester';
@nav-search-hover-color:                        @global-color;
@search-focus-placeholder-color:                @global-muted-color;
@dropdown-search-right:                         0;


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

.hook-search() {

    &:before {
        left: auto !important;
        right: 0;
    }

}

.hook-search-icon() { font-family: @search-icon-font-family; }


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

.hook-search-field() {
    position: relative;
    padding: 0 @search-padding 0 0 !important;
    z-index: 1;
    cursor: pointer;
}

.hook-search-field-focus() {
    &:focus:-ms-input-placeholder { color: @search-focus-placeholder-color !important; }
    &:focus::-moz-placeholder { color: @search-focus-placeholder-color; }
    &:focus::-webkit-input-placeholder { color: @search-focus-placeholder-color; }
}


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

.hook-dropdown-search() { right: @dropdown-search-right; }


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

//
// Items
//

.hook-nav-search() {}

// Active
.hook-nav-search-active() {}

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

.hook-nav-search-header() {}

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

.hook-nav-search-divider() {}


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

.hook-offcanvas-search-field() {}


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

.hook-search-misc() {

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

    .uk-offcanvas .uk-search:before {
        left: 0 !important;
        right: auto;
    }

    .uk-offcanvas .uk-search-field { padding: 0 0 0 @search-padding !important; }

}