.viscmp {
  --viscmp-position: 50%;
  --viscmp-aspect: 16/9;
  --viscmp-fit: cover;
  --viscmp-object-position: 50% 50%;
  --viscmp-divider-color: #fff;
  --viscmp-divider-width: 2px;
  --viscmp-handle-size: 48px;
  --viscmp-radius: 0px;
  --viscmp-overlay-opacity: 0;
  --viscmp-width: 100%;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  width: var(--viscmp-width);
}

.viscmp *,
.viscmp *::before,
.viscmp *::after {
  box-sizing: inherit;
}

.viscmp__stage,
.viscmp__layer {
  position: relative;
}

.viscmp__layer + .viscmp__layer {
  margin-top: 1rem;
}

.viscmp__img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.viscmp__label {
  background: rgb(0 0 0 / 70%);
  border-radius: 3px;
  color: #fff;
  font: 600 0.875rem/1.2 system-ui, sans-serif;
  padding: 0.4rem 0.6rem;
  position: absolute;
  top: 1rem;
}

.viscmp__label--before { inset-inline-start: 1rem; }
.viscmp__label--after { inset-inline-end: 1rem; }

.viscmp--vertical .viscmp__label--after {
  bottom: 1rem;
  top: auto;
}

.viscmp__range,
.viscmp__divider,
.viscmp__overlay {
  display: none;
}

.viscmp.is-enhanced .viscmp__stage {
  aspect-ratio: var(--viscmp-aspect);
  background: #111;
  border-radius: var(--viscmp-radius);
  cursor: ew-resize;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.viscmp--vertical.is-enhanced .viscmp__stage {
  cursor: ns-resize;
  touch-action: auto;
}

.viscmp.is-enhanced .viscmp__layer {
  inset: 0;
  margin: 0;
  position: absolute;
}

.viscmp--aspect-auto.is-enhanced .viscmp__stage {
  aspect-ratio: auto;
}

.viscmp--aspect-auto.is-enhanced .viscmp__layer--before {
  position: relative;
}

.viscmp--aspect-auto.is-enhanced .viscmp__layer--before .viscmp__img {
  height: auto;
}

.viscmp.is-enhanced .viscmp__layer--after {
  clip-path: inset(0 0 0 var(--viscmp-position));
}

:dir(rtl) .viscmp--horizontal.is-enhanced .viscmp__layer--after,
[dir="rtl"] .viscmp--horizontal.is-enhanced .viscmp__layer--after,
.rtl .viscmp--horizontal.is-enhanced .viscmp__layer--after {
  clip-path: inset(0 var(--viscmp-position) 0 0);
}

.viscmp--vertical.is-enhanced .viscmp__layer--after {
  clip-path: inset(var(--viscmp-position) 0 0 0);
}

.viscmp.is-enhanced .viscmp__img {
  height: 100%;
  object-fit: var(--viscmp-fit);
  object-position: var(--viscmp-object-position);
  width: 100%;
}

.viscmp.is-enhanced .viscmp__overlay {
  background: rgb(0 0 0 / var(--viscmp-overlay-opacity));
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.viscmp.is-enhanced .viscmp__range {
  display: block;
  height: 1px;
  left: 50%;
  opacity: 0.001;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 1px;
  z-index: 5;
}

.viscmp.is-enhanced .viscmp__range:focus-visible + .viscmp__divider .viscmp__handle {
  outline: 3px solid #1473e6;
  outline-offset: 3px;
}

.viscmp.is-enhanced .viscmp__divider {
  background: var(--viscmp-divider-color);
  display: block;
  height: 100%;
  inset-inline-start: var(--viscmp-position);
  pointer-events: auto;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: var(--viscmp-divider-width);
  z-index: 4;
}

:dir(rtl) .viscmp--horizontal.is-enhanced .viscmp__divider,
[dir="rtl"] .viscmp--horizontal.is-enhanced .viscmp__divider,
.rtl .viscmp--horizontal.is-enhanced .viscmp__divider {
  transform: translateX(50%);
}

.viscmp--vertical.is-enhanced .viscmp__divider {
  height: var(--viscmp-divider-width);
  left: 0;
  top: var(--viscmp-position);
  transform: translateY(-50%);
  width: 100%;
}

.viscmp__handle {
  align-items: center;
  background: #151515;
  border: 2px solid var(--viscmp-divider-color);
  border-radius: 50%;
  display: flex;
  height: var(--viscmp-handle-size);
  justify-content: space-evenly;
  inset-inline-start: 50%;
  position: absolute;
  top: 50%;
  touch-action: none;
  transform: translate(-50%, -50%);
  width: var(--viscmp-handle-size);
}

:dir(rtl) .viscmp--horizontal .viscmp__handle,
[dir="rtl"] .viscmp--horizontal .viscmp__handle,
.rtl .viscmp--horizontal .viscmp__handle {
  transform: translate(50%, -50%);
}

.viscmp--vertical .viscmp__handle {
  flex-direction: column;
  touch-action: pan-x;
}

.viscmp__arrow {
  border-bottom: 5px solid transparent;
  border-right: 7px solid #fff;
  border-top: 5px solid transparent;
  display: block;
  height: 0;
  width: 0;
}

.viscmp__arrow--forward {
  border-left: 7px solid #fff;
  border-right: 0;
}

.viscmp--vertical .viscmp__arrow {
  border-bottom: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 0;
}

.viscmp--vertical .viscmp__arrow--forward {
  border-bottom: 0;
  border-top: 7px solid #fff;
}

.viscmp__sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

@media (forced-colors: active) {
  .viscmp__divider,
  .viscmp__handle {
    forced-color-adjust: none;
  }
}