.textfield {
  composes: touchTarget from "material.module.css";

  --border-color: var(--tutu-color-inactive-on-surface);
  --active-border-color: var(--tutu-color-primary);
  --label-color: var(--tutu-color-inactive-on-surface);
  --active-label-color: var(--tutu-color-primary);
  --helper-text-color: var(--tutu-color-inactive-on-surface);

  & > * {
    width: 100%;
  }

  &.error,
  &:has(> input[aria-invalid="true"]) {
    &:not(:focus-within) {
      --border-color: var(--tutu-color-error-on-surface);
      --label-color: var(--tutu-color-error-on-surface);
      --helper-text-color: var(--tutu-color-error-on-surface);
    }

    &:focus-within {
      --helper-text-color: var(--tutu-color-error-on-surface);
    }
  }

  position: relative;

  & > label {
    position: absolute;
    left: 0;
    bottom: calc(10px + var(--bottom-height, 0px));
    color: var(--label-color);
    transition:
      bottom 0.2s ease-in-out,
      font-size 0.2s ease-in-out,
      color 0.2s ease-in-out;
    cursor: text;
    font-size: 0.8125rem;
  }

  & > label:has(+ input:not(:placeholder-shown)) {
    bottom: calc(100% - 0.8125rem);
  }

  &:focus-within > label,
  &.float-label > label {
    bottom: calc(100% - 0.8125rem);
    color: var(--active-label-color);
  }

  & > input[type="text"],
  & > input[type="password"] {
    border: none;
    outline: none;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    padding-top: 16px;
    padding-bottom: 8px;
    margin-bottom: 1px;
    transition: border-color 0.2s ease-in-out;

    &:focus {
      border-bottom: 2px solid var(--active-border-color);
      margin-bottom: 0;
    }
  }

  &.withHelperText {
    --bottom-height: 0.8125rem;
  }

  & .helperText {
    color: var(--helper-text-color);
    font-size: 0.8125rem;
    line-height: 100%;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: flex;
    justify-content: space-between;
    min-height: 0.8125rem;
    cursor: auto;
  }
}