////
/// Textfield
/// Character inputs, for simple form fields
/// @group textfield
////

/// Textfield input typography.
$am-textfield-input-type: normal am-sp(14px)/24px $am-font-sans !default;
/// Textfield label typography.
$am-textfield-label-type: $am-font-weight-regular am-sp(12px)/am-unit(2) $am-font-sans !default;
/// Textfield margin.
$am-textfield-margin: am-unit(1) 0 !default;
/// Textfield padding.
$am-textfield-padding: am-unit(1) am-unit(2) !default;
/// Textfield error color.
$am-textfield-error-color: $am-theme-error !default;
/// Textfield color.
$am-textfield-color: rgba(#000, 0.70) !default;
/// Textfield highlight color.
$am-textfield-primary: am-color(primary) !default;
/// Icon for email fields.
$am-textfield-email-icon: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.3" enable-background="new    " d="M20,4H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6 C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"/> </svg>') !default;
/// Icon for password fields.
$am-textfield-password-icon: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.4" d="M12.65,10C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6c0,3.311,2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H17v4h4v-4h2 v-4H12.65z M7,14c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C9,13.1,8.1,14,7,14z"/> </svg>') !default;
/// Icon for date fields.
$am-textfield-date-icon: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.4" d="M17,12h-5v5h5V12z M16,1v2H8V1H6v2H5C3.89,3,3.01,3.9,3.01,5L3,19c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5 c0-1.1-0.9-2-2-2h-1V1H16z M19,19H5V8h14V19z"/> </svg>') !default;


@mixin am-textfield {
  color: $am-textfield-color;
  margin: $am-textfield-margin;
  padding: $am-textfield-padding;
  position: relative;
}

@mixin am-textfield-input {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d3d3d3;
  box-shadow: inset 1px 1px 1px rgba(#222, 0.08);
  display: block;
  font: $am-textfield-input-type;
  line-height: 24px;
  margin: 0;
  padding: am-unit(1);
  transition: 0.35s border-color, 0.35s box-shadow;
  width: 100%;

  &:focus {
    border-color: am-color(primary);
    outline: 0;
    transition: 0.15s border-color, 0.15s box-shadow;
  }
}

@mixin am-textfield-input-email {
  background: #fff $am-textfield-email-icon am-unit(1) 50% no-repeat;
  padding-left: am-unit(5);
}

@mixin am-textfield-input-password {
  background: #fff $am-textfield-password-icon am-unit(1) 50% no-repeat;
  padding-left: am-unit(5);
}

@mixin am-textfield-input-date {
  background: #fff $am-textfield-date-icon am-unit(1) 50% no-repeat;
  padding-left: am-unit(5);
}

@mixin am-textfield-textarea {
  border-radius: 2px;
  height: am-sp(7px);
  padding: am-unit(1);
}

@mixin am-textfield-input-error {
  border-color: $am-textfield-error-color;
  box-shadow: 0 1px 0 0 $am-textfield-error-color;
}

@mixin am-textfield-label {
  @include am-font-size(13px);
  @include am-color(secondary-text);
  display: block;
  line-height: 16px;
  font: $am-textfield-label-type;
  margin-bottom: 8px;
  position: relative;
  transition: 0.28s all;
  width: 100%;

  .has-focus & {
    color: $am-textfield-primary;
  }
}

@mixin am-textfield-hint {
  @include am-type-caption;
  @include am-color(secondary-text);
  margin: am-unit(1) 0 0;
}

@mixin am-textfield-hint-error {
  @include am-type-caption;
  color: $am-textfield-error-color;
  display: inline-block;
  margin: $am-unit-type 0 0;
  vertical-align: middle;
  transition: 0.3s all;

  &:first-letter {
    text-transform: uppercase;
  }
}

@mixin am-textfield-required {
  @include am-type-caption;
  border: 0;
  color: $am-textfield-primary;
  margin-left: 4px;
}

@mixin am-textfield-input-disabled {
  background-color: #eeeeee;
}

@mixin am-textfield-inline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

@mixin am-textfield-label-inline {
  width: 100%;
}

@mixin am-textfield-input-inline {
  flex: 1;
  width: auto;
}
