/*
 * THE SEGMENTED DATE EDITOR — one spinbutton per locale field, with the locale's separators.
 * Segments size to what they hold, so width follows locale order. No segment rings itself: the
 * frame wears one ring for the group (`date_field.css`, `docs/accessibility.md`).
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-date-segments-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  .lotics-date-segments-field__segment {
    margin: 0;
    padding: 0;
    border: 0 solid 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-variant-numeric: var(--lotics-font-numeric);
    text-align: center;
    appearance: none;
    cursor: text;
    /* The group is one control, so the frame owns the ring. */
    outline: none;
  }

  .lotics-date-segments-field__segment::placeholder {
    color: var(--lotics-ink-placeholder);
  }

  .lotics-date-segments-field__segment:disabled {
    color: var(--lotics-ink-inactive);
  }

  /* The format's literals, in the segments' type so the value reads as one run at either width. */
  .lotics-date-segments-field__separator {
    flex-shrink: 0;
    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);
    font-weight: var(--lotics-input-weight);
    white-space: pre;
  }

  /*
   * Widths in `ch` at the type they hold, since the input rung grows on a phone and a pixel width
   * cut "2026" at 16px. The year is the pair's box plus two tabular figures, so every run sits the
   * same air off its separators.
   */
  .lotics-date-segments-field__segment[data-width="two"] {
    width: 1.875em;
  }

  .lotics-date-segments-field__segment[data-width="four"] {
    width: calc(1.875em + 2ch);
  }

  .lotics-date-segments-field__segment[data-width="period"] {
    width: 2em;
  }
}