// -----
// Forms
// -----

// Function: Focus Glow
// Makes your inputs glow when focused. Pass a color, they will glow that color.

-focus-glow($color = $default-color)
  &:focus
    box-shadow: 0 0 5px rgba($color,.7)
    border: 1px solid desaturate($color, 35%)
    outline: none

// Mixin: Input
//
// A general purpose mixin for text inputs. Provides an nice attractive default
// style that's easily customizable. Takes a color as the first param and an
// optional width as the second.
//
// ex. input()
// ex. input: purple
// ex. input: #D45D86 400px

input($color = $aqua, $width = 250px)
  box-shadow: inset 0 1px 1px rgba(#000, 0.1)
  -webkit-font-smoothing: antialiased
  font-size: unit($font-size, 'px')
  font-family: $font-stack
  border: solid 1px #bbb
  border-radius: .2em
  outline: none
  padding: .45em
  background: #fff
  color: #555
  width: $width
  text-shadow: 0 0 1px rgba(#fff, .1)
  transition()
  if color
    -focus-glow($color)
  else
    box-shadow: none

// Mixin: Input Search
//
// A search style input with rounded corners and an optional search icon at the
// end. Takes any color.
//
// ex. input-search()
// ex. input-search: yellow

input-search($color = aqua, $width = 250px)
  input: $color $width
  padding-left: 9px
  rounded()

// Mixin: Input Disabled
//
// Makes your input appear to be disabled. Note that you also need to add
// 'disabled' to your html tag in order for it to actually be disabled.
//
// ex. input-disabled()

input-disabled()
  cursor: not-allowed
  background: #F5F5F5

  &:hover, &:focus
    border-color: #bbb
    box-shadow: inset 0 1px 1px rgba(#000, 0.1)

// Mixin: Label
//
// Very basic label for your form. Pass it an optional display type to have it
// inline or block.
//
// ex. label()
// ex. label: 'block'

label($display = 'inline-block')
  line-height: 1.5em
  display: unquote($display)

// Mixin: Field
//
// Often times it's easier to wrap your input and label in a div called "field"
// so they can be floated, position, and manipulated without screwing up the
// rest of the form. That's what this mixin is for - put it on a div that
// contains a label and an input. Then feed it a direction to align (default is
// right), and an optional width.
//
// ex. field()
// ex. field: left
// ex. field: right 500px

field($direction = right, $width = 370px)
  clear: both
  margin-bottom: 5px
  text-align: $direction
  width: $width

// Mixin: Input Error
//
// When someone F'd it up, you gotta show them how it is. Put this on an input
// to make it clear that something bad is happening. Best implemented in an
// .error class or something similar.
//
// ex. input-error()
// ex. input-error: blue

input-error($color = $red)
  color: $color
  border-color: $color
  -focus-glow($color)

// Mixin: Field Error
//
// If you are wrapping labels and inputs in a field div, this makes life even
// easier. Makes the label text as well as the input field red.
//
// ex. field-error()
// ex. field-error: blue

field-error($color = $red)
  color: $color

  input
    input-error: $color

// Mixin: Input Warning
//
// Ok, so maybe you didn't totally F it up, but at very least you deserve a
// warning. Best implemented in a .warning class or something similar.
//
// ex. input-warning()
// ex. input-warning: blue

input-warning($color = $yellow)
  color: darken($color, 15%)
  border-color: $color
  -focus-glow($color)

// Mixin: Field Warning
//
// If you are wrapping labels and inputs in a field div, this makes life even
// easier. Makes the label text as well as the input field yellow.
//
// ex. field-warning()
// ex. field-warning: blue

field-warning($color = $yellow)
  color: darken($color, 15%)

  input
    input-warning: $color

// Mixin: Input Success
//
// http://cl.ly/F4Em/great-success.jpeg - Best implemented in a .success class
// or something similar.
//
// ex. input-success()
// ex. input-success: red

input-success($color = $green)
  color: $color
  border-color: $color
  -focus-glow($color)

// Mixin: Field Success
//
// You're probably getting tired of this routine at this point. I'm sure you can
// imagine what this does.
//
// ex. field-success()
// ex. field-success: blue

field-success($color = $green)
  color: $color
  input
    input-success: $color

// Mixin: Radio
//
// A simple reset for radio button styling across browsers. Takes a color.
// Default color is blue. Use on the <label> which wraps your radio inputs.
//
// ex. radio()
// ex. radio: gray
// ex. radio(#FF1493)

radio($color = #0074d9)
  cursor: pointer
  display: block
  line-height: 2.5em

  // Accessible hidden styles
  [type="radio"]
    border: 0
    clip: rect(0 0 0 0)
    height: 1px
    margin: -1px
    overflow: hidden
    padding: 0
    position: absolute
    width: 1px

    & + span
      display: block

    // Unchecked
    & + span:before
      background: rgba(#000,.15)
      border: 0.125em solid #fff
      border-radius: 1em
      box-shadow: 0 0 0 .1em rgba(#000, .25)
      content: ''
      display: inline-block
      height: 1em
      margin-right: 0.75em
      transition: 0.5s ease all
      vertical-align: -0.33em
      width: 1em

    // Checked
    &:checked + span:before, &:focus + span:before
      background: $color
      box-shadow: 0 0 0 0.25em rgba(#000, .15)

// Mixin: Range-input
//
// A clean, cross-browser styling reset for range inputs.
// Note: range inputs are not supported in IE9 and below.
// http://caniuse.com/#feat=input-range
//
// ex. range()
// ex. range: tomato 200px 15px 9px #333

range-input($color = #0074d9, $track-width = 100%, $thumb-size = 2em, $track-height = .5em, $track-color = rgba(#000, .1))
  -webkit-appearance: none
  width: $track-width
  margin: 0
  outline: none
  background: transparent

  &::-webkit-slider-runnable-track
    background: $track-color
    border: none
    border-radius: $track-height
    height: $track-height
    width: $track-width

  &::-webkit-slider-thumb
    -webkit-appearance: none
    border: none
    height: $thumb-size
    width: $thumb-size
    border-radius: 50%
    background: $color
    margin-top: "calc(-%s / 2 + %s / 2)" % ($thumb-size $track-height)
    transition: all 0.2s ease

    &:hover
      transform: scale(1.2)
      cursor: pointer

    &:active
      background: darken($color, 15%)

  &:focus
    outline: none

  &:focus::-webkit-slider-runnable-track
    background: $track-color

  &::-moz-range-track
    width: $track-width
    height: $track-height
    background: $track-color
    border: none
    border-radius: $track-height

  &::-moz-range-thumb
    border: none
    height: $thumb-size
    width: $thumb-size
    border-radius: 50%
    background: $color
    transition: all 0.2s ease

    &:hover
      transform: scale(1.2)

    &:active
      background: darken($color, 15%)

  &::-moz-focus-outer
    border: 0

  &::-ms-track
    height: $track-height
    width: $track-width
    background: transparent
    border-width: "calc(%s / 2 + %s / 2)" % ($thumb-size $track-height) 0
    color: transparent;

  &::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper
    background: $track-color
    border-radius: 10px

  &::-ms-thumb
    border: none
    height: 2em
    width: 2em
    border-radius: 50%
    background: $color

    &:active
      background: darken($color, 15%)

  &::-ms-tooltip
    display: none


// Additive Mixin: Fields
//
// WARNING: Creates classes in your css and styles them - not to be used inside
// an element.
//
// Add the field styles to .field as well as success, warning, and failure
// states. Also takes direction and width. Highly recommended mixin.

fields($direction = right, $width = 370px)
  .field
    field($direction, $width)

    &.success
      field-success()
    &.warning
      field-warning()
    &.error
      field-error()

// Mixin: Autofill

// When forms are auto-filled, the background color for the inputs (ie: pale
// yellow) can be very jarring, especially if you have a dark background.  This
// allows you to override that. Takes background color and text color.

// ex. autofill(red, yellow)

autofill($background = #0074D9, $color = #fff)
  &:-webkit-autofill
    -webkit-box-shadow 0 0 0px 1000px $background inset
    -webkit-text-fill-color $color !important
  &:-moz-autofill
    -moz-text-fill-color $color !important
    -moz-box-shadow 0 0 0px 1000px $background inset
  &:-o-autofill
    -o-text-fill-color @color !important
    -o-box-shadow 0 0 0px 1000px $background inset
  &:-khtml-autofill
    -khtml-text-fill-color $color !important
    -khtml-box-shadow 0 0 0px 1000px $background inset


// Additive Mixin: Forms
//
// WARNING: Creates classes in your css and styles them - not to be used inside
// an element.
//
// Adds nicer looking styles to all text inputs and textareas. Overrides the
// defaults.

forms()
  +html5-inputs()
    input()

    &.disabled
      input-disabled()
    &.success
      input-success()
    &.warning
      input-warning()
    &.error
      input-error()

// Block Mixin: Html 5 Inputs
//
// A block that selects all the html5 input types and lets you style them as
// you wish without having to type out the whole list.
//
// ex. +html5-inputs()
//       border: red

html5-inputs()
  input[type='email']
  input[type='number']
  input[type='password']
  input[type='search']
  input[type='tel']
  input[type='text']
  input[type='url']
  input[type='color']
  input[type='date']
  input[type='datetime']
  input[type='datetime-local']
  input[type='month']
  input[type='time']
  input[type='week']
  textarea
    {block}