@trimble-oss/moduswebcomponents/collection/components/modus-wc-tabs/modus-wc-tabs.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-tabs .modus-wc-tab modus-wc-icon + span,
modus-wc-tabs .modus-wc-tab span + modus-wc-icon {
  padding-inline-start: var(--modus-wc-spacing-xs);
}

modus-wc-tabs .modus-wc-tabs {
  align-items: center;
  border-top-left-radius: var(--modus-wc-border-radius-md);
  border-top-right-radius: var(--modus-wc-border-radius-md);
  display: inline-flex;
  font-weight: var(--modus-wc-font-weight-bold);
}
modus-wc-tabs .modus-wc-tabs-xs {
  height: var(--modus-wc-size-xs);
  min-height: var(--modus-wc-size-xs);
}
modus-wc-tabs .modus-wc-tabs-sm {
  height: var(--modus-wc-size-sm);
  min-height: var(--modus-wc-size-sm);
}
modus-wc-tabs .modus-wc-tabs-md {
  height: var(--modus-wc-size-md);
  min-height: var(--modus-wc-size-md);
}
modus-wc-tabs .modus-wc-tabs-lg {
  height: var(--modus-wc-size-lg);
  min-height: var(--modus-wc-size-lg);
}
modus-wc-tabs .modus-wc-tabs-xl {
  height: var(--modus-wc-size-xl);
  min-height: var(--modus-wc-size-xl);
}
modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--xs {
  line-height: calc(var(--modus-wc-line-height-sm) + 0.25rem);
}
modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--sm {
  line-height: var(--modus-wc-line-height-md);
}
modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--md {
  line-height: var(--modus-wc-line-height-lg);
}
modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--lg {
  line-height: var(--modus-wc-line-height-xl);
}
modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-lifted > .modus-wc-tab:is(.modus-wc-tab-active, [aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),
modus-wc-tabs .modus-wc-tabs .modus-wc-tabs-lifted > .modus-wc-tab:is(input:checked) {
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-bordered .modus-wc-tab:is(.modus-wc-tab-active, [aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]) {
  background-color: var(--modus-wc-color-base-page);
  border-bottom-color: var(--modus-wc-color-primary);
  border-bottom-width: var(--modus-wc-border-width-lg);
}
modus-wc-tabs .modus-wc-tabs.modus-wc-tab .modus-wc-tab-active .modus-wc-tab:is(input:checked) {
  color: var(--modus-wc-color-primary);
}

modus-wc-tabs .modus-wc-tab {
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  height: inherit;
}
modus-wc-tabs .modus-wc-tab:hover {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab:focus {
  background-color: var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab:active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab-selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab-active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab-open {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab.selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab.active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab-disabled:hover {
  background-color: inherit;
}
modus-wc-tabs .modus-wc-tab--active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab--selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
modus-wc-tabs .modus-wc-tab:checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-tabs .modus-wc-tab.checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-tabs .modus-wc-tab-checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-tabs .modus-wc-tab.pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-tabs .modus-wc-tab-pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-tabs .modus-wc-tab[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
modus-wc-tabs .modus-wc-tab-active {
  background-color: var(--modus-wc-color-base-page);
  color: inherit;
}
modus-wc-tabs .modus-wc-tab:disabled {
  pointer-events: none;
}

[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab {
  --tab-color: var(--modus-wc-color-trimble-gray);
  --tab-bg: var(--modus-wc-color-white);
  --fallback-bc: var(--modus-wc-color-gray-2);
}
[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-active):not(.modus-wc-tab-disabled):hover {
  background-color: var(--modus-wc-color-blue-pale);
}
[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-disabled):active {
  --tab-color: var(--modus-wc-color-gray-10);
  --tab-border: var(
    --modus-wc-border-width-xs
  );
  --tab-bg: var(--modus-wc-color-white);
  background-color: var(--modus-wc-color-trimble-blue-pale) !important;
}
[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab.modus-wc-tab-active {
  --tab-color: var(--modus-wc-color-gray-10);
  --tab-bg: var(--modus-wc-color-blue-light);
  background-color: var(--modus-wc-color-white);
  --fallback-p: var(--modus-wc-color-blue-light);
  --fallback-bc: transparent;
}
[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted > .modus-wc-tab:is(.modus-wc-tab-active, [aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),
[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted > .modus-wc-tab:is(input:checked) {
  color: var(--modus-wc-color-white) !important;
}

[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab {
  --tab-color: var(--modus-wc-color-white);
  --tab-bg: var(--modus-wc-color-gray-8);
  --fallback-bc: var(--modus-wc-color-gray-8);
}
[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-active):not(.modus-wc-tab-disabled):hover {
  background-color: var(--modus-wc-color-highlight-blue-pale);
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-disabled):active {
  background-color: var(--modus-wc-color-highlight-blue-pale) !important;
}
[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab.modus-wc-tab-active {
  --tab-color: var(--modus-wc-color-white);
  --tab-bg: var(--modus-wc-color-blue-light);
  border-bottom-width: var(--modus-wc-border-width-xs);
  --fallback-p: var(--modus-wc-color-blue-light);
  --fallback-bc: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab.modus-wc-tab-disabled {
  --tab-color: var(--modus-wc-color-gray-2);
  background-color: var(--modus-wc-color-gray-9);
}
[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted > .modus-wc-tab:is(.modus-wc-tab-active, [aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),
[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted > .modus-wc-tab:is(input:checked) {
  color: var(--modus-wc-color-white);
}