@layer components {
  .notice {
    padding: var(--block-space);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-canvas);
  }

  .notice--info {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
  }

  .notice--warning {
    background: var(--color-warning-soft, #fef3cd);
    border-color: var(--color-warning);
  }

  .notice--success {
    background: var(--color-positive-soft);
    border-color: var(--color-positive);
  }

  .notice--error {
    background: var(--color-negative-soft);
    border-color: var(--color-negative);
  }
}