@layer components {
  .record {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .record__meta {
    font: var(--type-caption);
    color: var(--color-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .record__files,
  .record__people {
    display: flex;
    flex-direction: column;
  }

  .record__roster {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .record__roster > .button {
    align-self: start;
  }

  .record__url {
    --icon-size: var(--input-icon-size);

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    font: var(--type-body);
    color: var(--color-link);
    overflow-wrap: anywhere;
  }

  .record__edit {
    align-self: start;
  }

  .record__description {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }
}