/* Shared sliding tabs owner. Extracted from site.css Stage 3.3. */
/* Civius catalog tabs component 20260528-step5 */
.civius-service-catalog__chip.is-active,
.civius-service-catalog__chip[aria-pressed="true"],
.civius-kb-design__chip.is-active,
.civius-kb-design__chip[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #0f6df0 0%, #42a5ff 58%, #6fc5ff 100%);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(23, 120, 255, 0.18);
}

.civius-sliding-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--tabs-pill-w, 0px);
  height: var(--tabs-pill-h, 0px);
  border-radius: 999px;
  background: linear-gradient(135deg, #0f6df0 0%, #42a5ff 58%, #6fc5ff 100%);
  opacity: 0;
  transform: translate3d(var(--tabs-pill-x, 0px), var(--tabs-pill-y, 0px), 0);
  box-shadow: 0 12px 26px rgba(23, 120, 255, 0.18);
  pointer-events: none;
  will-change: transform, width, height, opacity;
  transition:
    opacity 150ms ease,
    width 260ms cubic-bezier(0.2, 0.82, 0.22, 1),
    height 260ms cubic-bezier(0.2, 0.82, 0.22, 1),
    transform 260ms cubic-bezier(0.2, 0.82, 0.22, 1);
}

.civius-sliding-tabs.civius-sliding-tabs--ready::before {
  opacity: 1;
}

.civius-sliding-tabs.civius-sliding-tabs--row-switch::before {
  opacity: 0;
}

.civius-sliding-tabs.civius-sliding-tabs--instant::before,
.civius-sliding-tabs.civius-sliding-tabs--reduced::before {
  transition: none;
}

.civius-sliding-tabs:not(.civius-sliding-tabs--dom-indicator) .civius-sliding-tabs__indicator {
  display: none;
}

.civius-sliding-tabs.civius-sliding-tabs--dom-indicator::before {
  display: none;
}

.civius-sliding-tabs__indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--tabs-pill-w, 0px);
  height: var(--tabs-pill-h, 0px);
  border-radius: 999px;
  background: linear-gradient(135deg, #0f6df0 0%, #42a5ff 58%, #6fc5ff 100%);
  opacity: 0;
  transform: translate3d(var(--tabs-pill-x, 0px), var(--tabs-pill-y, 0px), 0);
  box-shadow: 0 12px 26px rgba(23, 120, 255, 0.18);
  pointer-events: none;
  will-change: transform, width, height, opacity;
  transition:
    opacity 150ms ease,
    transform 360ms cubic-bezier(0.2, 0.72, 0.22, 1),
    width 360ms cubic-bezier(0.2, 0.72, 0.22, 1),
    height 360ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.civius-sliding-tabs.civius-sliding-tabs--ready .civius-sliding-tabs__indicator {
  opacity: 1;
}

.civius-sliding-tabs.civius-sliding-tabs--row-switch .civius-sliding-tabs__indicator {
  opacity: 0;
}

.civius-sliding-tabs.civius-sliding-tabs--instant .civius-sliding-tabs__indicator,
.civius-sliding-tabs.civius-sliding-tabs--reduced .civius-sliding-tabs__indicator {
  transition: none;
}

.civius-sliding-tabs .civius-service-catalog__chip,
.civius-sliding-tabs .civius-kb-design__chip {
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.civius-sliding-tabs .civius-service-catalog__chip:focus,
.civius-sliding-tabs .civius-kb-design__chip:focus {
  outline: none;
}

.civius-sliding-tabs .civius-service-catalog__chip:focus-visible,
.civius-sliding-tabs .civius-kb-design__chip:focus-visible {
  outline: 2px solid rgba(23, 120, 255, 0.34);
  outline-offset: 2px;
}

/* Before the measured indicator is ready, the selected chip itself paints the
   exact same gradient.  Switching to the indicator is therefore pixel-stable
   instead of flashing through the old solid-blue fallback. */
.civius-sliding-tabs:not(.civius-sliding-tabs--ready) .civius-service-catalog__chip.is-active,
.civius-sliding-tabs:not(.civius-sliding-tabs--ready) .civius-service-catalog__chip[aria-pressed="true"],
.civius-sliding-tabs:not(.civius-sliding-tabs--ready) .civius-kb-design__chip.is-active,
.civius-sliding-tabs:not(.civius-sliding-tabs--ready) .civius-kb-design__chip[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #0f6df0 0%, #42a5ff 58%, #6fc5ff 100%);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(23, 120, 255, 0.18);
}

.civius-sliding-tabs .civius-service-catalog__chip.is-active,
.civius-sliding-tabs .civius-service-catalog__chip[aria-pressed="true"],
.civius-sliding-tabs .civius-kb-design__chip.is-active,
.civius-sliding-tabs .civius-kb-design__chip[aria-pressed="true"] {
  border-color: rgba(12, 24, 44, 0.12);
  background: transparent;
  box-shadow: none;
}

.civius-sliding-tabs:not(.civius-sliding-tabs--hovering) .civius-service-catalog__chip.is-active,
.civius-sliding-tabs:not(.civius-sliding-tabs--hovering) .civius-service-catalog__chip[aria-pressed="true"],
.civius-sliding-tabs:not(.civius-sliding-tabs--hovering) .civius-kb-design__chip.is-active,
.civius-sliding-tabs:not(.civius-sliding-tabs--hovering) .civius-kb-design__chip[aria-pressed="true"],
.civius-sliding-tabs .civius-service-catalog__chip.is-pill-target,
.civius-sliding-tabs .civius-kb-design__chip.is-pill-target {
  border-color: transparent;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.civius-sliding-tabs.civius-sliding-tabs--hovering .civius-service-catalog__chip.is-active:not(.is-pill-target),
.civius-sliding-tabs.civius-sliding-tabs--hovering .civius-service-catalog__chip[aria-pressed="true"]:not(.is-pill-target),
.civius-sliding-tabs.civius-sliding-tabs--hovering .civius-kb-design__chip.is-active:not(.is-pill-target),
.civius-sliding-tabs.civius-sliding-tabs--hovering .civius-kb-design__chip[aria-pressed="true"]:not(.is-pill-target) {
  border-color: rgba(12, 24, 44, 0.12);
  background: transparent;
  color: #0c182c;
  box-shadow: none;
}