/* Calculixy A/B testing layer */
:root {
  --cx-ab-focus: #10b981;
  --cx-ab-muted: #64748b;
  --cx-ab-border: rgba(15, 23, 42, .14);
}

[data-cx-experiment] {
  contain: layout style;
}

.cx-ab-range-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
  inline-size: 100%;
}

.cx-ab-range {
  inline-size: 100%;
  accent-color: var(--cx-ab-focus);
  min-block-size: 2rem;
}

html.cx-exp-calc_input_mode-a .cx-ab-range,
html.cx-exp-calc_input_mode-a .cx-ab-range-wrap::after {
  display: none !important;
}

html.cx-exp-calc_input_mode-b .cx-ab-range-wrap {
  padding-block-end: .15rem;
}

html.cx-exp-calc_input_mode-b .cx-ab-range-wrap::after {
  content: attr(data-cx-input-label);
  font-size: .72rem;
  color: var(--cx-ab-muted);
  line-height: 1.1;
  min-block-size: .8rem;
}

html.cx-exp-calc_input_mode-b input[type="number"].cx-ab-number-peer {
  margin-block-end: .15rem;
}

@media (prefers-reduced-motion: no-preference) {
  .cx-ab-range-wrap,
  .cx-ab-number-peer {
    transition: border-color .15s ease, box-shadow .15s ease;
  }
}