@layer components {
  .export {
    max-inline-size: 36rem;
    margin-inline: auto;
    padding-block: var(--block-space-double);
    padding-inline: var(--inline-space);
  }

  .export__heading {
    font-size: var(--text-large);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .export__description {
    color: var(--color-ink-secondary);
    margin-block-end: var(--block-space-double);
  }

  .export__options {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .export__group {
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--block-space) var(--inline-space-double);
  }

  .export__legend {
    font-weight: 600;
    font-size: var(--text-medium);
  }

  .export__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    margin-block-end: var(--block-space);
  }

  .export__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
  }

  .export__back {
    margin-block-start: var(--block-space-double);
  }
}