@layer components {
  .record-id {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
  }

  .record-id:hover {
    color: var(--primary-700);
  }

  .record-id .svg-icon {
    margin-right: 0;
  }

  .record-id--mono {
    font-family: var(--font-family-monospace);
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  @media (max-width: 768px) {
    .record-id--pill {
      padding: 0.125rem 0.375rem;
      background-color: var(--neutral-50);
      border: 1px solid var(--color-border-dark);
      border-radius: 999px;
      overflow: hidden;
    }
  }
}