$module-name: form-field-text;

.#{$module-name} {
  position: relative;

  &__input {
    display: block;
    position: relative;
    padding: 0.5em 1em;
    font-family: var(--body-font-family);
    font-size: inherit;
    font-weight: inherit;
    background-color: var(--input-background);
    width: 100%;
    color: var(--input-text);
    border: 0;
    border-bottom-width: unit(0.25);
    border-bottom-style: solid;
    border-bottom-color: transparent;
    transition: border-bottom-color var(--animation-easing) var(--animation-duration-standard);

    &::placeholder {
      color: var(--input-placeholder);
      font-style: italic;
    }
  }

  &__adornment-left,
  &__adornment-right {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    // pointer-events: none;
    transition: all var(--animation-easing) var(--animation-duration-fast);
    width: 1.5em;
  }

  &__adornment-left {
    left: 1em;
  }

  &__adornment-right {
    right: 1em;
  }

  &--has-focus,
  &:hover {
    .#{$module-name}__input {
      border-bottom-color: var(--input-accent);
    }

    .#{$module-name}__icon--edit {
      opacity: 1;
    }
  }

  &__error {
    opacity: 0;
    background: var(--error);
    color: var(--form-error-text);
    transition: opacity var(--animation-easing) var(--animation-duration-standard),
    max-height var(--animation-easing) var(--animation-duration-standard);
    padding: 0.5rem 0.25rem;
    display: flex;
    align-items: center;

    svg {
      max-height: 1.2rem;
    }
  }

  &--area {
    display: block;
    width: 100%;
    min-height: 14rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    resize: vertical;
  }

  &--has-right-adornment {
    .#{$module-name}__input {
      padding-right: 3.25em;
    }
  }

  &--has-left-adornment {
    .#{$module-name}__input {
      padding-left: 3.25em;
    }
  }

  &--has-error {
    .#{$module-name}__error {
      opacity: 1;
    }

    .#{$module-name}__input {
      margin-bottom: 0;
      border: 0.125rem solid var(--error);
    }
  }
}