/* V2-05.4R.10.4.7 — one geometry for handles, fill and ticks */
.smart-price-range__slider {
  --track-inset: 16px;
  padding-inline: var(--track-inset) !important;
}

.smart-price-range__track {
  left: var(--track-inset) !important;
  right: var(--track-inset) !important;
  background: linear-gradient(
    to right,
    #e7e9eb 0 var(--price-start),
    #292826 var(--price-start) var(--price-end),
    #e7e9eb var(--price-end) 100%
  ) !important;
}

.smart-price-range__slider::before {
  left: calc(var(--track-inset) + (100% - (2 * var(--track-inset))) * var(--price-start-number, 0)) !important;
}

.smart-price-range__slider::after {
  left: calc(var(--track-inset) + (100% - (2 * var(--track-inset))) * var(--price-end-number, 1)) !important;
}

.smart-price-range__slider input[type="range"] {
  left: var(--track-inset) !important;
  width: calc(100% - (2 * var(--track-inset))) !important;
}

.smart-price-range__ticks {
  left: var(--track-inset) !important;
  right: var(--track-inset) !important;
}

.smart-price-range__ticks span {
  position: absolute !important;
  transform: translateX(-50%) !important;
}

.smart-price-range__ticks span:first-child {
  transform: translateX(0) !important;
}

.smart-price-range__ticks span:last-child {
  transform: translateX(-100%) !important;
}