@import '../utils/theme/variables.scss';
$height: 36px !default;
$padding-h: 12px !default;
$font-size: 14px !default;
$font-weight: $brc-semibold !default;
$placeholder-color: $brc-coolGrey !default;
$placeholder-font-weight: $brc-semibold !default;
$color: $brc-darkGreyBlue !default;
$border-color: $brc-silver !default;
$border-width: 1px !default;
$border-radius: 2px !default;
$color-focus: $brc-darkGreyBlue !default;
$border-color-focus: $brc-waterBlue !default;
$opacity-disabled: 0.6 !default;
$color-success: $brc-seaGreen !default;
$color-failure: $brc-alizarinCrimson !default;
$border-color-success: $brc-seaGreen !default;
$border-color-failure: $brc-alizarinCrimson !default;

// confirmation-input extensions
$confirmation-font-weight: $brc-semibold !default;
$confirmation-color: $brc-azure !default;
$confirmation-color-focus: $brc-azure !default;

// password input extensions
$show-color: $brc-azure !default;

.input {
  input {
    border: $border-width solid $border-color;
    border-radius: $border-radius;
    height: $height;
    padding: 0 $padding-h;
    color: $color;
    font-weight: $font-weight;
    font-size: $font-size;
    line-height: $font-size;
    font-family: inherit;

    @include placeholder {
      color: $placeholder-color;
      font-weight: $placeholder-font-weight;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: $opacity-disabled;
    }

    &:focus {
      border: $border-width solid $border-color-focus;
      outline: none;
      box-shadow: 0;
      color: $color-focus;
    }
  }

  &:not(.has-value) {
    input {
      color: $placeholder-color;
      font-weight: $placeholder-font-weight;
    }
  }

  &.is-success,
  &.is-failure {
    .icon {
      margin: 0 $padding-h;
      line-height: $font-size;
      font-size: $font-size;
    }
  }

  &.is-success {
    input {
      border: $border-width solid $border-color-success;
      color: $color-success;
    }

    svg {
      fill: $color-success;
      margin-right: 4px;
    }
  }

  &.is-failure {
    input {
      border: $border-width solid $border-color-failure;
      color: $color-failure;
    }

    svg {
      fill: $color-failure;
      margin-right: 4px;
    }
  }

  // confirmation input extensions
  &.confirmation-input {
    .confirmation {
      height: $height;
      margin: 0 $padding-h;
      color: $confirmation-color;
      font-size: $font-size;
      line-height: $font-size;
      font-weight: $confirmation-font-weight;
    }

    &.focused {
      .confirmation {
        cursor: pointer;
        color: $confirmation-color-focus;
      }
    }
  }

  // password input extensions
  &.password-input {
    .password-input-toggle {
      height: $height;
      margin: 0 $padding-h;
      color: $show-color;
      font-size: $font-size;
      line-height: $font-size;
      cursor: pointer;
    }
  }
}
