@layer lotek {
  .lt-input {
    /* The design system cannot assume the consumer has a CSS reset. Without
       border-box, padding and border are added outside the width, and the
       field becomes wider than the box it sits in. */
    box-sizing: border-box;

    display: block;
    width: var(--lt-input-width, 100%);
    padding: var(--lt-input-padding, var(--lt-spacing-2) var(--lt-spacing-3));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-canvas);
    border: 1px solid var(--lt-color-neutral-border);
    border-radius: var(--lt-input-radius, var(--lt-spacing-1));
  }

  .lt-input::placeholder {
    color: var(--lt-color-neutral-text-subtle);
  }

  .lt-input:hover {
    border-color: var(--lt-color-neutral-border-strong);
  }

  .lt-input:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
    border-color: var(--lt-color-accent-border);
  }

  .lt-input:disabled,
  .lt-input[aria-disabled="true"] {
    /* `background-color` and not the shorthand, here and in the states
       below. The shorthand resets `background-image`, and a search field
       lost its magnifying glass when `input.css` was loaded after
       `search.css`. */
    background-color: var(--lt-color-disabled-surface);
    color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-surface);
    /* No pointer-events: none here. The browser already blocks a disabled
       field, and pointer-events would only stop the cursor from showing. The
       element is then not hit by the mouse at all. */
    cursor: not-allowed;
  }

  /* aria-disabled is only information for screen readers; the element still
     works. Here pointer-events stops the mouse, at the cost of the cursor.
     If the field should really be off, use `disabled` or `readonly`. */
  .lt-input[aria-disabled="true"] {
    pointer-events: none;
  }

  .lt-input[data-state="invalid"] {
    border-color: var(--lt-color-danger-text);
    background-color: var(--lt-color-danger-surface);
  }

  .lt-input[data-state="invalid"]:focus-visible {
    outline-color: var(--lt-color-danger-text);
  }

  .lt-input[data-state="success"] {
    border-color: var(--lt-color-success-text);
    background-color: var(--lt-color-success-surface);
  }

  .lt-input[data-state="success"]:focus-visible {
    outline-color: var(--lt-color-success-text);
  }

  /* Disabled wins over a state. `[data-state]` used to come after
     `:disabled` with the same specificity, and an invalid field in a form
     that was disabled during submission looked red, not disabled. */
  .lt-input:is(:disabled, [aria-disabled="true"])[data-state] {
    background-color: var(--lt-color-disabled-surface);
    color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-surface);
  }

  .lt-input[data-variant="date"],
  .lt-input[data-variant="time"],
  .lt-input[data-variant="datetime-local"] {
    position: relative;
    min-height: calc(var(--lt-spacing-4) * 2.5);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    padding-inline-end: calc(var(--lt-spacing-6) + var(--lt-spacing-2));
    background-repeat: no-repeat;
    background-position: right var(--lt-spacing-2) center;
    background-size: 0.95rem 0.95rem;
  }

  /* background-position has no logical variant, so the direction must be
     flipped by hand. Everything else here is logical properties, which flip
     by themselves. */
  .lt-input[data-variant="date"]:dir(rtl),
  .lt-input[data-variant="time"]:dir(rtl),
  .lt-input[data-variant="datetime-local"]:dir(rtl) {
    background-position: left var(--lt-spacing-2) center;
  }

  .lt-input[data-variant="date"],
  .lt-input[data-variant="datetime-local"] {
    background-image: var(--lt-icon-calendar);
  }

  .lt-input[data-variant="time"] {
    background-image: var(--lt-icon-clock);
  }

  .lt-input[data-variant="date"]::-webkit-calendar-picker-indicator,
  .lt-input[data-variant="time"]::-webkit-calendar-picker-indicator,
  .lt-input[data-variant="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset-inline-end: var(--lt-spacing-2);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    width: var(--lt-spacing-6);
    height: var(--lt-spacing-6);
    min-width: var(--lt-spacing-6);
    min-height: var(--lt-spacing-6);
    cursor: pointer;
  }

  /* iOS Safari: with the native appearance, a date or time field stood wider
     than its container. Without it, the field fits.
     Undocumented: on 2026-11-01, CSS.supports("-webkit-touch-callout", "none")
     was false in Playwright's Chromium, Firefox and WebKit on macOS, also with
     iPhone emulation, and this rule applied in Safari on an iPhone. A WebKit
     build with touch events elsewhere may match it too. */
  @supports (-webkit-touch-callout: none) {
    .lt-input[data-variant="date"],
    .lt-input[data-variant="time"],
    .lt-input[data-variant="datetime-local"] {
      -webkit-appearance: none;
      appearance: none;
    }

    .lt-input[data-variant="date"]::-webkit-date-and-time-value,
    .lt-input[data-variant="time"]::-webkit-date-and-time-value,
    .lt-input[data-variant="datetime-local"]::-webkit-date-and-time-value {
      text-align: start;
    }
  }

  /* High contrast: the icon is painted into the image with a fixed colour,
     and can become invisible in a dark theme. The browser's own button is
     hidden behind our icon, and is brought back here. */
  @media (forced-colors: active) {
    .lt-input[data-variant="date"],
    .lt-input[data-variant="time"],
    .lt-input[data-variant="datetime-local"] {
      background-image: none;
    }

    .lt-input[data-variant="date"]::-webkit-calendar-picker-indicator,
    .lt-input[data-variant="time"]::-webkit-calendar-picker-indicator,
    .lt-input[data-variant="datetime-local"]::-webkit-calendar-picker-indicator {
      opacity: 1;
    }
  }
}