html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

.app-badge {
  height: 3.5rem;
  width: auto;
}

.alert {
  border-radius: 1rem;
  border: 1px solid transparent;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
}

.alert-success {
  color: var(--color-success);
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
}

.alert-danger,
.alert-error {
  color: var(--color-destructive);
  background-color: color-mix(in srgb, var(--color-destructive) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 45%, transparent);
}

.alert-warning {
  color: var(--color-warning-text);
  background-color: var(--color-warning-tint);
  border-color: var(--color-warning-icon);
}

.alert-info,
.alert-notice {
  color: var(--color-link);
  background-color: color-mix(in srgb, var(--color-link) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-link) 45%, transparent);
}