@layer blocks {
  .notice {
    --repel-gap: var(--notice-gap);
    font-family: var(--notice-font-family);
    font-size: var(--notice-font-size);
    letter-spacing: var(--notice-letter-spacing);
    padding: var(--notice-padding);
    border-radius: var(--notice-border-radius);
    border: var(--stroke-m) var(--border-style) var(--notice-border-color);
    background: var(--notice-background-color);
    color: var(--notice-color);
  }

  .notice[data-variant="warning"] {
    --notice-background-color: var(--color-danger-tint);
    --notice-border-color: var(--color-danger);
    --notice-color: var(--color-danger);
  }

  .notice[data-variant="success"] {
    --notice-background-color: var(--color-accent-tint);
    --notice-border-color: var(--color-accent);
    --notice-color: var(--color-accent);
  }
}