@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;
  border-left-width: var(--modus-wc-border-width-xl);
  border-radius: var(--modus-wc-border-radius-lg);
}
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: color-mix(in sRGB, var(--modus-wc-color-primary) 15%, transparent);
  border-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-base-content);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
  background-color: color-mix(in sRGB, var(--modus-wc-color-error) 20%, transparent);
  border-color: var(--modus-wc-color-error);
  color: var(--modus-wc-error-content);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
  background-color: color-mix(in sRGB, var(--modus-wc-color-success) 20%, transparent);
  border-color: var(--modus-wc-color-success);
  color: var(--modus-wc-success-content);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
  background-color: color-mix(in sRGB, var(--modus-wc-color-warning) 20%, transparent);
  border-color: var(--modus-wc-color-warning);
  color: var(--modus-wc-color-base-content);
}
modus-wc-alert .modus-wc-alert .modus-wc-alert-close-icon,
modus-wc-alert .modus-wc-alert .modus-wc-alert-icon {
  height: 1.5rem;
  width: 1.5rem;
}

[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=modus-classic-light] modus-wc-alert .modus-wc-alert {
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info {
  background-color: var(--modus-wc-color-blue-pale);
  border-color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon {
  color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
  background-color: var(--modus-wc-color-red-pale);
  border-color: var(--modus-wc-color-red);
}
[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);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
  background-color: var(--modus-wc-color-green-pale);
  border-color: var(--modus-wc-color-green);
}
[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);
}
[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
  background-color: var(--modus-wc-color-yellow-pale);
  border-color: var(--modus-wc-color-yellow-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-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info {
  background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 50%, transparent);
  border-color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error {
  background-color: color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);
  border-color: var(--modus-wc-color-red);
  color: var(--modus-wc-error-content);
}
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
  background-color: color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);
  border-color: var(--modus-wc-color-green);
  color: var(--modus-wc-success-content);
}
[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
  background-color: color-mix(in sRGB, var(--modus-wc-color-yellow-dark) 50%, transparent);
  border-color: var(--modus-wc-color-yellow-dark);
  color: var(--modus-wc-color-white);
}