@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;
  background-color: var(--modus-wc-color-gray-light);
  border-color: var(--modus-wc-color-gray-0);
  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-gray-10);
}
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: color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, var(--modus-wc-color-gray-light));
  border-color: var(--modus-wc-color-red-dark);
  color: var(--modus-wc-color-gray-10);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-success {
  background-color: color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, var(--modus-wc-color-gray-light));
  border-color: var(--modus-wc-color-green-dark);
  color: var(--modus-wc-color-gray-10);
}
modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {
  background-color: color-mix(in sRGB, var(--modus-wc-color-yellow-pale) 60%, var(--modus-wc-color-gray-light));
  border-color: var(--modus-wc-color-yellow-dark);
  color: var(--modus-wc-color-black);
}

[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: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);
  border-color: var(--modus-wc-color-highlight-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);
  border-color: var(--modus-wc-color-red-light);
}
[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);
  border-color: var(--modus-wc-color-green-light);
}
[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);
  border-color: var(--modus-wc-color-yellow-light);
}