.notice {
  display: block;
  padding: var(--hs-spacing-large);
  border-radius: var(--hs-radius-boxes);
}

.notice--color-primary {
  background-color: var(--hs-palette-primary-main);
  color: var(--hs-palette-primary-contrast);
}

.notice--color-secondary {
  background-color: var(--hs-palette-secondary-main);
  color: var(--hs-palette-secondary-contrast);
}

.notice--color-error {
  background-color: var(--hs-palette-error-main);
  color: var(--hs-palette-error-contrast);
}

.notice--color-error-light {
  background-color: color-mix(in srgb, var(--hs-palette-error-main), transparent 80%);
  color: var(--hs-palette-text);
}

.notice--color-success {
  background-color: var(--hs-palette-success-contrast);
  color: var(--hs-palette-success-main);
}

.notice--color-success-light {
  background-color: color-mix(in srgb, var(--hs-palette-success-contrast), transparent 80%);
  color: var(--hs-palette-text);
}

.notice--color-action {
  background-color: var(--hs-palette-action-main);
  color: var(--hs-palette-action-contrast);
}

.notice--color-action-light {
  background-color: color-mix(in srgb, var(--hs-palette-action-main), transparent 80%);
  color: var(--hs-palette-text);
}

.notice--color-warning {
  background-color: var(--hs-palette-warning-main);
  color: var(--hs-palette-warning-contrast);
}

.notice--color-warning-light {
  background-color: color-mix(in srgb, var(--hs-palette-warning-main), transparent 80%);
  color: var(--hs-palette-text);
}