%form-control {
  background-clip: padding-box;
  background-color: transparent;
  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;
  font-size: $textfield-font-size;
  line-height: $textfield-line-height;
  padding: $textfield-padding-y $textfield-padding-x calc(#{$textfield-padding-y} - #{$textfield-border-width});
  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 focus-hover {
      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;
  }
}

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

  &[type='file'] {
    max-height: $textfield-height;
  }
}

// Form control sizing

.form-control-lg {
  font-size: $textfield-font-size-lg;
  line-height: $textfield-line-height-lg;
  padding: $textfield-padding-y-lg $textfield-padding-x-lg calc(#{$textfield-padding-y-lg} - #{$textfield-border-width});

  &[type='file'] {
    max-height: $textfield-height-lg;
  }
}

.form-control-sm {
  font-size: $textfield-font-size-sm;
  line-height: $textfield-line-height-sm;
  padding: $textfield-padding-y-sm $textfield-padding-x-sm calc(#{$textfield-padding-y-sm} - #{$textfield-border-width});

  &[type='file'] {
    max-height: $textfield-height-sm;
  }
}

// Select and textarea

%form-select {
  appearance: none;

  @include media-moz-webkit {
    padding-right: $textfield-select-bg-size;

    &[multiple],
    &[size]:not([size='1']) {
      background-image: none;
    }
  }
}

%form-textarea {
  border-radius: $textfield-box-border-radius;
  border-width: $textfield-border-width;
  min-height: $textfield-box-height;
  padding: calc(#{$textfield-box-padding-y} - #{$textfield-border-width}) $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;
  }

  &: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 {
    @extend %form-select;

    &[multiple],
    &[size]:not([size='1']) {
      @extend %form-textarea;
    }
  }

  &.form-control-lg {
    &[multiple],
    &[size]:not([size='1']) {
      padding: calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width}) $textfield-box-padding-x-lg;
    }
  }

  &.form-control-sm {
    &[multiple],
    &[size]:not([size='1']) {
      padding: calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width}) $textfield-box-padding-x-sm;
    }
  }
}

textarea {
  &.form-control {
    min-height: $textfield-height;

    &:not([rows='1']) {
      @extend %form-textarea;
    }
  }

  &.form-control-lg {
    min-height: $textfield-height-lg;

    &:not([rows='1']) {
      min-height: $textfield-box-height-lg;
      padding: calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width}) $textfield-box-padding-x-lg;
    }
  }

  &.form-control-sm {
    min-height: $textfield-height-sm;

    &:not([rows='1']) {
      min-height: $textfield-box-height-sm;
      padding: calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width}) $textfield-box-padding-x-sm;
    }
  }
}
// stylelint-enable

.custom-file {
  display: inline-block;
  height: $textfield-height;
  margin-bottom: 0;
  position: relative;
  width: 100%;
}

.custom-file-input {
  height: $textfield-height;
  margin: 0;
  opacity: 0;
  position: relative;
  width: 100%;
  z-index: 1;

  @include focus-hover {
    ~ .custom-file-label {
      border-bottom-color: $textfield-border-color-focus;
      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
    }
  }
}

.custom-file-label {
  @include text-truncate;
  @include transition-standard(border-color, box-shadow);

  border-bottom: $textfield-border-width solid $textfield-border-color;
  color: $textfield-hint-color;
  font-size: $textfield-font-size;
  height: $textfield-height;
  line-height: $textfield-line-height;
  padding: $textfield-padding-y ($material-icon-size + $selection-control-spacer-x) calc(#{$textfield-padding-y} - #{$textfield-border-width}) $textfield-padding-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  &::after {
    @include set-material-icons;

    content: $custom-file-button-icon;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

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

  &[multiple],
  &[size]:not([size='1']) {
    @extend %form-textarea;
  }
}

.custom-select-lg {
  font-size: $textfield-font-size-lg;
  line-height: $textfield-line-height-lg;
  padding: $textfield-padding-y-lg $textfield-select-bg-size calc(#{$textfield-padding-y-lg} - #{$textfield-border-width}) $textfield-padding-x-lg;

  &[multiple],
  &[size]:not([size='1']) {
    padding: calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width}) $textfield-box-padding-x-lg;
  }
}

.custom-select-sm {
  font-size: $textfield-font-size-sm;
  line-height: $textfield-line-height-sm;
  padding: $textfield-padding-y-sm $textfield-select-bg-size calc(#{$textfield-padding-y-sm} - #{$textfield-border-width}) $textfield-padding-x-sm;

  &[multiple],
  &[size]:not([size='1']) {
    padding: calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width}) $textfield-box-padding-x-sm;
  }
}

.form-control-file {
  @extend %form-control;

  max-height: $textfield-height;
}

.form-control-range {
  display: block;
  width: 100%;
}

// Validation

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