// ---------------------------
// FORM ELEMENTS
// ---------------------------

// Table for creating a form layout
// Separate borders for IE9, otherwise it will not show focused glow for controls
table.form {
  width: 100%;
  //margin: 0.5em 0;
  border-collapse: separate;
  th {
    font-weight: normal;
    white-space: nowrap;
    padding: 4px 0 4px 16px;
  }
  td { padding: 4px 0 4px 8px; }
  th, td { &:first-child { padding-left: 0; } }
}

// Form label, invalid with curved red underline
label {
  position: relative;
  display: inline-block;
  line-height: $lineHeight;
  &.above { margin: 2px 0 4px 0; }
  &.invalid {
    color: $inputInvalidColor;
    //background-repeat: repeat-x;
    //background-position: left bottom 1px;
    //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHUlEQVQIW2P4z8DwH4jTgJgBRIMIMAMmAZT+j4IB/BEXgzA1vdgAAAAASUVORK5CYII=');
    //@include background-svg(4, 3, '<path fill="#FF0000" d="M0,1.1C0.1,1,0.3,1,0.5,1c1,0,1,1,2,1c0.8,0,1-0.6,1.5-0.9v-1C3.5,0.4,3.3,1,2.5,1c-1,0-1-1-2-1C0.3,0,0.1,0,0,0.1V1.1z"/>');
  }
}

// Avoid setting line-height for inputs, FF will override it with 'line-height: normal'
// so the best practice would be to leave 'line-height: normal' and use height instead
select,
textarea,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  width: 100%;
  color: $inputColor;
  line-height: normal;
  height: $inputHeight;
  height: calc(#{$inputHeight} + 2px);
  padding: $inputPadding;
  min-width: $inputHeight * 2;
  border-radius: $inputBorderRadius;
  background-clip: padding-box;
  background-color: $inputBackground;
  border: 1px solid $inputBorderColor;
  transition-duration: $inputTransitionTime;
  transition-property: border-color, box-shadow;
  box-shadow: inset 0 1px 0 rgba(#000, 0.03);
  -webkit-appearance: none;
  -moz-appearance: none;

  // Focused state
  &:focus {
    outline: none;
    border-color: $inputFocusBorder;
    //box-shadow: 0 0 1px $inputFocusBorder;
  }

  // Disabled state
  &[disabled] {
    opacity: 0.8;
    color: $inputDisabledColor;
    background-color: $inputDisabledBackground;
  }

  // Invalid state
  &.invalid {
    color: $inputInvalidColor;
    border-color: rgba($inputInvalidColor, 0.5);
  }

  // Round corners
  &.round { border-radius: $inputHeight; }
}

// Hide placeholder text on focus
input {
  &::placeholder { transition: color 0.15s; }
  &:focus { &::placeholder { color: transparent !important; } }
}

// Select height in different browsers is quite inconsistent!
// Windows: Chrome, FF and IE add 1px extra padding, Safari & Opera don't
// OS X: FF add 1px extra padding, Chrome, Safari & Opera don't
select {
  white-space: nowrap;
  padding: 2px $inputPadding;
}

// Reset height for textareas and multiple selects
textarea, select[size], select[multiple] { height: auto; }

// Down arrow glyph
@mixin down-arrow-glyph() {
  background-repeat: no-repeat;
  background-position: right center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAYAAACeuGYRAAAAQElEQVQY02NgYGBYB8T/seB1////Z8CGQUAIiJ+jaQDxhfBpAgFXNE0gPgMhTSAwAaphAkyAGE1sQLwaSuPVBABzumtKUJpCDwAAAABJRU5ErkJggg==');
  @include background-svg(15, 5, '<polygon fill="#000" points="0,0 7,0 3.5,5"/>');
}

// NOT WORKING IN FF30!!!
// Down arrow glyph for FireFox
// Enable 'appearance: none' with text-overflow and text-indent
@-moz-document url-prefix() {
  select {
    padding-top: 4px;
    text-overflow: '';
    text-indent: 0.01px;
    @include down-arrow-glyph();
  }
}

// Down arrow glyph for Chrome and Safari
@media (-webkit-min-device-pixel-ratio: 0) {
  select {
    padding-right: 1.5em;
    @include down-arrow-glyph();
    &[size], &[multiple] {
      background-image: none;
      padding: 2px $inputPadding;
    }
  }
}