:root {
  --spacing-unit: 0.5rem;
  --control-radius: 4px;
  --primary-color: #0f508d;
  --border-color: #6397c7;
  --secondary-color: #d80cc7;
  --danger-color: #dc0505;
}

body {
  margin: 16px;
  padding: 0;
  background-color: #e3e3e3;
  font-family: Arial, Helvetica, sans-serif;
}

.btn {
  appearance: none;
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
  border-radius: var(--control-radius);
  background-color: transparent;
  font-size: 0.92em;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background-color: transparent;
}

.btn--secondary {
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  background-color: transparent;
}

.btn--danger {
  border: 1px solid var(--danger-color);
  color: var(--danger-color);
  background-color: transparent;
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.btn--secondary:hover {
  background: color-mix(in srgb, var(--granted-color) 12%, transparent);
}

.btn--danger:hover {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
}

.border {
  border: 1px solid var(--border-color);
  opacity: 0.6;
  margin: 32px 0;
}

.guard-list {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.my-class {
  font-family: 'Courier New', Courier, monospace;
  font-size: 2rem;
  font-weight: 600;
  color: red;
}

consent-dialog:not(:defined) [slot] {
  display: none;
}

/* consent-missing:not([active]) {
      display: none;
} */

/* consent-guard:not([active]) {
      display: none;
} */