@cbpds/web-components/dist/collection/components/cbp-notice/cbp-notice.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
 * @prop --cbp-list-padding: var(--cbp-space-4x);
*/
:root {
  --cbp-notice-color-text: var(--cbp-color-text-darkest);
  --cbp-notice-color-text-dark: var(--cbp-color-text-lightest);
  --cbp-notice-color-title: var(--cbp-color-text-darker);
  --cbp-notice-color-title-dark: var(--cbp-color-text-lighter);
  --cbp-notice-color-background: var(--cbp-color-info-lighter);
  --cbp-notice-color-background-dark: var(--cbp-color-info-dark);
  --cbp-notice-color-border: var(--cbp-color-info-base);
  --cbp-notice-color-border-dark: var(--cbp-color-info-light);
}

[data-cbp-theme=light] cbp-notice[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-notice:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-notice-color-text: var(--cbp-notice-color-text-dark);
  --cbp-notice-color-title: var(--cbp-notice-color-title-dark);
  --cbp-notice-color-background: var(--cbp-notice-color-background-dark);
  --cbp-notice-color-border: var(--cbp-notice-color-border-dark);
}

cbp-notice {
  display: block;
  background-color: var(--cbp-notice-color-background);
  border-left: var(--cbp-space-2x) solid var(--cbp-notice-color-border);
  border-radius: var(--cbp-border-radius-softer);
  color: var(--cbp-notice-color-text);
  padding: var(--cbp-space-3x);
}
cbp-notice [slot=cbp-notice-title] {
  --cbp-icon-size: var(--cbp-space-5x);
  display: inline-block;
  margin-block-end: var(--cbp-space-2x);
}
cbp-notice [slot=cbp-notice-title] * {
  font-weight: var(--cbp-font-weight-bold);
  color: var(--cbp-notice-color-title);
  margin-bottom: 0;
}
cbp-notice[color=success] {
  --cbp-notice-color-background: var(--cbp-color-success-lighter);
  --cbp-notice-color-background-dark: var(--cbp-color-success-dark);
  --cbp-notice-color-border: var(--cbp-color-success-base);
  --cbp-notice-color-border-dark: var(--cbp-color-success-light);
}
cbp-notice[color=warning] {
  --cbp-notice-color-background: var(--cbp-color-warning-lighter);
  --cbp-notice-color-background-dark: var(--cbp-color-warning-darker);
  --cbp-notice-color-border: var(--cbp-color-warning-base);
  --cbp-notice-color-border-dark: var(--cbp-color-warning-base);
}
cbp-notice[color=danger] {
  --cbp-notice-color-background: var(--cbp-color-danger-lighter);
  --cbp-notice-color-background-dark: var(--cbp-color-danger-dark);
  --cbp-notice-color-border: var(--cbp-color-danger-base);
  --cbp-notice-color-border-dark: var(--cbp-color-danger-light);
}