.host {
  position: relative;
  block-size: var(--vkui_internal--slider_thumb_size);
  cursor: pointer;

  --vkui_internal--Slider_start_value: 0;
  --vkui_internal--Slider_end_value: 0;
}

.disabled {
  cursor: not-allowed;
  opacity: var(--vkui--opacity_disable_accessibility);
}

.track,
.trackFill {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  block-size: 2px;
  border-radius: 1px;
}

.track {
  inline-size: 100%;
  background-color: var(--vkui--color_track_background);
}

.trackFill {
  inline-size: calc(var(--vkui_internal--Slider_start_value) * 1%);
  background: var(--vkui--color_background_accent);
}

.multiple .trackFill {
  inset-inline-start: calc(var(--vkui_internal--Slider_start_value) * 1%);
  inset-inline-end: calc((100 - var(--vkui_internal--Slider_end_value)) * 1%);
  inline-size: auto;
}

.thumbs {
  position: relative;
  block-size: 100%;
  margin-inline: calc(var(--vkui_internal--slider_thumb_size) / 2);
  isolation: isolate;
}

.thumb {
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
}

.rtl .thumb {
  transform: translate(50%, -50%);
}

.thumbStart {
  inset-inline-start: calc(var(--vkui_internal--Slider_start_value) * 1%);
}

.thumbEnd {
  inset-inline-start: calc(var(--vkui_internal--Slider_end_value) * 1%);
}

.sizeL {
  --vkui_internal--slider_thumb_size: 28px;
}

.sizeM {
  --vkui_internal--slider_thumb_size: 20px;
}

.sizeS {
  --vkui_internal--slider_thumb_size: 16px;
}

/**
 * sizeY COMPACT
 */

.sizeYCompact.sizeL {
  --vkui_internal--slider_thumb_size: 24px;
}

.sizeYCompact.sizeM {
  --vkui_internal--slider_thumb_size: 16px;
}

.sizeYCompact.sizeS {
  --vkui_internal--slider_thumb_size: 12px;
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .sizeYNone.sizeL {
    --vkui_internal--slider_thumb_size: 24px;
  }

  .sizeYNone.sizeM {
    --vkui_internal--slider_thumb_size: 16px;
  }

  .sizeYNone.sizeS {
    --vkui_internal--slider_thumb_size: 12px;
  }
}