@layer components {
  .list {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-4);
  }

  .list-row {
    background-color: var(--item-background, transparent);
    border: 1px solid var(--item-border-color, var(--color-border));
    border-radius: var(--rounded-lg);
    font-size: var(--text-sm);
    padding: var(--size-4);
  }

  .list-row--muted {
    --item-background: rgb(from var(--color-border-light) r g b / .5);
  }

  .list-row--borderless {
    --item-border-color: transparent;
  }

  .list-row--link:hover {
    --item-background: rgb(from var(--color-border-light) r g b / .5);
  }

  .list-row--link:focus-visible {
    outline: 2px solid var(--color-selected-dark);
  }

  .list-row--check:has(:checked) {
    --item-background: rgb(from var(--color-border-light) r g b / .5);
    --item-border-color: var(--color-primary);
  }

  .record-list {
    border-block-start: 1px solid var(--color-border);
  }

  .record-list__item {
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--size-5);
  }

  .record-list__item--compact {
    padding-block: var(--size-3);
  }

  .metadata-list {
    dt {
      color: var(--color-text-subtle);
      font-size: var(--text-xs);
      margin-block-end: var(--size-1);
    }

    dd {
      line-height: var(--leading-none);
      margin: 0;
    }
  }

  .data-list {
    border-block-start: 1px solid var(--color-border);
  }

  .data-row {
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-sm);
    padding-block: var(--size-3);
  }

  turbo-frame[data-collapse-empty]:empty {
    display: none;
  }
}