[data-lk-component="text-input"] {
  display: flex;
  flex-flow: column nowrap;

  [data-lk-component="state-layer"] {
    border-radius: var(--lk-size-sm);
    font-size: inherit;
  }
}

[data-lk-component="text-input"] input {
  appearance: none;
  background: var(--lk-surface);
  border: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  width: 100%;
  padding: var(--lk-size-xs) var(--lk-size-sm);
  border-radius: var(--lk-size-sm);
}

[data-lk-text-input-label-position="on-input"] {
  label {
    position: absolute;
    top: 50%;
    left: var(--lk-size-sm);
    transform: translateY(-50%);
    opacity: 50%;
    pointer-events: none;
    transition:
      top 0.2s ease-out,
      font-size 0.2s ease-out,
      color 0.2s ease-out,
      letter-spacing 0.2s ease-out,
      opacity 0.2s ease-out,
      padding 0.2s ease-out,
      transform 0.2s ease-out;
  }

  label.on-field-with-value-set {
    opacity: 100%;
    top: 0;
    font-size: var(--label-font-size);
    letter-spacing: -0.004em;
    padding: 0 var(--lk-size-xs);
    transform: translate(calc(-1 * var(--lk-size-2xs)), -61.8%);
    color: var(--lk-outline);
  }
}

[data-lk-text-input-el="input-wrap"] {
  border: 1px solid var(--lk-outlinevariant);
  margin-top: calc(var(--bodyBoxHeight) * var(--lk-halfstep-dec));
  position: relative;

  border-radius: var(--lk-size-sm);
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition:
    outline 0.2s ease-out,
    outline-offset 0.2s ease-out;

  &:has(input:focus-visible) {
    outline: 3px solid var(--lk-primary);
    outline-offset: 0px;

    label {
      opacity: 100%;
      top: 0;
      font-size: var(--label-font-size);
      letter-spacing: -0.004em;
      padding: 0 var(--lk-size-xs);
      transform: translate(calc(-1 * var(--lk-size-2xs)), -61.8%);
    }
  }

  &:placeholder-shown {
    color: var(--lk-outline);
  }

  [data-lk-component="icon"] {
    position: absolute;
    top: 50%;
    right: var(--lk-size-sm);
    transform: translateY(-50%);
  }
}

div[data-lk-text-input-label-position="on-input"] > [data-lk-text-input-el="input-wrap"] {
  margin-top: 0px;
}

[data-lk-component="text-input"]:focus-within {
  [data-lk-component="state-layer"] {
    display: none;
  }
}

[data-lk-input-help-text="true"] {
  margin-bottom: var(--lk-size-xs);
  color: var(--lk-outline);
}
