/*
 * THE SEGMENTED DATE EDITOR — one spinbutton per locale field, with the
 * separators the locale writes between them.
 *
 * Each segment is sized by what it HOLDS (two digits, four, a period name), so
 * the group's width follows the locale's own order rather than a grid this sheet
 * would have to guess. No segment paints a focus ring of its own: the frame
 * around them wears ONE ring for the whole group (`date_field.css`), which is
 * the composite-control rule in `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);
    text-align: center;
    appearance: none;
    cursor: text;
    /* The ring belongs to the frame: two of them on one control read as two
       controls, and the group is one. */
    outline: none;
  }

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

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

  /* Two digits, four, and a period name — the three widths a locale's fields
     come in, each the size of what it holds. */
  .lotics-date-segments-field__segment[data-width="two"] {
    width: 26px;
  }

  .lotics-date-segments-field__segment[data-width="four"] {
    width: 38px;
  }

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