@cbpds/web-components/dist/collection/components/cbp-toast/cbp-toast.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-toast-color-bg: var(--cbp-color-info-dark);
* @prop   --cbp-toast-color-bg-dark: var(--cbp-color-info-lighter);
* @prop   --cbp-toast-color: var(--cbp-color-text-lighter);
* @prop   --cbp-toast-color-dark: var(--cbp-color-text-darker);
* @prop   --cbp-toast-color-content: var(--cbp-color-text-lighter);
* @prop   --cbp-toast-color-content-dark: var(--cbp-color-text-darkest);
* @prop   --cbp-toast-color-bg-sidebar: var(--cbp-color-info-darker);
* @prop   --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-info-light);
* @prop   --cbp-toast-color-icon-sidebar: var(--cbp-color-text-light);
* @prop   --cbp-toast-color-icon-sidebar-dark: var(--cbp-color-text-darker);
*/
:root {
  --cbp-toast-color-bg: var(--cbp-color-info-dark);
  --cbp-toast-color-bg-dark: var(--cbp-color-info-lighter);
  --cbp-toast-color: var(--cbp-color-text-lighter);
  --cbp-toast-color-dark: var(--cbp-color-text-darker);
  --cbp-toast-color-content: var(--cbp-color-text-lightest);
  --cbp-toast-color-content-dark: var(--cbp-color-text-darkest);
  --cbp-toast-color-bg-sidebar: var(--cbp-color-info-darker);
  --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-info-light);
  --cbp-toast-color-icon-sidebar: var(--cbp-color-text-light);
  --cbp-toast-color-icon-sidebar-dark: var(--cbp-color-text-darker);
}

[data-cbp-theme=light] cbp-toast[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-toast:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-toast-color-bg: var(--cbp-toast-color-bg-dark);
  --cbp-toast-color: var(--cbp-toast-color-dark);
  --cbp-toast-color-content: var(--cbp-toast-color-content-dark);
  --cbp-toast-color-bg-sidebar: var(--cbp-toast-color-bg-sidebar-dark);
  --cbp-toast-color-icon-sidebar: var(--cbp-toast-color-icon-sidebar-dark);
}

@keyframes show {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
}
@keyframes dismiss {
  99% {
    transform: translateX(200%);
  }
  100% {
    visibility: hidden;
  }
}
cbp-toast {
  display: flex;
  margin-inline-start: auto;
  margin-block-end: var(--cbp-space-6x);
  width: min(100%, 30rem);
  background-color: var(--cbp-toast-color-bg);
  color: var(--cbp-toast-color);
  box-shadow: 0px 0px 18px 2px rgba(0, 0, 0, 0.3);
  border-radius: var(--cbp-border-radius-softer);
  animation: show 600ms 100ms ease-in-out forwards;
}
cbp-toast:not([open]) {
  animation: dismiss 1s ease-in-out forwards;
}
cbp-toast .cbp-toast-sidebar {
  --cbp-icon-size: var(--cbp-space-8x);
  display: flex;
  width: var(--cbp-space-13x);
  justify-content: center;
  align-items: center;
  padding: var(--cbp-space-4x);
  background-color: var(--cbp-toast-color-bg-sidebar);
  border-top-left-radius: var(--cbp-border-radius-softer);
  border-bottom-left-radius: var(--cbp-border-radius-softer);
}
cbp-toast .cbp-toast-sidebar cbp-icon {
  --cbp-icon-color: var(--cbp-toast-color-icon-sidebar);
}
cbp-toast .cbp-toast-title {
  font-weight: var(--cbp-font-weight-medium);
  font-size: var(--cbp-font-size-heading-sm);
  line-height: var(--cbp-line-height-sm);
  padding: var(--cbp-space-3x) var(--cbp-space-3x) 0 var(--cbp-space-3x);
}
cbp-toast .cbp-toast-container {
  width: 100%;
}
cbp-toast .cbp-toast-content {
  font-weight: var(--cbp-font-weight-regular);
  font-size: var(--cbp-font-size-body);
  line-height: var(--cbp-line-height-xs);
  color: var(--cbp-toast-color-content);
  padding: 0 var(--cbp-space-3x) 0 var(--cbp-space-3x);
}
cbp-toast .cbp-toast-button-bar {
  display: flex;
  justify-content: center;
  padding-top: var(--cbp-space-3x);
}
cbp-toast .cbp-toast-button-bar > div {
  display: flex;
  flex: 1 1 100%;
}
cbp-toast .cbp-toast-button-bar cbp-button[fill=ghost][color=secondary] {
  --cbp-button-color: var(--cbp-toast-color);
  --cbp-button-color-dark: var(--cbp-toast-color-dark);
  --cbp-button-width: 100%;
  --cbp-button-border-radius: var(--cbp-border-radius-sharp);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-toast .cbp-toast-button-bar cbp-button[fill=ghost][color=secondary]:last-child {
  --cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) 0;
}
cbp-toast[color=info] {
  --cbp-toast-color-bg: var(--cbp-color-info-dark);
  --cbp-toast-color-bg-dark: var(--cbp-color-info-lighter);
  --cbp-toast-color-bg-sidebar: var(--cbp-color-info-darker);
  --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-info-light);
}
cbp-toast[color=success] {
  --cbp-toast-color-bg: var(--cbp-color-success-base);
  --cbp-toast-color-bg-dark: var(--cbp-color-success-lighter);
  --cbp-toast-color-bg-sidebar: var(--cbp-color-success-darker);
  --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-success-light);
}
cbp-toast[color=warning] {
  --cbp-toast-color-bg: var(--cbp-color-warning-base);
  --cbp-toast-color-bg-dark: var(--cbp-color-warning-lighter);
  --cbp-toast-color-bg-sidebar: var(--cbp-color-warning-darker);
  --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-warning-base);
  --cbp-toast-color: var(--cbp-color-text-darker);
  --cbp-toast-color-dark: var(--cbp-color-text-darkest);
  --cbp-toast-color-content: var(--cbp-color-text-darker);
  --cbp-toast-color-content-dark: var(--cbp-color-text-darker);
  --cbp-toast-color-icon-sidebar-dark: var(--cbp-color-text-darker);
}
cbp-toast[color=danger] {
  --cbp-toast-color-bg: var(--cbp-color-danger-dark);
  --cbp-toast-color-bg-dark: var(--cbp-color-danger-lighter);
  --cbp-toast-color-bg-sidebar: var(--cbp-color-danger-darker);
  --cbp-toast-color-bg-sidebar-dark: var(--cbp-color-danger-light);
}