.TextField {
  --border-color: var(--color-light);
  --label-color: var(--color-middle);
  --label-position-top: 0.4em;
  --label-font-size: 1rem;
  --icon-color: var(--color-main-dark);
  --message-color: var(--color-middle);

  position: relative;
  flex: 25% 1 0;

  &:focus-within {
    --border-color: var(--color-main-dark);
  }

  &:focus-within,
  &:has(input:not(:placeholder-shown)) {
    --icon-color: var(--color-main-dark);
    --label-color: var(--color-main-dark);
    --label-position-top: -11px;
    --label-font-size: 0.8rem;
  }

  &.error {
    --label-color: var(--color-error);
    --icon-color: var(--color-error);
    --border-color: var(--color-error);
    --message-color: var(--color-error);
  }

  & .wrapper {
    display: flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-default);
  }

  & label {
    position: absolute;
    background: var(--color-lightest);
    padding: 0.2rem;
    left: 1.8rem;
    color: var(--label-color);
    top: var(--label-position-top);
    font-size: var(--label-font-size);
    transition: var(--transition-default);
  }

  & .icon {
    color: var(--icon-color);
  }

  & input {
    all: unset;
    padding: 0.5rem;
    font-size: 1rem;
    width: 100%;
    flex: 25% 1 0;
  }

  & span {
    color: var(--message-color);
    font-size: 0.6rem;
  }
}