.c-text-input {
  width: 100%;
  font: {
    family: $ff-base;
    size: $fs-medium;
  }

  &__label-wrapper {
    display: flex;
    margin-bottom: 8px;
  }

  &__label {
    font-size: $fs-small;
    font-family: inherit !important;
    line-height: 20px;

    &--required {
      &::after {
        content: "*";
        color: map-get($red, 1);
        margin-left: 0.3em;
      }
    }

    &-tooltip {
      display: flex;
      margin-left: 8px;
    }
  }

  &__input {
    font-size: inherit;
    color: map-get($dark-blue, 1);
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid rgba(map-get($dark-blue, 1), 0.2);
    font-family: inherit !important;
    width: 100%;
    box-sizing: border-box;
    background-color: $white;

    &:not([disabled]):focus,
    &:not([disabled]):active {
      outline: none;
      border-color: map-get($dark-blue, 1);
    }
  }

  &__input[disabled] {
    background-color: rgba(map-get($dark-blue, 1), 0.05);
    color: rgba(map-get($dark-blue, 1), 0.3);
  }

  &--small {
    font: {
      family: $ff-base;
      size: $fs-small;
    }

    > .c-text-input__input {
      padding: 5px 15px;
    }
  }

  &__validation {
    display: block;
    margin-top: 8px;
    font-size: $fs-tiny;
    color: map-get($red, 1);
    font-family: inherit !important;
  }

  &__under-label {
    font-size: $fs-small;
    margin-top: 3px;
    display: flex;
    justify-content: flex-end;
    color: map-get($dark-blue, 3);
  }
}
