// RAMEN FORM TEXT COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $form-text-background-color: Sets the background colour of the text field
// $form-text-border: Sets the border of the text field
// $form-text-focus-border-color: Sets the border color of the text field in focus state
// $form-text-color: Sets the text colour of the text field
// $form-text-font-size: Sets the font size of the text field
// $form-text-padding: Sets the padding on the form text field
// $form-text-placeholder-color: Sets the color of the text placeholder
// $form-text-icon-size: Icon height and width
// $form-text-icon-color: SVG icon fill colour
// $form-text-error-border-color: Sets the text field border colour for error state
// $form-text-success-border-color:  Sets the text field border colour for success state
// $form-text-success-icon-svg: SVG icon for the success state icon
// $form-text-success-icon-size: Size of the success icon
//
//

@mixin form-text {
  position: relative;
}

@mixin form-text-input {
  -webkit-appearance: none;
  appearance: none;
  background: $form-text-background-color;
  border-radius: 0;
  border: $form-text-border;
  color: $form-text-color;
  font-size: $form-text-font-size;
  padding: $form-text-padding;
  resize: vertical;
  transition: border-color $global-transition-speed $global-easing;
  width: 100%;

  &:placeholder {
    color: $form-text-placeholder-color;
  }

  &:focus {
    border-color: $form-text-focus-border-color;
    outline: none;
  }

  &:disabled {
    opacity: 0.5;
  }
}

@mixin form-text-icon {
  display: block;
  fill: $form-text-icon-color;
  height: $form-text-icon-size;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: $form-text-icon-size;
}

@mixin form-text-icon-left {
  .c-form-text__input {
    padding-left: $spacing-xsmall + $form-text-icon-size + $spacing-xsmall;
  }

  .c-form-text__icon {
    left: $spacing-xsmall;
  }
}

@mixin form-text-icon-right {
  .c-form-text__input {
    padding-right: $spacing-xsmall + $form-text-icon-size + $spacing-xsmall;
  }

  .c-form-text__icon {
    right: $spacing-xsmall;
  }
}

@mixin form-text-error {
  .c-form-text__input {
    border-color: $form-text-error-border-color;
  }
}

@mixin form-text-success {
  .c-form-text__input {
    border-color: $form-text-success-border-color;
    padding-right: $spacing-xsmall + $form-text-success-icon-size +
      $spacing-xsmall;
  }

  &:after {
    background-image: $form-text-success-icon-svg;
    background-position: center;
    background-repeat: no-repeat;
    background-size: $form-text-success-icon-size auto;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: toRems(50px);
  }
}

.c-form-text {
  @include form-text;

  &__icon {
    @include form-text-icon;
  }

  &__input {
    @include form-text-input;
  }

  &--icon-left {
    @include form-text-icon-left;
  }

  &--icon-right {
    @include form-text-icon-right;
  }

  &.has-error {
    @include form-text-error;
  }

  &.has-success {
    @include form-text-success;
  }
}