@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * GROUPED LIST
 *
 * An inset group: one rounded surface holding the rows, separators that start at the text, and
 * a header and footer outside the surface. The group carries tone, not a border; the separators
 * are drawn by the rows. Parts are styled by class, so nothing a consumer interpolates into a
 * row is restyled.
 * ======================================== */

  .cinder-grouped-list {
    display: block;
    min-inline-size: 0;
  }

  .cinder-grouped-list__header,
  .cinder-grouped-list__footer {
    margin: 0;
    padding-inline: var(--cinder-space-4);
    font-size: var(--cinder-text-sm);
    color: var(--cinder-text-muted);
  }

  .cinder-grouped-list__header {
    margin-block-end: var(--cinder-space-2);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-grouped-list__footer {
    margin-block-start: var(--cinder-space-2);
  }

  .cinder-grouped-list__group {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border-radius: var(--cinder-radius-surface);
    background: var(--cinder-surface-raised);
  }

  @media (forced-colors: active) {
    .cinder-grouped-list__group {
      border: 1px solid CanvasText;
    }
  }

  /* ----------------------------------------
 * Quick-add first row
 * ---------------------------------------- */

  .cinder-grouped-list__add {
    margin: 0;
    padding-inline-start: var(--cinder-space-4);
    list-style: none;
  }

  .cinder-grouped-list__add-form {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-3);
    min-block-size: 2.75rem;
    margin: 0;
    padding-inline-end: var(--cinder-space-4);
    border-block-end: 1px solid var(--cinder-border-faint);
  }

  .cinder-grouped-list__add:last-child > .cinder-grouped-list__add-form {
    border-block-end-color: transparent;
  }

  .cinder-grouped-list__add-glyph {
    display: inline-flex;
    flex: none;
    color: var(--cinder-accent-text);
  }

  .cinder-grouped-list__add-input {
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cinder-text-default);
    font: inherit;
  }

  .cinder-grouped-list__add-input::placeholder {
    color: var(--cinder-text-muted);
  }

  .cinder-grouped-list__add-input:focus-visible {
    outline: none;
  }

  /* The ring wraps the whole row, inside the group, because the group clips. */
  .cinder-grouped-list__add:has(.cinder-grouped-list__add-input:focus-visible) {
    box-shadow: inset 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
  }

  @media (forced-colors: active) {
    .cinder-grouped-list__add:has(.cinder-grouped-list__add-input:focus-visible) {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(var(--cinder-ring-width) * -1);
    }
  }
}