// Definition list component - Accessible description lists
// Used for key-value pairs and term-description relationships

/**
 * @section Definition List Base
 */

/** @public Definition list container */
.dl {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;

  // Term + Description pair container
  /** @public Definition list item pair */
  .dl-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  // Term styling
  /** @public Definition term */
  .dl-term {
    font-weight: var(--font-medium);
    color: hsl(var(--foreground));
    font-size: var(--text-sm);
  }

  // Description styling
  /** @public Definition description */
  .dl-desc {
    color: hsl(var(--muted-foreground));
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }
}

/**
 * @section Definition List Variants
 */

/** @public Horizontal layout - side-by-side (term 25% width, right-aligned) */
.dl-horizontal {
  .dl-item {
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-4);

    .dl-term {
      flex: 0 0 25%; // Fixed width for terms
      text-align: right;
    }

    .dl-desc {
      flex: 1;
    }
  }
}

/** @public Compact spacing for dense information */
.dl-compact {
  gap: var(--spacing-2);

  .dl-item {
    gap: var(--spacing-0-5);
  }
}

// Dark mode adjustments
/** @public Dark mode definition list styles */
.dark {
  .dl {
    .dl-term {
      color: hsl(var(--foreground));
    }

    .dl-desc {
      color: hsl(var(--muted-foreground));
    }
  }
}