/*
 * Data List Component
 * Key-value lists and item lists for admin views
 */

@layer components {
  /* Key-value data list */
  .data-list {
    border: var(--border-standard);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .data-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--block-space);
    border-bottom: var(--border-subtle);

    &:last-child {
      border-bottom: none;
    }
  }

  .data-list__label {
    color: var(--color-gray-darker);
  }

  .data-list__value {
    color: var(--color-gray-dark);
  }

  /* Admin-density overrides */
  body.full .data-list__item {
    padding: var(--block-space-3quarter) var(--block-space);
  }
}