/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

// NOTE: You can't use @extend that break component independent and topdoc parsing.

// internal variables
var-search-icon = url("data:image/svg+xml;utf8,<svg width='41px' height='40px' viewBox='0 0 41 40' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns'><title>Slice 1</title><description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description><defs></defs><g id='Page 1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='search' fill='#C6C8C8'><path d='M0.504,16.338 C0.504,25.085 7.635,32.165 16.444,32.165 C25.24,32.165 32.382,25.085 32.382,16.338 C32.382,7.591 25.24,0.5 16.444,0.5 C7.635,0.5 0.504,7.591 0.504,16.338 L0.504,16.338 Z M5.555,16.338 C5.555,10.359 10.423,5.521 16.445,5.521 C22.455,5.521 27.333,10.36 27.333,16.338 C27.333,22.317 22.455,27.156 16.445,27.156 C10.423,27.156 5.555,22.316 5.555,16.338 L5.555,16.338 Z M27.666,30.861 L34.521,38.67 C35.625,39.772 36.338,39.781 37.46,38.67 L39.661,36.489 C40.743,35.408 40.811,34.711 39.661,33.568 L31.765,26.793 L27.666,30.861 L27.666,30.861 Z M27.666,30.861' id='Shape'></path></g></g></svg>");
var-search-input-background-image = var-search-icon
var-search-input-background-color = var-input-bg-color
var-search-input-color = var-input-text-color
var-search-input-border = 1px solid var-input-border-color
var-search-decoration-margin-right = 0px
var-search-input-border-radius = 4px
var-search-input-height = 31px
var-search-input-font-size = 15px

/*! topdoc
  name: Search Input
  class: search-input
  modifiers:
    :disabled: Disabled state
  markup:
    <input type="search" value="" placeholder="Search" class="search-input">
*/

search-input()
  reset-input()
  reset-font()
  -webkit-appearance none

input[type="search"].search-input::-webkit-search-cancel-button
  -webkit-appearance none
  display none

search-input--disabled()
  disabled()

.search-input
  search-input()
  box-sizing border-box
  height var-search-input-height
  font-size var-search-input-font-size
  border var-search-input-border
  background-color var-search-input-background-color
  box-shadow var-box-shadow--text-input
  color var-search-input-color
  padding 4px 0 0 28px
  border-radius var-search-input-border-radius
  background-image var-search-input-background-image
  background-position 8px center
  background-repeat no-repeat
  background-size var-font-size
  font-weight var-font-weight
  display block
  width 100%

.search-input:focus
  background-color var-search-input-background-color
  color var-search-input-color
  border var-search-input-border
  box-shadow var-box-shadow--text-input

.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration
  margin-right var-search-decoration-margin-right

.search-input::-webkit-input-placeholder,
.search-input::-moz-placeholder,
.search-input::-ms-input-placeholder
  color var-input-placeholder-color

.search-input:disabled
  search-input--disabled()

