// Remove after fixing checkbox/radio button
@mixin input__help-text(
  $color: $input__font-color--help,
  $color-dark: $input__font-color--help--dark,
  $color-contrast: $input__font-color--help--contrast,
  $color-dark-contrast: $input__font-color--help--dark--contrast
) {
  color: $input__font-color--help;
  font-family: $brand-font-regular;
  font-size: rem-calc(14);
  line-height: rem-calc(22);
  padding-left: rem-calc(16);

  .#{$contrast-class} & {
    color: $input__font-color--help--contrast;
  }

  .#{$dark-class} &,
  .#{$input__class}-container--dark & {
    color: $input__font-color--help--dark;

    .#{$contrast-class} & {
      color: $input__font-color--help--dark--contrast;
    }
  }

  @include vr-spacing(mb, 0.25);

  span {
    font-size: inherit;
  }
}

@mixin input-color(
  $color: null,
  $color-css-var: --null,
  $color-clear: null,
  $color-clear-css-var: --null,
  $color-clear-hover: null,
  $color-clear-hover-css-var: --null,
  $color-disabled: null,
  $color-disabled-css-var: --null,
  $color-help: null,
  $color-help-css-var: --null,
  $color-message: null,
  $color-message-css-var: --null,
  $color-placeholder: null,
  $color-placeholder-css-var: --null,
  $color-read-only: null,
  $color-read-only-css-var: --null,
  $background-color: null,
  $background-color-css-var: --null,
  $background-color-disabled: null,
  $background-color-disabled-css-var: --null,
  $background-color-hover: null,
  $background-color-hover-css-var: --null,
  $border-color: null,
  $border-color-css-var: --null
) {

  .#{$input__class}:not(.md-select__filter--input) {
    @if $color {
      color: $color;
      color: var($color-css-var, $color);
    }

    @if $background-color {
      background-color: $background-color;
      background-color: var($background-color-css-var, $background-color);
    }

    @if $border-color {
      border-color: $border-color;
      border-color: var($border-color-css-var, $border-color);
    } @else {
      border: none;
    }

    &::placeholder {
      @if $color-placeholder {
        color: $color-placeholder;
        color: var($color-placeholder-css-var, $color-placeholder);
      }
      opacity: 1;
    }

    &:hover,
    &.#{$prefix}-hover {
      @if $background-color-hover {
        background-color: $background-color-hover;
        background-color: var($background-color-hover-css-var, $background-color-hover);
      }
    }

    &:disabled,
    &.#{$prefix}-disabled {
      @if $color-disabled {
        color: $color-disabled;
        color: var($color-disabled-css-var, $color-disabled);
      }

      @if $background-color-disabled {
        background-color: $background-color-disabled;
        background-color: var($background-color-disabled-css-var, $background-color-disabled);
      }

      border-color: $input__border-color--read-only;

      &::placeholder {
        @if $color-disabled {
          color: $color-disabled;
          color: var($color-disabled-css-var, $color-disabled);
        }
      }

      &:hover {
        @if $background-color-disabled {
          background-color: $background-color-disabled;
          background-color: var($background-color-disabled-css-var, $background-color-disabled);
        }
      }
    }

    &[readonly],
    &.#{$prefix}-readonly {
      @if $color-read-only {
        color: $color-read-only;
        color: var($color-read-only-css-var, $color-read-only);
      }

      @if $background-color-disabled {
        background-color: $background-color-disabled;
        background-color: var($background-color-disabled-css-var, $background-color-disabled);
      }

      border-color: $input__border-color--read-only;

      &:hover {
        @if $background-color-disabled {
          background-color: $background-color-disabled;
          background-color: var($background-color-disabled-css-var, $background-color-disabled);
        }
      }
    }
  }

  &.#{$prefix}-disabled {
    .#{$input__class} {
      &__before {
        @include input-icon($color: $color-disabled)
      }
    }
  }

  .#{$input__class} {
    &__after,
    &__before {
      @include input-icon(
        $color: $color,
        $color-css-var: $color-css-var
      )
    }

    &__icon-clear {
      @include input-clear-color(
        $color-clear,
        $color-clear-css-var,
        $color-clear-hover,
        $color-clear-hover-css-var,
      );
    }
  }

  .#{$input__class}__messages {
    @if $color-message {
      color: $color-message;
      color: var($color-message-css-var, $color-message);
    }

    &:before {
      @if $color-message {
        color: $color-message;
        color: var($color-message-css-var, $color-message);
      }
    }
  }

  .#{$input__class}__help-text,
  .#{$input__class}__secondary-label {
    @if $color-help {
      color: $color-help;
      color: var($color-help-css-var, $color-help);
    }
  }
}


@mixin input-icon(
  $color: null,
  $color-css-var: --null
) {
  @if $color {
    color: $color;
    color: var($color-css-var, $color);
    fill: $color;
    fill: var($color-css-var, $color);

    .#{$spinner__class} {
      @include spinner-style(
        $border-progress-left: $color,
        $border-progress-left-css-var: $color-css-var
      );
    }
  }
}

@mixin input-clear-color(
  $color: $input__clear-icon__color,
  $color-css-var: --null,
  $color-hover: $input__clear-icon__color--hover,
  $color-hover-css-var: --null
) {
  background-color: transparent;
  @if $color {
    color: $color;
    color: var($color-css-var, $color);
    fill: $color;
    fill: var($color-css-var, $color);
  }

  &:hover,
  &:focus {
    background-color: transparent;
    @if $color-hover {
      color: $color-hover;
      color: var($color-hover-css-var, $color-hover);
      fill: $color-hover;
      fill: var($color-hover-css-var, $color-hover);
    }
  }
}