.TextField {
  --border-color: var(--color-light);
  --label-color: var(--color-middle);
  --label-position-top: var(--font-size-normal);
  --label-font-size: var(--font-size-normal);
  --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: calc(-1 * var(--font-size-normal));
    --label-font-size: var(--font-size-s);
  }

  &.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: var(--padding-xxs) var(--padding-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-default);
  }

  & label {
    position: absolute;
    background: var(--color-lightest);
    padding: var(--padding-xxs) 0;
    left: var(--padding-s);
    color: var(--label-color);
    top: var(--label-position-top);
    font-size: var(--font-size-normal);
    transition: var(--transition-default);
  }

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

  & input {
    all: unset;
    padding: var(--padding-s);
    font-size: var(--font-size-normal);
    width: 100%;
    flex: 25% 1 0;
    color: var(--color-darkest);
  }

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