:root {
  /* Font */
  --font-size-scale-up-01: 16.8px;
  --font-weight-semi-bold: 600;
  /* Spacing */
  --spacing-scale-3x: 24px;
  /* Colors */
  --color-dark: var(--pure-0);
  --color-dark-rgb: var(--pure-0-rgb);
  --interactive: var(--interactive-light);
  --interactive-light: var(--blue-warm-vivid-70);
  --blue-warm-vivid-70: #1351b4;
  --pure-0: #fff;
  --pure-0-rgb: 255, 255, 255;
  --background: var(--background-light);
  --background-light: var(--pure-0);
}

.br-button {
  --button-radius: 100em;
  --button-medium: 40px;
  --button-size: var(--button-medium);
  align-items: center;
  background-color: transparent;
  border: 0;
  border-radius: var(--button-radius);
  color: var(--interactive);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-semi-bold);
  height: var(--button-size);
  justify-content: center;
  overflow: hidden;
  padding: 0 var(--spacing-scale-3x);
  position: relative;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  text-decoration: none !important;
}
.br-button.primary {
  --interactive-rgb: var(--color-dark-rgb);
  background-color: var(--interactive-light);
  color: var(--color-dark);
}
.br-button.secondary {
  background-color: var(--background-light);
  border: 1px solid var(--interactive);
}