$ui-input-text-animation: cubic-bezier(0.22, 0.61, 0.36, 1);
$ui-input-text-transform-start: scale(1.16) translateY(0.7rem);
$ui-input-text-transform-end: scale(1) translateY(0);

.ui-input {
  &__text-wrapper {
    display: block;

    font-family: $ui-font-specter-regular;

    background: ui-color(white);
    border: 1px solid ui-color(blue);
    border-radius: $ui-br-border-radius;

    &:hover {
      outline: 1px solid ui-color(blue);
    }

    /* CLASS TO TRANSITION THE LABEL */
    &--focused {
      .ui-input__text-label::before {
        transform: $ui-input-text-transform-end;
      }
    }

    &--has-value {
      .ui-input__text-label::before {
        transform: $ui-input-text-transform-end;
      }
    }

    &--error {
      background: ui-color(fw-gray-1);
      border-color: ui-color(alert);
      border-width: 1px;

      .ui-input__text-label::before {
        color: ui-color(alert);
      }
    }
  }

  &__text-label {
    position: relative;

    display: block;
    margin: 0.5rem 0 0 2rem;

    color: transparent;
    font-size: 13px;
    line-height: normal;

    opacity: 1;

    pointer-events: none;

    &::before {
      position: absolute;
      top: 0;
      left: -1rem;

      display: block;
      width: 100%;

      color: ui-color(blue);

      transform: $ui-input-text-transform-start;
      transform-origin: top left;
      opacity: 0.7;

      transition: all 250ms $ui-input-text-animation;

      content: attr(data-text);
    }
  }

  &__text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.5rem 1rem;

    color: ui-color(blue);

    font-size: 16px;
    font-family: $ui-font-specter-regular;
    line-height: normal;
    white-space: normal;
    vertical-align: middle;

    background-color: transparent;
    border: 0;

    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      margin: 0;

      -webkit-appearance: none;
    }

    &[type='number'] {
      -moz-appearance: textfield;
    }

    &:focus {
      outline: 0;
    }
  }

  &__textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.5rem 1rem;

    color: ui-color(paper-ink-dark);
    font-size: 16px;
    font-family: $ui-font-specter-regular;
    line-height: 24px;
    white-space: normal;
    vertical-align: middle;

    background-color: transparent;
    border: 0;

    resize: none;

    &:focus {
      outline: 0;
    }
  }
}