:root {
  .primary {
    --element-bg: var(--background-primary);
    --element-text: var(--text-primary-inverse);
    --element-border-color: var(--border-primary-inverse);
    --element-border: var(--border-xs) solid var(--element-border-color);
  }

  .primary-soft {
    --element-bg: var(--background-primary-soft);
    --element-text: var(--text-neutral);
    --element-border-color: var(--border-neutral);
    --element-border: var(--border-xs) solid var(--element-border-color);
  }

  .secondary {
    --element-bg: var(--background-secondary);
    --element-text: var(--text-secondary-inverse);
    --element-border-color: var(--border-secondary-inverse);
    /* special case */
    --element-border: var(--border-xs) solid var(--background-secondary);
    &:focus,
    &:focus-visible {
      --element-border: var(--border-xs) solid var(--element-border-color);
    }
  }

  .secondary-soft {
    --element-bg: var(--background-secondary-soft);
    --element-text: var(--text-neutral);
    --element-border-color: var(--border-neutral);
    --element-border: var(--border-xs) solid var(--element-border-color);
  }

  .neutral {
    --element-bg: var(--background-neutral);
    --element-text: var(--text-neutral);
    --element-border-color: var(--border-neutral);
    --element-border: var(--border-xs) solid var(--element-border-color);
  }
}