@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/button/button.css';
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/chip/chip.css';
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/copy-button/copy-button.css';

@layer cinder.components {
  /* ========================================
 * DESCRIPTION LIST
 * ======================================== */

  .cinder-description-list {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* Reset UA default margin-inline-start on <dd> (~40px in most browsers). */
  .cinder-description-list dt,
  .cinder-description-list dd {
    margin: 0;
  }

  .cinder-description-list__row {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    padding: var(--cinder-space-2) var(--cinder-space-3);
  }

  .cinder-description-list[data-cinder-variant='default']
    .cinder-description-list__row:not(:first-child) {
    border-block-start: 1px solid var(--cinder-border-muted);
  }

  /* <dd> hosts both definition and optional actions. */
  .cinder-description-list dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cinder-space-2);
  }

  .cinder-description-list__definition {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cinder-description-list__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
  }

  /* Striped variant: odd rows get a subtle background. */
  .cinder-description-list[data-cinder-variant='striped']
    .cinder-description-list__row:nth-child(odd) {
    background: var(--cinder-surface-inset);
  }

  /* Two-column variant: term and definition share a row. */
  .cinder-description-list[data-cinder-variant='two-column'] {
    container-type: inline-size;
  }

  .cinder-description-list[data-cinder-variant='two-column'] .cinder-description-list__row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 3fr;
    align-items: baseline;
    gap: var(--cinder-space-3);
  }

  @supports (grid-template-columns: subgrid) {
    .cinder-description-list[data-cinder-variant='two-column'] {
      display: grid;
      grid-template-columns: minmax(8rem, 1fr) 3fr;
    }

    .cinder-description-list[data-cinder-variant='two-column'] .cinder-description-list__row {
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }
  }

  /* The term is the quiet side of the pair: muted, so the value carries the row.
   * There are no row dividers in this variant (only the default variant draws them). */
  .cinder-description-list[data-cinder-variant='two-column'] dt {
    color: var(--cinder-text-muted);
  }

  /* Collapse two-column to stacked at narrow container widths. */
  @container (max-width: 28rem) {
    .cinder-description-list[data-cinder-variant='two-column'] .cinder-description-list__row {
      grid-template-columns: 1fr;
    }
  }

  /* `stack` puts the term above its value at every width. Only two-column
   * places them side by side, so only its rows need the override; the
   * subgrid track list collapses with them. */
  .cinder-description-list[data-cinder-variant='two-column'][data-cinder-stacked] {
    grid-template-columns: 1fr;
  }

  .cinder-description-list[data-cinder-variant='two-column'][data-cinder-stacked]
    .cinder-description-list__row {
    grid-template-columns: 1fr;
    gap: var(--cinder-space-1);
  }

  /* Narrow variant: <dt> is sr-only (position: absolute, out-of-flow) so <dd>
 * fills the visible row. flex-direction: row here matches the intended reading
 * direction if a future variant needs the dt in-flow; for now the sr-only dt
 * has no layout footprint and the dd is visually full-width. */
  .cinder-description-list[data-cinder-variant='narrow'] .cinder-description-list__row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--cinder-space-2);
  }

  /* ----------------------------------------
   * Formatted values
   * ---------------------------------------- */

  .cinder-description-list__timestamp {
    font-variant-numeric: tabular-nums;
    /* A dotted underline marks text that carries a hover title. */
    text-decoration: underline dotted var(--cinder-text-muted);
    text-underline-offset: 0.25em;
    cursor: help;
  }

  .cinder-description-list__identifier-group {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
  }

  .cinder-description-list__identifier {
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-default);
  }

  /* The copy action is a quiet glyph here, not a bordered button. */
  .cinder-description-list__identifier-group .cinder-copy-button {
    border-color: transparent;
    padding: var(--cinder-space-1);
  }

  .cinder-description-list__tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  .cinder-description-list__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cinder-description-list__system-tags,
  .cinder-description-list__empty {
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-muted);
  }
}