.vk-swipe {
  position: relative;
  width: 100%;
  height: 100%;
  --vk-swipe-split-left: 50%;
  --vk-swipe-split-top: 50%;
  --vk-swipe-split-bg: #323232bf;
  --vk-swipe-split-slider-offset: 45%;
}
.vk-swipe.is-disabled .vk-swipe-item.is-above {
  clip-path: initial;
}
.vk-swipe-item.is-above {
  z-index: 1;
}
.vk-swipe-item.is-above.is-horizontal {
  clip-path: polygon(
    0 0, 
    var(--vk-swipe-split-left) 0,
    var(--vk-swipe-split-left) 100%, 
    0 100%
  );
}
.vk-swipe-item.is-above.is-vertical {
  clip-path: polygon(
    0 0, 
    100% 0,
    100% var(--vk-swipe-split-top), 
    0 var(--vk-swipe-split-top)
  );
}
.vk-swipe-line {
  background-color: var(--vk-swipe-split-bg);
  position: absolute;
  user-select: none;
  z-index: 1;
}
.vk-swipe-line.is-horizontal {
  bottom: 0;
  top: 0;
  left: var(--vk-swipe-split-left);
  width: 10px;
}
.vk-swipe-line.is-vertical {
  left: 0;
  right: 0;
  height: 10px;
  width: auto;
  top: var(--vk-swipe-split-top);
}
.vk-swipe-float-block {
  cursor: grab;
  background-color: var(--vk-swipe-split-bg);
  border-radius: 50%;
  bottom: 0;
  height: 30px;

  position: absolute;
  user-select: none;
  width: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.vk-swipe-float-block.is-horizontal {
  left: var(--vk-swipe-split-left);
  top: var(--vk-swipe-split-slider-offset);
  margin-left: -10px;
  transform: rotate(90deg);
}
.vk-swipe-float-block.is-vertical {
  left: var(--vk-swipe-split-slider-offset);
  top: var(--vk-swipe-split-top);
  margin-top: -10px;
}
.vk-swipe-item{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}