@trimble-oss/moduswebcomponents/collection/components/modus-wc-button/modus-wc-button.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-button .modus-wc-btn-xs {
  height: var(--modus-wc-size-xs);
  min-height: var(--modus-wc-size-xs);
}
modus-wc-button .modus-wc-btn-sm {
  height: var(--modus-wc-size-sm);
  min-height: var(--modus-wc-size-sm);
}
modus-wc-button .modus-wc-btn-md {
  height: var(--modus-wc-size-md);
  min-height: var(--modus-wc-size-md);
}
modus-wc-button .modus-wc-btn-lg {
  height: var(--modus-wc-size-lg);
  min-height: var(--modus-wc-size-lg);
}
modus-wc-button .modus-wc-btn-xl {
  height: var(--modus-wc-size-xl);
  min-height: var(--modus-wc-size-xl);
}

modus-wc-button .modus-wc-btn-outline.modus-wc-btn-primary[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  border: 1px solid transparent;
  color: var(--modus-wc-color-primary-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-primary:hover {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-secondary[aria-pressed=true] {
  background-color: var(--modus-wc-color-secondary);
  border: 1px solid transparent;
  color: var(--modus-wc-color-secondary-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-secondary:hover {
  background-color: var(--modus-wc-color-secondary-pale);
  color: var(--modus-wc-color-secondary);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-accent[aria-pressed=true] {
  background-color: var(--modus-wc-color-accent);
  border: 1px solid transparent;
  color: var(--modus-wc-color-accent-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-accent:hover {
  background-color: var(--modus-wc-color-accent-pale);
  color: var(--modus-wc-color-accent);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-neutral[aria-pressed=true] {
  background-color: var(--modus-wc-color-neutral);
  border: 1px solid transparent;
  color: var(--modus-wc-color-base-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-neutral:hover {
  background-color: var(--modus-wc-color-neutral-pale);
  color: var(--modus-wc-color-base-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-warning[aria-pressed=true] {
  background-color: var(--modus-wc-color-warning);
  border: 1px solid transparent;
  color: var(--modus-wc-color-warning-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-warning:hover {
  background-color: var(--modus-wc-color-warning-pale);
  color: var(--modus-wc-color-warning);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-error[aria-pressed=true] {
  background-color: var(--modus-wc-color-error);
  border: 1px solid transparent;
  color: var(--modus-wc-color-error-content);
}
modus-wc-button .modus-wc-btn-outline.modus-wc-btn-error:hover {
  background-color: var(--modus-wc-color-error-pale);
  color: var(--modus-wc-color-error);
}

modus-wc-button .modus-wc-btn-borderless {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-primary[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  border: 1px solid transparent;
  color: var(--modus-wc-color-primary-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-primary:hover {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-secondary[aria-pressed=true] {
  background-color: var(--modus-wc-color-secondary);
  border: 1px solid transparent;
  color: var(--modus-wc-color-secondary-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-secondary:hover {
  background-color: var(--modus-wc-color-secondary-pale);
  color: var(--modus-wc-color-secondary);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-accent[aria-pressed=true] {
  background-color: var(--modus-wc-color-accent);
  border: 1px solid transparent;
  color: var(--modus-wc-color-accent-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-accent:hover {
  background-color: var(--modus-wc-color-accent-pale);
  color: var(--modus-wc-color-accent);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-neutral[aria-pressed=true] {
  background-color: var(--modus-wc-color-neutral);
  border: 1px solid transparent;
  color: var(--modus-wc-color-base-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-neutral:hover {
  background-color: var(--modus-wc-color-neutral-pale);
  color: var(--modus-wc-color-base-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-warning[aria-pressed=true] {
  background-color: var(--modus-wc-color-warning);
  border: 1px solid transparent;
  color: var(--modus-wc-color-warning-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-warning:hover {
  background-color: var(--modus-wc-color-warning-pale);
  color: var(--modus-wc-color-warning);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-error[aria-pressed=true] {
  background-color: var(--modus-wc-color-error);
  border: 1px solid transparent;
  color: var(--modus-wc-color-error-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-error:hover {
  background-color: var(--modus-wc-color-error-pale);
  color: var(--modus-wc-color-error);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-primary {
  color: var(--modus-wc-color-primary);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-secondary {
  color: var(--modus-wc-color-secondary);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-neutral {
  color: var(--modus-wc-color-content);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-warning {
  color: var(--modus-wc-color-warning);
}
modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-error {
  color: var(--modus-wc-color-error);
}

modus-wc-button .modus-wc-btn.modus-wc-btn-ellipse {
  border-radius: var(--modus-wc-border-radius-rounded);
}

modus-wc-button .modus-wc-btn-circle.modus-wc-btn-md,
modus-wc-button .modus-wc-btn-square.modus-wc-btn-md {
  width: var(--modus-wc-size-md);
}

modus-wc-button .modus-wc-btn-circle.modus-wc-btn-lg,
modus-wc-button .modus-wc-btn-square.modus-wc-btn-lg {
  width: var(--modus-wc-size-lg);
}

[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn {
  --rounded-btn: var(--modus-wc-border-radius-md);
  border: none;
  outline: none;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
  height: fit-content;
  min-height: fit-content;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-xs,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-xs {
  font-size: var(--modus-wc-font-size-xs);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-xs:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-xs:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
  padding: var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-sm);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-sm,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-sm {
  font-size: var(--modus-wc-font-size-sm);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-sm:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-sm:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
  padding: var(--modus-wc-spacing-xs) var(--modus-wc-spacing-md);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-md,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-md {
  font-size: var(--modus-wc-font-size-md);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-md:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-md:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
  padding: var(--modus-wc-spacing-sm) var(--modus-wc-spacing-lg);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-lg,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-lg {
  font-size: var(--modus-wc-font-size-lg);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-lg:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-lg:not(.modus-wc-btn-circle):not(.modus-wc-btn-square) {
  padding: var(--modus-wc-spacing-md) var(--modus-wc-spacing-xl);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless {
  background-color: transparent;
  box-shadow: none;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:active,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:active {
  background-color: transparent;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:hover,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:hover {
  background-color: transparent;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline {
  background-color: transparent;
  border: var(--modus-wc-border-width-xs) solid var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:active,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:active {
  background-color: transparent;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:hover,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:hover {
  background-color: transparent;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:focus-visible, [data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(38, 122, 177, 0.5);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:focus-visible, [data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(98, 102, 108, 0.5);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:focus-visible, [data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(98, 102, 108, 0.5);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:focus-visible, [data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(194, 125, 31, 0.5);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:focus-visible, [data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:focus-visible,
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(224, 66, 76, 0.5);
}

[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-disabled {
  opacity: 0.3;
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:focus-visible {
  border: var(--modus-wc-border-width-sm) solid var(--modus-wc-color-black);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-secondary {
  color: var(--modus-wc-color-gray-6);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-neutral {
  color: var(--modus-wc-color-gray-6);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-warning {
  color: var(--modus-wc-color-yellow);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-error {
  color: var(--modus-wc-color-red);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary {
  background-color: var(--modus-wc-color-trimble-blue);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:hover {
  background-color: var(--modus-wc-color-blue-light);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:active {
  background-color: var(--modus-wc-color-blue-dark);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary {
  background-color: var(--modus-wc-color-gray-6);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:hover {
  background-color: var(--modus-wc-color-gray-5);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:active {
  background-color: var(--modus-wc-color-gray-7);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral {
  background-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:hover {
  background-color: var(--modus-wc-color-gray-0);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:active {
  background-color: var(--modus-wc-color-gray-2);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning {
  background-color: var(--modus-wc-color-yellow);
  border: var(--modus-wc-border-width-xs) solid var(--modus-wc-color-red);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:hover {
  background-color: var(--modus-wc-color-yellow-light);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:active {
  background-color: var(--modus-wc-color-yellow-dark);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error {
  background-color: var(--modus-wc-color-red);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:hover {
  background-color: var(--modus-wc-color-red-light);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:active {
  background-color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary {
  border-color: var(--modus-wc-color-trimble-blue);
  color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:hover {
  background-color: var(--modus-wc-color-blue-pale);
  border-color: var(--modus-wc-color-blue-light);
  color: var(--modus-wc-color-blue-light);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:active {
  background-color: rgba(0, 99, 163, 0.18);
  border-color: var(--modus-wc-color-blue-dark);
  color: var(--modus-wc-color-blue-dark);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary {
  border-color: var(--modus-wc-color-trimble-gray);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:hover {
  background-color: var(--modus-wc-color-gray-0);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:active {
  background-color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral {
  border-color: var(--modus-wc-color-trimble-gray);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:hover {
  background-color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:active {
  background-color: var(--modus-wc-color-gray-2);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning {
  border-color: var(--modus-wc-color-yellow);
  color: var(--modus-wc-color-yellow);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:hover {
  border-color: var(--modus-wc-color-yellow-light);
  color: var(--modus-wc-color-yellow-light);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:active {
  border-color: var(--modus-wc-color-yellow-dark);
  color: var(--modus-wc-color-yellow-dark);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error {
  border-color: var(--modus-wc-color-red);
  color: var(--modus-wc-color-red);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:hover {
  border-color: var(--modus-wc-color-red-light);
  color: var(--modus-wc-color-red-light);
}
[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:active {
  border-color: var(--modus-wc-color-red-dark);
  color: var(--modus-wc-color-red-dark);
}

[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-disabled {
  opacity: 0.4;
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:focus-visible {
  border: var(--modus-wc-border-width-sm) solid var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary {
  color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-secondary {
  color: var(--modus-wc-color-gray-6);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-neutral {
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-warning {
  color: var(--modus-wc-color-yellow);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-error {
  color: var(--modus-wc-color-red);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary {
  background-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:hover {
  background-color: var(--modus-wc-color-blue-light);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:active {
  background-color: var(--modus-wc-color-blue-dark);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary {
  background-color: var(--modus-wc-color-gray-6);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:hover {
  background-color: var(--modus-wc-color-gray-5);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:active {
  background-color: var(--modus-wc-color-gray-7);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral {
  background-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:hover {
  background-color: var(--modus-wc-color-gray-0);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:active {
  background-color: var(--modus-wc-color-gray-4);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning {
  background-color: var(--modus-wc-color-yellow);
  border: var(--modus-wc-border-width-xs) solid var(--modus-wc-color-red);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:hover {
  background-color: var(--modus-wc-color-yellow-light);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:active {
  background-color: var(--modus-wc-color-yellow-dark);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error {
  background-color: var(--modus-wc-color-red);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:hover {
  background-color: var(--modus-wc-color-red-light);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:active {
  background-color: var(--modus-wc-color-red-dark);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary {
  border-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:hover {
  background-color: rgba(1, 154, 235, 0.12);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:active {
  background-color: rgba(1, 154, 235, 0.3);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary {
  border-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-gray-1);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:hover {
  background-color: rgba(203, 205, 214, 0.12);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:active {
  background-color: rgba(203, 205, 214, 0.3);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral {
  border-color: var(--modus-wc-color-gray-2);
  color: var(--modus-wc-color-gray-2);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:hover {
  background-color: rgba(203, 205, 214, 0.12);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:active {
  background-color: rgba(203, 205, 214, 0.3);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning {
  border-color: var(--modus-wc-color-yellow);
  color: var(--modus-wc-color-yellow);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:hover {
  border-color: var(--modus-wc-color-yellow-light);
  color: var(--modus-wc-color-yellow-light);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:active {
  border-color: var(--modus-wc-color-yellow-dark);
  color: var(--modus-wc-color-yellow-dark);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error {
  border-color: var(--modus-wc-color-red);
  color: var(--modus-wc-color-red);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:hover {
  border-color: var(--modus-wc-color-red-light);
  color: var(--modus-wc-color-red-light);
}
[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:active {
  border-color: var(--modus-wc-color-red-dark);
  color: var(--modus-wc-color-red-dark);
}