@import "../Variables";
$input-border: 1px solid rgba($color-grey, 0.4);
$input-height: 34px;
$input-font-size: 15px;
$input-margin: 0 0 15px 0 !default;
$input-padding: 0 !default;
$input-transition: all 0.2s ease !default;
$input-color-transition: color 0.2s ease;
$input-margin-top: 20px;
$input-vertical-padding: 3px;
$input-height: 34px;
$input-max-width: 440px;
$radio-button-option-height: 16px;
$radio-button-size: 16px;
$checkbox-label-margin: 24px;

@mixin placeholder($text-color: $color-grey, $font-family: "'Lato', Arial, Helvetica, sans-serif") {
  &::placeholder {
    color: $text-color;
    font-family: $font-family;
    font-size: inherit;
    text-transform: none;

    transition: color 0.2s ease;
  }
}

.coveo-input {
  position: relative;

  margin-top: 35px;

  input {
    width: 100%;
    height: $input-height;
    padding: $input-padding;

    font-size: $input-font-size;

    background-color: transparent;
    box-shadow: none;
    border: 0;
    border-bottom: $input-border;
    border-radius: 0;
    outline: 0;

    transition: $input-transition;

    &:focus:not([readonly]), &:valid, &:disabled {
      color: $color-dark-grey;

      border-bottom: 1px solid $color-teal;

      @include placeholder();

      & + label {
        @extend .active;
      }
    }

    &:disabled, &[readonly='readonly'] {
      color: $color-grey;

      border-bottom-color: $color-grey;

      & + label {
        color: $color-grey;
      }
    }
  }

  label {
    position: absolute;
    top: 10px;
    left: 0;
    align-items: center;

    display: flex; // Used for inline-help-tooltip placement

    color: $color-dark-grey;
    font-size: $input-font-size;

    transition: $input-transition;

    pointer-events: none;

    &.active {
      top: -1 * $input-margin-top;

      color: $color-teal;
      font-size: 13px;
    }
  }

  input {
    padding: $input-vertical-padding 0;

    color: transparent; // Make the input text color transparent when input is invalid (closed).
    font-size: $input-font-size;

    background-color: transparent;
    box-shadow: none; // Remove firefox invalid input box shadow.

    transition: $input-color-transition;

    @include placeholder(transparent);
  }
}
