@trimble-oss/moduswebcomponents/collection/components/modus-wc-alert/modus-wc-alert.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-alert .modus-wc-alert {
  align-content: center;
  align-items: center;
  backdrop-filter: blur(var(--modus-wc-spacing-lg));
  background-color: var(--modus-wc-color-base-page);
  border-color: var(--modus-wc-color-base-200);
  border-width: var(--alert-border-width);
  border-left-width: var(--alert-border-left-width);
  border-radius: var(--alert-border-radius);
  color: var(--modus-wc-color-base-content);
  display: flex;
  text-align: start;
}
modus-wc-alert .modus-wc-alert .modus-wc-alert-content {
  flex: auto;
}
modus-wc-alert .modus-wc-alert .title {
  font-size: var(--modus-wc-font-size-md);
  font-weight: var(--modus-wc-font-weight-bold);
}
modus-wc-alert .modus-wc-alert .description {
  font-size: var(--modus-wc-font-size-md);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-info {
  background-color: var(--modus-wc-color-blue-pale);
  border-color: var(--modus-wc-color-info-blue);
  color: var(--modus-wc-color-gray-10);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
  background-color: rgba(251, 212, 215, 0.8);
  border-color: var(--modus-wc-color-red-dark);
  color: var(--modus-wc-color-gray-10);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
    background-color: color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, transparent);
  }
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
  background-color: rgba(224, 236, 207, 0.8);
  border-color: var(--modus-wc-color-green-dark);
  color: var(--modus-wc-color-gray-10);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
    background-color: color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, transparent);
  }
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
  background-color: rgba(255, 245, 228, 0.6);
  border-color: var(--modus-wc-color-yellow-dark);
  color: var(--modus-wc-color-black);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
    background-color: color-mix(in sRGB, var(--modus-wc-color-yellow-pale) 60%, transparent);
  }
}

[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert .modus-wc-alert-icon {
  color: var(--modus-wc-color-gray-5);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon {
  color: var(--modus-wc-color-info-blue);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error .modus-wc-alert-icon {
  color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success .modus-wc-alert-icon {
  color: var(--modus-wc-color-green-dark);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning .modus-wc-alert-icon {
  color: var(--modus-wc-color-yellow-dark);
}

[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert,
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert {
  border-left-width: 12px;
  border-radius: var(--modus-wc-border-radius-md);
  gap: var(--modus-wc-spacing-sm);
  min-height: 56px;
  padding-bottom: var(--modus-wc-spacing-sm);
  padding-top: var(--modus-wc-spacing-sm);
}

[data-theme=connect-dark] modus-wc-alert .modus-wc-alert,
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert,
[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert {
  background-color: var(--modus-wc-color-gray-10);
  border-color: var(--modus-wc-color-gray-9);
  color: var(--modus-wc-color-gray-light);
}
[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,
[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info {
  background-color: rgba(1, 154, 235, 0.3);
  border-color: var(--modus-wc-color-highlight-blue);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,
  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,
  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info {
    background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);
  }
}
[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,
[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
  background-color: rgba(218, 33, 44, 0.5);
  border-color: var(--modus-wc-color-red-light);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,
  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,
  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
    background-color: color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);
  }
}
[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,
[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
  background-color: rgba(30, 138, 68, 0.5);
  border-color: var(--modus-wc-color-green-light);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,
  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,
  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
    background-color: color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);
  }
}
[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,
[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
  background-color: rgba(251, 173, 38, 0.5);
  border-color: var(--modus-wc-color-yellow-light);
}
@supports (background-color: color-mix(in sRGB, red 50%, blue)) {
  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,
  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,
  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
    background-color: color-mix(in sRGB, var(--modus-wc-color-yellow) 50%, transparent);
  }
}