/*
 * THE FIELD SURFACE — one box, one owner. The box belongs to the control and moves here only when
 * something rides beside it; hover is the border, never a wash. The field owns the one ring, on
 * `:focus-visible` in its slot; `:focus-within` would also ring it for a riding `InlineButton`
 * (§2.3).
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /*
   * An `<input>`'s intrinsic width does not shrink, and an edge-aligning parent would spill it
   * across a neighbour.
   */
  .lotics-field-surface {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
  }

  .lotics-field-surface__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    min-width: 0;
    min-height: var(--lotics-control-height);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    transition: border-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* A value nothing can change gives up the frame. */
  .lotics-field-surface__field[data-disabled],
  .lotics-field-surface__field[data-inert] {
    background-color: transparent;
    border-color: transparent;
  }

  /* Open reads as a focused input. */
  .lotics-field-surface__field[data-active] {
    border-color: var(--border);
    background-color: var(--card);
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--ring);
  }

  .lotics-field-surface__field:not([data-active]):not([data-disabled]):not([data-inert]):hover {
    border-color: var(--lotics-border-hover);
  }

  /* Keyed on the slot, so a riding verb takes its own ring (§2.3). */
  .lotics-field-surface__view:not([data-actions]):focus-visible,
  .lotics-field-surface__field[data-actions]:has(.lotics-field-surface__slot :focus-visible) {
    border-color: var(--border);
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--ring);
  }

  /* A `Chip` dismiss's air; the value runs flush up to them. */
  .lotics-field-surface__field[data-actions] {
    padding-right: var(--lotics-space-4);
  }

  /* Where the control draws none; on the trigger arm `view` carries it. */
  .lotics-field-surface__field[data-inset] {
    padding-left: var(--lotics-control-pad-x);
  }

  /* States every property, or a `<button>` takes the UA's border and ground. */
  .lotics-field-surface__view[data-actions] {
    padding-right: 0;
    border: 0 solid var(--border);
    border-radius: 0;
    background-color: transparent;
  }

  /* The verbs, at the widest they have drawn: one gone with its own press leaves its room. */
  .lotics-field-surface__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: none;
    gap: var(--lotics-space-6);
    min-inline-size: var(--lotics-field-surface-actions);
  }

  /* Takes the slack so verbs keep the right edge; the spinner positions against it. */
  .lotics-field-surface__slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    position: relative;
  }

  .lotics-field-surface__view {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    flex: 1;
    min-width: 0;
    align-self: stretch;
    margin: 0;
    padding-inline: var(--lotics-control-pad-x);
    padding-block: var(--lotics-control-pad-y);
    appearance: none;
    text-align: start;
    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);
    color: var(--lotics-ink-default);
    /* The arrow reads as inert and the I-beam promises a caret `user-select: none` denies. */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* The field paints the ring. */
    outline-style: none;
  }

  /* The cursor is half the press promise, so it goes too. */
  .lotics-field-surface__view[data-disabled],
  .lotics-field-surface__view[data-inert] {
    cursor: default;
  }

  /* A button's UA rule centres strings. */
  .lotics-field-surface__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    text-align: start;
  }

  /* Off the input rung at the current width, not the desktop pair. */
  .lotics-field-surface__field[data-lines] {
    align-items: flex-start;
    min-height: calc(
      var(--lotics-input-leading) * var(--lotics-field-surface-lines) + var(--lotics-space-16)
    );
  }

  .lotics-field-surface__view[data-lines] {
    align-items: flex-start;
    padding-block: var(--lotics-space-8);
  }

  /* Ink as the icon's own property, since an `Icon` `color` is inline and unbeatable. */
  .lotics-field-surface__trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  .lotics-field-surface__field:not([data-disabled]):not([data-inert]):hover
    .lotics-field-surface__trailing,
  .lotics-field-surface__field:not([data-disabled]):not([data-inert]):focus-within
    .lotics-field-surface__trailing {
    --lotics-icon-color: var(--lotics-ink-default);
  }

  /* The width comes from the column; an `<input>` would spill. */
  .lotics-field-surface__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lotics-space-6);
    align-self: stretch;
    min-width: 0;
  }

  .lotics-field-surface__control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    position: relative;
  }

  /* Never pushes or resizes the control. */
  .lotics-field-surface__saving {
    position: absolute;
    right: var(--lotics-control-pad-x);
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
  }

  .lotics-field-surface__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* A squeezed commit control is a target nobody can hit. */
    flex-shrink: 0;
    gap: var(--lotics-space-6);
    height: var(--lotics-control-height);
  }

  .lotics-field-surface__error {
    margin-top: var(--lotics-space-4);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-danger);
  }
}