/* The shell paints the field and holds the focus ring via `:focus-within`, once however many elements sit
   inside (§2.3). A fixed height, not a floor: at 16px the input rung leads 26, and a 40px control would
   grow to 42. The padding is what a control's height leaves one line inside its border, so a growing
   field's first line sits where every control's words sit and one line of it is a control's height. A
   line budget is that times the rung's leading at this width (`constitution.md` §10); a growing field
   takes the taller of that and its content plus padding and border (`border-box`). */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-text-input {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
    --lotics-text-input-floor: var(--lotics-control-height);
    --lotics-text-input-pad: calc((var(--lotics-control-height) - 2px - var(--lotics-input-leading)) / 2);
    height: var(--lotics-text-input-floor);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    border-radius: var(--lotics-radius-control);
    /* Raised on any ground: a transparent field on a tinted panel stops reading as one. */
    background-color: var(--card);
    transition-property: border-color, outline-color;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  /* The lines, the input's `padding-block` both sides, and the border. */
  .lotics-text-input[data-lines] {
    --lotics-text-input-floor: calc(
      var(--lotics-input-leading) * var(--lotics-text-input-lines) + 2 * var(--lotics-text-input-pad) + 2px
    );
  }

  /* A literal, not a property: `inline_value.test.tsx` measures the declaration and cannot resolve a
     `var()`. */
  .lotics-text-input[data-grow] {
    height: max(
      var(--lotics-text-input-floor),
      calc(var(--lotics-text-input-content) + 2 * var(--lotics-text-input-pad) + 2px)
    );
  }

  .lotics-text-input__input {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    margin: 0;
    padding-block: var(--lotics-text-input-pad);
    padding-inline: var(--lotics-space-8);
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--lotics-ink-default);
    font-family: var(--font-sans);
    font-size: var(--lotics-input-text);
    line-height: var(--lotics-input-leading);
    letter-spacing: var(--lotics-input-tracking);
    font-weight: var(--lotics-input-weight);
    appearance: none;
    /* The shell owns the ring. */
    outline-style: none;
    /* A drag handle would fight the auto-grow measurement. */
    resize: none;
    cursor: text;
  }

  .lotics-text-input__input::placeholder {
    color: var(--lotics-ink-placeholder);
    /* Firefox dims a placeholder by default; the ink role already is the dim. */
    opacity: 1;
  }

  /* Hover is a darker edge, focus the ring, and only those. */
  .lotics-text-input:not([data-disabled]):hover {
    border-color: var(--lotics-border-hover);
  }

  /* The host paints the surface and owns the inset. `border-width: 0`, since a transparent border still
     occupies its pixel. */
  .lotics-text-input[data-seamless] {
    border-width: 0;
    background-color: transparent;
  }

  .lotics-text-input__input[data-seamless] {
    padding-inline: 0;
  }

  /* The host owns the height too: a fixed rung inside its border overflows by the border given up, so one
     line fills the host instead (`date_field.css`). */
  .lotics-text-input[data-seamless]:not([data-multiline]) {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .lotics-text-input__input[data-seamless]:not([data-multiline]) {
    padding-block: 0;
  }

  /* Family only: the input rung keeps the field on the band and stops iOS zooming it. */
  .lotics-text-input__input[data-font="mono"] {
    font-family: var(--font-mono);
  }

  .lotics-text-input__input[data-reading="struck"] {
    color: var(--lotics-ink-muted);
    text-decoration-line: line-through;
  }

  .lotics-text-input__input[data-reading="link"] {
    color: var(--lotics-accent);
    font-weight: var(--lotics-weight-medium);
    text-decoration-line: underline;
  }

  .lotics-text-input:focus-within {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: 0;
  }

  /* The ring stands down while focus is on the ✕, which wears its own (§2.3). */
  .lotics-text-input:has(.lotics-text-input__clear:focus-within) {
    outline-style: none;
  }

  .lotics-text-input[data-seamless]:focus-within {
    outline-style: none;
  }

  .lotics-text-input[data-disabled] {
    opacity: var(--lotics-disabled-opacity);
  }

  .lotics-text-input__input[data-disabled] {
    cursor: default;
  }

  /* At the first line, so a multiline field's icon stays beside the line it annotates. */
  .lotics-text-input__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    width: 20px;
    height: 20px;
    margin-block-start: var(--lotics-space-8);
    margin-inline-start: var(--lotics-space-8);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  .lotics-text-input__input[data-icon] {
    padding-inline-start: var(--lotics-space-6);
  }

  /* A PASTED LIST'S TOKEN: its count on the muted ground, where the words would start, the caret after it; the ✕
     at the box's end lets it go. */
  .lotics-text-input__token {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
    margin-inline-start: var(--lotics-space-6);
    padding-block: var(--lotics-space-2);
    padding-inline: var(--lotics-space-8);
    border-radius: var(--lotics-radius-control);
    background-color: var(--muted);
    color: var(--lotics-ink-default);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    white-space: nowrap;
    outline-style: none;
  }

  .lotics-text-input__token:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
  }

  /* Pinned to the top, so the ✕ stays at the first line of a grown field. */
  .lotics-text-input__clear {
    display: flex;
    flex-shrink: 0;
    align-self: flex-start;
    margin-block-start: var(--lotics-control-pad-y);
    margin-inline-end: var(--lotics-space-6);
  }

  /* The button's own padding is the gap. */
  .lotics-text-input__input[data-clear] {
    padding-inline-end: 0;
  }

  .lotics-text-input__shortcut {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
    margin-inline-end: var(--lotics-space-12);
  }

  .lotics-text-input__input[data-shortcut] {
    padding-inline-end: 0;
  }
}