/* The bare box is a text field's surface: root carries edge, ground and ring (§2.3), the input the digits.
   A `stepper` spends no surface: the discs are the edges. 32 is a disc between `IconButton`'s `md` and
   `lg`; 56 fits a four-digit figure without shoving the +. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-number-input {
    display: flex;
    flex-direction: row;
    min-width: 0;
  }


  .lotics-number-input:not([data-stepper]) {
    align-items: stretch;
    height: var(--lotics-control-height);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    transition-property: border-color, outline-color;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-number-input:not([data-stepper]):not([data-disabled]):hover {
    border-color: var(--lotics-border-hover);
  }

  /* The host paints the surface and owns the inset. */
  .lotics-number-input:not([data-stepper])[data-seamless] {
    border-width: 0;
    background-color: transparent;
  }

  .lotics-number-input:not([data-stepper]):focus-within {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: 0;
  }

  .lotics-number-input:not([data-stepper])[data-seamless]:focus-within {
    outline-style: none;
  }

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


  .lotics-number-input[data-stepper] {
    align-items: center;
    align-self: flex-start;
    gap: var(--lotics-space-16);
  }

  /* The field gives way, since a squeezed disc is unhittable. */
  .lotics-number-input__decrement,
  .lotics-number-input__increment {
    flex-shrink: 0;
    --lotics-icon-button-size: 32px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  /* The figure takes the slot, so the stepper is 152 wide; `flex: 1` would hand it the input's ~20ch. */
  .lotics-number-input[data-stepper] .lotics-number-input__input {
    flex: 0 0 auto;
    width: 56px;
    padding-inline: 0;
    font-weight: var(--lotics-weight-medium);
    text-align: center;
  }


  .lotics-number-input__input {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    margin: 0;
    padding-block: 0;
    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-weight-regular);
    appearance: none;
    /* The shell owns the ring. */
    outline-style: none;
    cursor: text;
  }

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

  /* On the input, since the figure is its text reading or typing. The stepper's centred rule is one class
     deeper. */
  .lotics-number-input__input[data-align="right"] {
    text-align: right;
  }

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

  /* Sized for the figure it takes, a digit's width a character, its inset beside them. */
  .lotics-number-input__input[data-digits] {
    box-sizing: content-box;
    width: calc(var(--lotics-number-input-digits) * 1ch);
  }

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

  /* A UNIT stands inside the box after the figure, a word's space from it, as money's code does: the figure and
     its unit read as one phrase, the unit in the quiet ink since the field's label already says what it is. */
  .lotics-number-input__input:has(+ .lotics-number-input__unit) {
    padding-inline-end: var(--lotics-space-4);
  }

  .lotics-number-input__unit {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    padding-inline-end: var(--lotics-space-8);
    color: var(--lotics-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--lotics-input-text);
    line-height: var(--lotics-input-leading);
    letter-spacing: var(--lotics-input-tracking);
    user-select: none;
  }

  .lotics-number-input__unit[data-seamless] {
    padding-inline-end: 0;
  }
}