.form-control,
%form-control {
  @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);

  background-clip: padding-box;
  background-color: transparent;
  background-image: none;
  border-color: $textfield-border-color;
  border-radius: 0;
  border-style: solid;
  border-width: 0 0 $textfield-border-width;
  box-shadow: none;
  color: $textfield-color;
  display: block;
  width: 100%;

  @include hover {
    border-color: $textfield-border-color-hover;
    box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
  }

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &::placeholder {
    color: $textfield-hint-color;
    opacity: 1;
  }

  &:disabled,
  &[readonly] {
    border-style: dotted;
    color: $textfield-color-disabled;
    opacity: 1;

    @include hover {
      border-color: $textfield-border-color;
      box-shadow: none;
    }

    &:focus {
      border-color: $textfield-border-color;
      box-shadow: none;
    }
  }

  &:focus {
    border-color: $textfield-border-color-focus;
    box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
    outline: 0;
  }

  &:invalid:required {
    outline: 0;
  }
}

@each $color, $values in $theme-colors {
  .form-control-#{$color} {
    border-color: map-get(theme-color($color), color);

    @include focus-hover {
      border-color: map-get(theme-color($color), color);
      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) map-get(theme-color($color), color);
    }
  }
}

.form-control-lg,
%form-control-lg {
  @include form-control-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-x-lg, $textfield-padding-y-lg);
}

.form-control-sm,
%form-control-sm {
  @include form-control-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-x-sm, $textfield-padding-y-sm);
}

%form-select {
  @include form-select-size($textfield-font-size, $textfield-height, $textfield-padding-x);

  appearance: none;

  @include media-moz-webkit {
    background-image: $caret-bg;
    background-repeat: no-repeat;
  }

  &.form-control-lg {
    @include form-select-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-x-lg);
  }

  &.form-control-sm {
    @include form-select-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-x-sm);
  }
}

%form-textarea {
  border-radius: $textfield-box-border-radius;
  border-width: $textfield-border-width;
  height: auto;
  padding: $textfield-box-padding-y $textfield-box-padding-x;

  @include hover {
    box-shadow: inset $textfield-border-width-hover $textfield-border-width-hover 0 ($textfield-border-width * -1) $textfield-border-color-hover, inset ($textfield-border-width-hover * -1) ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
  }

  &.form-control-lg {
    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg;
  }

  &.form-control-sm {
    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm;
  }

  &:focus {
    box-shadow: inset $textfield-border-width-focus $textfield-border-width-focus 0 ($textfield-border-width * -1) $textfield-border-color-focus, inset ($textfield-border-width-focus * -1) ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
  }
}

// stylelint-disable selector-no-qualifying-type
select {
  &.form-control {
    &[multiple],
    &[size] {
      @extend %form-textarea;
    }

    &:not([multiple]):not([size]) {
      @extend %form-select;
    }
  }
}
// stylelint-enable

// stylelint-disable selector-no-qualifying-type
textarea {
  &.form-control:not(.textarea-autosize) {
    @extend %form-textarea;
  }
}
// stylelint-enable

// Form control static

.form-control-plaintext {
  @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);

  border-color: transparent;
  display: block;
  width: 100%;

  &.form-control-lg {
    @include form-control-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-x-lg, $textfield-padding-y-lg);
  }

  &.form-control-sm {
    @include form-control-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-x-sm, $textfield-padding-y-sm);
  }
}

// Form validation

@include form-validation-state('invalid', $form-feedback-invalid-color);
@include form-validation-state('valid', $form-feedback-valid-color);

// Style of Material design `select` should also be applied to `.custom-select`

.custom-select {
  @extend %form-control;

  &[multiple],
  &[size] {
    @extend %form-textarea;
  }

  &:not([multiple]):not([size]) {
    @extend %form-select;
  }
}

.custom-select-lg {
  @extend %form-control-lg;

  &[multiple],
  &[size] {
    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg;
  }

  &:not([multiple]):not([size]) {
    @include form-select-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-x-lg);
  }
}

.custom-select-sm {
  @extend %form-control-sm;

  &[multiple],
  &[size] {
    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm;
  }

  &:not([multiple]):not([size]) {
    @include form-select-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-x-sm);
  }
}