// ============
// EDGE FORM 
// ============

$input-padding       : em(10px);
$input-border-style  : 1px solid;
$input-border-color  : $passive-color;

$input-border        : $input-border-style $input-border-color;
$input-border-hover  : $input-border-style darken($input-border-color, 10%);
$input-border-focus  : $input-border-style $main-color;

$prefix-bg-color     : $passive-color;

@mixin input() {
  [type="text"],
  [type="password"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="month"],
  [type="week"],
  [type="email"],
  [type="number"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="url"],
  select,
  textarea {
    @content;
  }
}

// -------------------------------
// FORM INPUT
// - Base style for text input
// -------------------------------
@mixin form-input($padding: $input-padding) {
  width: 100%;
  outline: none;
  padding: $input-padding;
  border: $input-border;
  border-top: $input-border-style darken($input-border-color, 5%);

  &:hover {
    border: $input-border-hover;
    @include box-shadow(inset 0 0 3px $input-border-color);
  }

  &:focus {
    border: $input-border-focus;
    @include box-shadow(inset 0 1px 2px rgba(black, 0.2));
  }
}

// ------------------------
// FORM LABEL
// - Base style for label
// ------------------------
@mixin form-label($padding: $input-padding, $bg-color: $prefix-bg-color) {
  display: block;
  line-height: normal;
  padding-top: $padding;
  padding-bottom: $padding;
  border: $input-border-style transparent; // to make it vertically centered
  
  &.prefix,
  &.postfix {
    border: $input-border-style $bg-color;
    border-top: $input-border-style darken( $input-border-color, 5% );
    text-align: center;
    color: contrast-color($bg-color, #333, white, 60%);
    background: $bg-color;
    overflow: hidden;
  }

  &.prefix {
    border-right: none;
  }

  &.postfix {
    border-left: none;
  }
}

@if $include-form and not $external-call {

/* ---------------
EDGE Form
--------------- */

@include input {
  @include form-input();
}

label {
  @include form-label();
}

// Disable Chrome's datepicker
input::-webkit-calendar-picker-indicator{
  display: none;
}

input[type="date"]::-webkit-input-placeholder{ 
  visibility: hidden !important;
}

} // $include-form