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

.notice--color-default {
  --hs-notice-color: var(--hs-palette-highlight-default-main);
  --hs-notice-color-contrast: var(--hs-palette-highlight-default-contrast);
  --hs-notice-color-accent: var(--hs-palette-highlight-default-accent);
}

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

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

.notice--color-info {
  --hs-notice-color: var(--hs-palette-highlight-info-main);
  --hs-notice-color-contrast: var(--hs-palette-highlight-info-contrast);
  --hs-notice-color-accent: var(--hs-palette-highlight-info-accent);
}

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

.notice--variant-contained {
  background-color: var(--hs-notice-color);
  border: 1px solid var(--hs-notice-color);
  color: var(--hs-notice-color-contrast);
}

.notice--variant-outlined {
  background-color: var(--hs-palette-background);
  border: 1px solid var(--hs-notice-color-accent);
  color: var(--hs-notice-color-accent);
}