/*
 * Slider flag rules for the SurveyJS slider (responseOptions flags hideGrid,
 * hideMinMax, hideStart, removeFill). The runtime adds the classes in
 * addSurveyCustomHooks() (resources/js/experiment/!refactored/surveyCoreExtensions.js).
 *
 * Loaded in two places:
 *   1. resources/views/experiment/show.blade.php, for form trials and for test
 *      and practice trials.
 *   2. tests/js/mocha-tests.html, so tests/js/slider.test.js checks what the
 *      participant sees (computed styles), not only that a class is set.
 */

.no-fill-slider .sd-slider__range-track {
  background: var(--sjs-postcss-fix-slider-path-color,var(--sjs-border-light,var(--border-light,#eaeaea)));
}

/* The range track has a rounded cap at each end; the one next to the thumb
   (::after) trails behind the thumb when it moves, so both must lose the fill. */
.no-fill-slider .sd-slider__range-track::before,
.no-fill-slider .sd-slider__range-track::after,
.hide-start-slider .sd-slider__range-track::after,
.hide-start-slider .sd-slider__range-track::before{
  background: transparent;
}

.hide-start-slider .sd-slider__thumb,
.hide-start-slider .sd-slider__tooltip {
  visibility: hidden;
}

.hide-start-slider .sd-slider__range-track {
  background: var(--sjs-postcss-fix-slider-path-color,var(--sjs-border-light,var(--border-light,#eaeaea)));
}

/* SurveyJS draws keyboard focus on the thumb, which hideStart hides until
   the first touch; show the focus on the slider itself meanwhile
   (WCAG 2.4.7). A dark ring with a white halo stays visible on any
   trial background. */
.sd-slider.hide-start-slider:focus-within {
  outline: 2px solid #161616;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff;
  border-radius: 4px;
}

.hide-min-max-slider .sd-slider__label:first-child,
.hide-min-max-slider .sd-slider__label:last-child {
  visibility: hidden;
}

/* hideGrid hides the grid: the ticks and the labels between the ends. The
   first and the last label (min and max, or the endpoint text anchors of
   "0(low)_10(high)") stay, in form trials and in test trials alike, as on the
   former Ion slider; hideMinMax hides those. */
.hide-grid-slider .sd-slider__label:not(:first-child):not(:last-child),
.hide-grid-slider .sd-slider__label-tick {
  visibility: hidden;
}