Input.scss

$disabled_color: #d6d6d6;
$inactive_color: #999999;
$active_color: #85acb0;
$success_color: #4bb4b3;
$warning_color: #ffad3a;
$error_field: #ec3f3f;
$border: 1px solid;

.deriv-input {
  display: inline-flex;
  position: relative;
  border-radius: 4px;
  width: 328px;
  box-sizing: border-box;
  text-align: left;
  padding: 10px 16px;
  border: $border;

  &--general {
    border-color: $inactive_color;
    &:focus-within {
      border-color: $active_color;
    }
  }
  &--error {
    border-color: $error_field;
  }
  &--success {
    border-color: $success_color;
  }

  &--active {
    border-color: $active_color;
  }

  &--disabled {
    border-color: $disabled_color;
  }

  &__field {
    width: 100%;
    outline: none;
    &::placeholder {
      visibility: hidden;
    }
    &:focus,
    &:not(:placeholder-shown) {
      & ~ label {
        font-size: 10px;
        transform: translate(0, -50%);
        background-color: #ffffff;
        padding: 0px 4px;
        height: fit-content;
      }
    }
  }

  &__label {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16px;
    display: flex;
    align-items: center;
    pointer-events: none;
    text-transform: capitalize;
    transition: all 0.15s ease-out;
    padding: 0;
    &--general {
      color: $inactive_color;
    }
    &--error {
      color: $error_field;
    }
    &--success {
      color: $success_color;
    }
    &--active {
      color: $active_color;
    }

    &--disabled {
      color: $disabled_color;
    }
  }

  &__helper-message {
    top: calc(100% + 2px);
    position: absolute;
    left: 16px;
    line-height: 1;
  }

  &__right-content {
    margin-left: 16px;
  }
}

.deriv-input--general .deriv-input__field:focus + .deriv-input__label {
  color: $active_color;
}

.deriv-input--error .deriv-input__field:focus + .deriv-input__label {
  color: $error_field;
}

.deriv-input--success .deriv-input__field:focus + .deriv-input__label {
  color: $success_color;
}