.host {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  inline-size: var(--vkui_internal--slider_thumb_size);
  block-size: var(--vkui_internal--slider_thumb_size);
  user-select: none;
  background-color: var(--vkui--color_background_contrast);
  border: var(--vkui--size_border--regular) solid var(--vkui--color_separator_primary_alpha);
  border-radius: 50%;
  box-shadow: var(--vkui--elevation3);
  transition: background-color 0.15s ease-out;
}

.focusVisible {
  outline: var(--vkui_internal--outline);
  outline-offset: calc(-1 * var(--vkui--size_border--regular));
}

.hover {
  background-color: var(--vkui--color_background_contrast--hover);
}

.active {
  background-color: var(--vkui--color_background_contrast--active);
}

/**
 * Задаём ширину и высоту родителя, чтобы скринридер правильно выделял элемент (скопировано с MUI).
 */
.nativeInput {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0 none;
  clip-path: inset(50%);
  direction: ltr;
}