.TextField {
  --border-color: var(--color-light);
  --label-color: var(--color-middle);
  --label-position-top: var(--font-size-default);
  --label-position-left: 2.5rem;
  --label-font-size: var(--font-size-default);
  --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)) {
    --label-color: var(--color-main-dark);
  }

  &.error {
    --label-color: var(--color-error) !important;
    --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;
    display: flex;
    align-items: center;
    color: var(--label-color);
    gap: 2px;
    top: -6px;
    left: calc(var(--padding-xs) - 2px);
    font-size: var(--font-size-s);
    transition: var(--transition-default);

    & > * {
      background: var(--color-lightest);
      padding: 0 2px;
    }
  }

  & .icon {
    position: relative;
    color: var(--label-color);
    font-size: var(--font-size-default);
    top: -1px;
  }

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

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