.host {
  /* Switch__track */
  --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
  --vkui_internal--Switch__track_outline_width: 2px;
  --vkui_internal--Switch__handle_shift_x_direction: 1;
  --vkui_internal--Switch__handle_shift_x: calc(
    var(--vkui_internal--Switch__handle_shift_x_direction) *
    var(--vkui_internal--Switch__track_outline_width)
  );
  --vkui_internal--Switch__handle_shift_y: calc(
    var(--vkui_internal--Switch__track_height) -
    var(--vkui_internal--Switch__handle_height) -
    var(--vkui_internal--Switch__track_outline_width)
  );
  --vkui_internal--Switch__handle_scale: calc(
    var(--vkui_internal--Switch__handle_widthNoUnit--not-checked) /
    var(--vkui_internal--Switch__handle_heightNoUnit)
  );

  position: relative;
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: var(--vkui_internal--Switch__track_shape);
  -webkit-tap-highlight-color: transparent;
}

.rtl {
  --vkui_internal--Switch__handle_shift_x_direction: -1;
}

.disabled {
  cursor: not-allowed;
  opacity: var(--vkui_internal--Switch_disabled);
}

.default {
  --vkui_internal--Switch_disabled: 0.5;
  /* Switch__track */
  --vkui_internal--Switch__track_width: 52px;
  --vkui_internal--Switch__track_height: 32px;
  --vkui_internal--Switch__track_color: var(--vkui--color_background);
  --vkui_internal--Switch__track_color_duration: 67ms;
  --vkui_internal--Switch__track_shadow_visibility: 1;

  /* Switch__handle */
  --vkui_internal--Switch__handle_width: 28px;
  --vkui_internal--Switch__handle_widthNoUnit--checked: 24;
  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 16;
  --vkui_internal--Switch__handle_height: 28px;
  --vkui_internal--Switch__handle_heightNoUnit: 28;
  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_medium);
  --vkui_internal--Switch__handle_color_duration: 67ms;
  --vkui_internal--Switch__handle_scale_duration: 250ms;
  --vkui_internal--Switch__handle_shift_x_duration: 300ms;
  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --vkui_internal--Switch__handle_shadow: none;
}

.default.sizeYCompact {
  /* Switch__track */
  --vkui_internal--Switch__track_width: 32px;
  --vkui_internal--Switch__track_height: 20px;

  /* Switch__handle */
  --vkui_internal--Switch__handle_width: 16.5px;
  --vkui_internal--Switch__handle_widthNoUnit--checked: 16;
  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 10;
  --vkui_internal--Switch__handle_height: 16.5px;
  --vkui_internal--Switch__handle_heightNoUnit: 16.5;
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .default.sizeYNone {
    /* Switch__track */
    --vkui_internal--Switch__track_width: 32px;
    --vkui_internal--Switch__track_height: 20px;

    /* Switch__handle */
    --vkui_internal--Switch__handle_width: 16.5px;
    --vkui_internal--Switch__handle_widthNoUnit--checked: 16;
    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 10;
    --vkui_internal--Switch__handle_height: 16.5px;
    --vkui_internal--Switch__handle_heightNoUnit: 16.5;
  }
}

.ios {
  --vkui_internal--Switch_disabled: 0.7;
  /* Switch__track */
  --vkui_internal--Switch__track_width: 51px;
  --vkui_internal--Switch__track_height: 31px;
  --vkui_internal--Switch__track_color: var(--vkui--color_track_background);
  --vkui_internal--Switch__track_color_duration: 200ms;

  /* Switch__handle */
  --vkui_internal--Switch__handle_width: 27px;
  --vkui_internal--Switch__handle_widthNoUnit--pressed: 27px;
  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 27px;
  --vkui_internal--Switch__handle_height: 27px;
  --vkui_internal--Switch__handle_heightNoUnit: 27;
  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
  --vkui_internal--Switch__handle_color_duration: 200ms;
  --vkui_internal--Switch__handle_scale_duration: 200ms;
  --vkui_internal--Switch__handle_shift_x_duration: 200ms;
  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.36, -0.24, 0.26, 1.32);
  --vkui_internal--Switch__handle_shadow:
    0 3px 8px rgb(0, 0, 0, 0.15), 0 3px 1px rgb(0, 0, 0, 0.06), inset 0 0 0 0.5px rgb(0, 0, 0, 0.04);
}

.ios.sizeYCompact {
  /* Switch__track */
  --vkui_internal--Switch__track_width: 47px;
  --vkui_internal--Switch__track_height: 27px;

  /* Switch__handle */
  --vkui_internal--Switch__handle_width: 23px;
  --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
  --vkui_internal--Switch__handle_height: 23px;
  --vkui_internal--Switch__handle_heightNoUnit: 23;
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .ios.sizeYNone {
    /* Switch__track */
    --vkui_internal--Switch__track_width: 47px;
    --vkui_internal--Switch__track_height: 27px;

    /* Switch__handle */
    --vkui_internal--Switch__handle_width: 23px;
    --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
    --vkui_internal--Switch__handle_height: 23px;
    --vkui_internal--Switch__handle_heightNoUnit: 23;
  }
}

