$root: text-field;

.#{$root} {
  width: 100%;
  display: block;
  box-sizing: border-box;
  position: relative;

  &__input {
    font-family: Roboto, sans-serif;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border: none;

    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .#{$root}--regular & {
      color: var(--text-color);
      padding: 8px var(--side-padding2);
      box-shadow: 0 0 0 1px var(--text-field-border-color);
      border-radius: var(--text-field-border-radius);
      background-color: var(--text-field-bg-color);
      transition: box-shadow var(--transition-speed);
      will-change: box-shadow;

      &::placeholder {
        color: var(--text-filed-placeholder-text-color);
      }

      &:focus {
        box-shadow: 0 0 0 2px var(--text-filed-focus-border-color);
      }
    }

    .#{$root}--error & {
      box-shadow: inset 0 0 0 2px var(--text-filed-error-border-color);
      color: var(--text-filed-error-text-color);
    }

    .#{$root}--success & {
      box-shadow: inset 0 0 0 2px var(--text-filed-success-border-color);
      color: var(--text-filed-success-text-color);
    }
  }
}
