@trimble-oss/moduswebcomponents/collection/components/modus-wc-input-feedback/modus-wc-input-feedback.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-input-feedback .modus-wc-input-feedback {
  align-items: center;
  border-radius: 0 0 var(--modus-wc-border-radius-sm) var(--modus-wc-border-radius-sm);
  display: flex;
  font-weight: var(--modus-wc-font-weight-semibold);
  gap: var(--modus-wc-spacing-sm);
  margin-top: var(--modus-wc-spacing-sm);
  padding: var(--modus-wc-spacing-xs) 0;
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--sm {
  font-size: var(--modus-wc-font-size-xs);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--sm .modus-wc-input-feedback-icon {
  height: var(--modus-wc-font-size-lg);
  width: var(--modus-wc-font-size-lg);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--md {
  font-size: var(--modus-wc-font-size-sm);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--md .modus-wc-input-feedback-icon {
  height: var(--modus-wc-font-size-xl);
  width: var(--modus-wc-font-size-xl);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--lg {
  font-size: var(--modus-wc-font-size-md);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--lg .modus-wc-input-feedback-icon {
  height: var(--modus-wc-font-size-2xl);
  width: var(--modus-wc-font-size-2xl);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback {
  background-color: var(--modus-wc-color-base-100);
  border-radius: var(--modus-wc-border-radius-lg);
  padding: var(--modus-wc-spacing-sm);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error {
  color: var(--modus-wc-color-error);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info {
  color: var(--modus-wc-color-info);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success {
  color: var(--modus-wc-color-success);
}
modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning {
  color: var(--modus-wc-color-warning);
}

[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback {
  border-radius: 0;
  margin-top: 0;
  padding: var(--modus-wc-spacing-xs) 0;
}
[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error {
  background-color: transparent;
  color: var(--modus-wc-color-red);
}
[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info {
  background-color: transparent;
  color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success {
  background-color: transparent;
  color: var(--modus-wc-color-green-dark);
}
[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning {
  background-color: transparent;
  color: var(--modus-wc-color-yellow-dark);
}

[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback {
  border-radius: 0;
  color: var(--modus-wc-color-white);
  margin-top: 0;
  padding: var(--modus-wc-spacing-xs) 0;
}
[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error {
  background-color: var(--modus-wc-color-red);
}
[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info {
  background-color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success {
  background-color: var(--modus-wc-color-green-dark);
}
[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning {
  background-color: var(--modus-wc-color-yellow-dark);
  color: var(--modus-wc-color-black);
}