@trimble-oss/moduswebcomponents/collection/components/modus-wc-chip/modus-wc-chip.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-chip .modus-wc-chip.modus-wc-btn {
  background-color: var(--modus-wc-color-base-100);
  border-color: transparent;
  box-sizing: border-box;
  --rounded-btn: var(--modus-wc-border-radius-chip);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--circle {
  --rounded-btn: var(--modus-wc-border-radius-3xl);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:hover {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:focus {
  background-color: var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-open {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-disabled:hover {
  background-color: inherit;
}
modus-wc-chip .modus-wc-chip.modus-wc-btn--active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn--selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-xs {
  height: var(--modus-wc-size-xs);
  min-height: var(--modus-wc-size-xs);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-sm {
  height: var(--modus-wc-size-sm);
  min-height: var(--modus-wc-size-sm);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-md {
  height: var(--modus-wc-size-md);
  min-height: var(--modus-wc-size-md);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-lg {
  height: var(--modus-wc-size-lg);
  min-height: var(--modus-wc-size-lg);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn-xl {
  height: var(--modus-wc-size-xl);
  min-height: var(--modus-wc-size-xl);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm {
  height: var(--modus-wc-spacing-xl);
  min-height: var(--modus-wc-spacing-xl);
  padding: var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-avatar {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md {
  height: var(--modus-wc-spacing-2xl);
  min-height: var(--modus-wc-spacing-2xl);
  padding: var(--modus-wc-spacing-sm) var(--modus-wc-spacing-sm);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-avatar {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg {
  height: var(--modus-wc-spacing-3xl);
  min-height: var(--modus-wc-spacing-3xl);
  padding: var(--modus-wc-spacing-md) var(--modus-wc-spacing-md);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-avatar {
  height: var(--modus-wc-spacing-xl);
  width: var(--modus-wc-spacing-xl);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon {
  height: var(--modus-wc-spacing-xl);
  width: var(--modus-wc-spacing-xl);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active {
  background-color: var(--modus-wc-color-primary-pale);
  border-color: transparent;
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline {
  background-color: var(--modus-wc-color-primary-pale);
  border-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label {
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error {
  background-color: var(--modus-wc-color-red-pale);
  border-color: transparent;
  color: var(--modus-wc-color-red-dark);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline {
  background-color: var(--modus-wc-color-red-pale);
  border-color: var(--modus-wc-color-red-dark);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline {
  background-color: var(--modus-wc-color-base-page);
  border-color: var(--modus-wc-color-base-200);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error) {
  color: var(--modus-wc-color-base-content);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline {
  border-color: var(--modus-wc-color-base-200);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active) {
  border-color: transparent;
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline {
  background-color: transparent;
  border-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label {
  color: var(--modus-wc-color-primary);
}
modus-wc-chip .modus-wc-chip.modus-wc-btn:focus {
  outline-offset: 0;
}
modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled {
  opacity: 0.3;
  --tw-text-opacity: 1;
}
modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar {
  filter: grayscale(100%);
}
modus-wc-chip .modus-wc-chip .modus-wc-avatar {
  display: flex;
}

[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn {
  background-color: var(--modus-wc-color-gray-1);
  border-color: transparent;
  box-sizing: border-box;
  color: var(--modus-wc-color-base-content);
  font-size: var(--modus-wc-font-size-md);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm {
  font-size: var(--modus-wc-font-size-md);
  height: var(--modus-wc-spacing-xl);
  min-height: var(--modus-wc-spacing-xl);
  padding: var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-avatar,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-avatar {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md {
  font-size: var(--modus-wc-font-size-md);
  height: var(--modus-wc-spacing-2xl);
  min-height: var(--modus-wc-spacing-2xl);
  padding: var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-avatar,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-avatar {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon {
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-lg);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg {
  font-size: var(--modus-wc-font-size-xl);
  height: var(--modus-wc-spacing-3xl);
  min-height: var(--modus-wc-spacing-3xl);
  padding: var(--modus-wc-spacing-md) var(--modus-wc-spacing-lg);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-avatar,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-avatar {
  height: var(--modus-wc-spacing-xl);
  width: var(--modus-wc-spacing-xl);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon {
  height: var(--modus-wc-spacing-xl);
  width: var(--modus-wc-spacing-xl);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active {
  background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);
  border-color: transparent;
  color: var(--modus-wc-color-base-content);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline {
  background-color: var(--modus-wc-color-primary);
  border-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label {
  color: var(--modus-wc-color-base-content);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error {
  background-color: var(--modus-wc-color-red-pale);
  border-color: transparent;
  color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline {
  background-color: var(--modus-wc-color-red-pale);
  border-color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline {
  background-color: transparent;
  border-color: var(--modus-wc-color-base-200);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error),
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error) {
  background-color: var(--modus-wc-color-base-100);
  border-color: transparent;
  color: var(--modus-wc-color-base-content);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline {
  background-color: var(--modus-wc-color-base-100);
  border-color: var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-base-content);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active),
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active) {
  background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);
  border-color: transparent;
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline {
  background-color: var(--modus-wc-color-base-100);
  background-color: transparent;
  background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);
  background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label {
  color: var(--modus-wc-color-primary);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:focus,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:focus {
  outline-offset: 0;
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled {
  opacity: 0.3;
  --tw-text-opacity: 1;
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar {
  filter: grayscale(100%);
}
[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip .modus-wc-avatar,
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip .modus-wc-avatar {
  display: flex;
}

[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn {
  background-color: var(--modus-wc-color-gray-1);
  border-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-gray-9);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active {
  background-color: var(--modus-wc-color-highlight-blue);
  border-color: transparent;
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline {
  background-color: color-mix(in sRGB, var(--modus-wc-color-blue-dark) 50%, transparent);
  border-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label {
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error {
  background-color: var(--modus-wc-color-red-pale);
  border-color: transparent;
  color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline {
  background-color: var(--modus-wc-color-red-pale);
  border-color: var(--modus-wc-color-red-dark);
  color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline {
  background-color: transparent;
  border-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error) {
  background-color: var(--modus-wc-color-gray-0);
  border-color: transparent;
  color: var(--modus-wc-color-gray-9);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline {
  background-color: color-mix(in sRGB, var(--modus-wc-color-gray-1) 12%, transparent);
  border-color: var(--modus-wc-color-gray-5);
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active) {
  background-color: var(--modus-wc-color-highlight-blue);
  border-color: transparent;
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline {
  background-color: color-mix(in sRGB, var(--modus-wc-color-blue-dark) 50%, transparent);
  border-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label {
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled {
  opacity: 0.6;
  --tw-text-opacity: 1;
}