@layer components {
  .import-status {
    --import-status-border-color: var(--color-ink-light);
    --import-status-color: var(--color-ink);

    border: 1px dashed var(--import-status-border-color);
    border-radius: 1ch;
    color: var(--import-status-color);
    font-size: var(--text-medium);
    padding: 1.5ch;
  }

  .import-status--success {
    --import-status-border-color: var(--color-positive);
    --import-status-color: var(--color-positive);
  }

  .import-status--error {
    --import-status-border-color: var(--color-negative);
    --import-status-color: var(--color-negative);
  }

  .import-status--alert {
    --import-status-border-color: var(--color-alert);
    --import-status-color: var(--color-alert);
  }
}