.inputFake {
  display: block;
}

.inputNative:checked + .inputFake {
  /* Switch__track */
  --vkui_internal--Switch__track_color: var(--vkui--color_background_accent);

  /* Switch__handle */
  --vkui_internal--Switch__handle_shift_x: calc(
    var(--vkui_internal--Switch__handle_shift_x_direction) *
    calc(
      var(--vkui_internal--Switch__track_width) -
      var(--vkui_internal--Switch__handle_width) -
      var(--vkui_internal--Switch__track_outline_width)
    )
  );
  --vkui_internal--Switch__handle_scale: calc(
    var(--vkui_internal--Switch__handle_widthNoUnit--checked) /
    var(--vkui_internal--Switch__handle_heightNoUnit)
  );
  --vkui_internal--Switch__track_shadow_visibility: 0;
  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
}

.default:not(.disabled) .inputFake:active {
  /* Switch__handle */
  --vkui_internal--Switch__handle_scale: 1;
  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.2, 0, 0, 1);
}

.track {
  position: relative;
  display: block;
  inline-size: var(--vkui_internal--Switch__track_width);
  block-size: var(--vkui_internal--Switch__track_height);
  background-color: var(--vkui_internal--Switch__track_color);
  border-radius: var(--vkui_internal--Switch__track_shape);
  transition: background-color var(--vkui_internal--Switch__track_color_duration) linear;
}

.default .track::before {
  position: absolute;
  inset: 0;
  content: '';
  border: var(--vkui_internal--Switch__track_outline_width) solid
    var(--vkui--color_field_border_alpha);
  border-radius: inherit;
  opacity: var(--vkui_internal--Switch__track_shadow_visibility);
  transition: opacity var(--vkui_internal--Switch__track_color_duration) linear;
}

.handle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--vkui_internal--Switch__handle_width);
  block-size: var(--vkui_internal--Switch__handle_height);
  border-radius: 9999px;
  transform: translate(
    var(--vkui_internal--Switch__handle_shift_x),
    var(--vkui_internal--Switch__handle_shift_y)
  );
  transition: transform var(--vkui_internal--Switch__handle_shift_x_duration)
    var(--vkui_internal--Switch__handle_shift_x_easing);
}

.handle::after {
  position: absolute;
  inset: 0;
  content: '';
  background-color: var(--vkui_internal--Switch__handle_color);
  border-radius: inherit;
  box-shadow: var(--vkui_internal--Switch__handle_shadow);
  transform: scale(var(--vkui_internal--Switch__handle_scale));
  transition-timing-function: var(--vkui_internal--Switch__handle_shift_x_easing), linear;
  transition-duration:
    var(--vkui_internal--Switch__handle_scale_duration),
    var(--vkui_internal--Switch__handle_color_duration);
  transition-property: transform, background-color;
}

.handleWithRipple::before {
  --vkui_internal--Switch__handleRipple_opacity: 0;
  --vkui_internal--Switch__handleRipple_opacity_duration: 15ms;
  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_icon_medium);
  --vkui_internal--Switch__handleRipple_color_duration: 15ms;

  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 40px;
  block-size: 40px;
  content: '';
  background-color: var(--vkui_internal--Switch__handleRipple_color);
  border-radius: inherit;
  opacity: var(--vkui_internal--Switch__handleRipple_opacity);
  transform: translate(calc(-50% * var(--vkui_internal--Switch__handle_shift_x_direction)), -50%);
  transition-timing-function: linear;
  transition-duration:
    var(--vkui_internal--Switch__handleRipple_opacity_duration),
    var(--vkui_internal--Switch__handleRipple_color_duration);
  transition-property: opacity, background-color;
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .handleWithRipple::before {
    inline-size: 24px;
    block-size: 24px;
  }
}

/* устройства с мышкой */

@media (hover: hover) and (pointer: fine) {
  .inputFake:hover .handleWithRipple::before {
    --vkui_internal--Switch__handleRipple_opacity: 0.08;
  }
}

.inputFake:active .handleWithRipple::before {
  --vkui_internal--Switch__handleRipple_opacity: 0.12;
}

.inputNative:checked + .inputFake .handleWithRipple::before {
  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_background_accent);
}

/* тач-устройства */

@media (hover: none) {
  .handleWithRipple::before {
    --vkui_internal--Switch__handleRipple_opacity_duration: 375ms;
  }

  .inputFake:active .handleWithRipple::before {
    --vkui_internal--Switch__handleRipple_opacity_duration: 105ms;
  }
}