@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * ATTEMPTS INDICATOR
 *
 * One segment per allowed attempt, filled for the attempts made. The bar is neutral by default
 * (the word beside it carries the outcome) and `accent` for a bar that is a progress cue itself.
 * ======================================== */

  .cinder-attempts-indicator {
    --_cinder-attempts-indicator-fill: var(--cinder-border-control);
    --_cinder-attempts-indicator-gap: var(--cinder-space-0-5);
    display: inline-flex;
    gap: var(--_cinder-attempts-indicator-gap);
    inline-size: 3.5rem; /* 56px */
    vertical-align: middle;
  }

  .cinder-attempts-indicator[data-cinder-layout='block'] {
    --_cinder-attempts-indicator-gap: var(--cinder-space-1);
    display: flex;
    inline-size: 100%;
  }

  .cinder-attempts-indicator[data-cinder-tone='accent'] {
    --_cinder-attempts-indicator-fill: var(--cinder-accent-solid);
  }

  .cinder-attempts-indicator__segment {
    flex: 1 1 0;
    min-inline-size: 0;
    block-size: 0.375rem; /* 6px */
    border-radius: 0.1875rem; /* 3px */
    background: var(--cinder-surface-inset);
  }

  .cinder-attempts-indicator__segment[data-cinder-filled] {
    background: var(--_cinder-attempts-indicator-fill);
  }

  /* Forced colors replace author colours: a filled segment is Highlight, an empty one an outline. */
  @media (forced-colors: active) {
    .cinder-attempts-indicator__segment {
      box-sizing: border-box;
      border: 1px solid GrayText;
      background: Canvas;
    }

    .cinder-attempts-indicator__segment[data-cinder-filled] {
      border-color: Highlight;
      background: Highlight;
    }
  }
}