:root {
  --clr-black: #000;
  --clr-dark: #333;
  --clr-blue: #5fb4e4;
  --clr-white: #fff;
  --split-point: 900px;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

.splitter_container {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-dark);
  overflow: hidden;
}

.item {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  /*flex-wrap: wrap;*/
  justify-content: center;
  align-items: center;
  font-size: 9em;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
}

.item_left {
  background: var(--clr-white);
  color: var(--clr-dark);
}

.item_right {
  background: var(--clr-dark);
  color: var(--clr-white);
  clip-path: inset(0 0 0 var(--split-point));
}

.splitter {
  width: 1.6rem;
  height: 100%;
  transform: translateX(calc(var(--split-point) - 0.8rem));
  cursor: ew-resize;
  touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.splitter::before {
  content: "";
  display: block;
  height: 100%;
  width: 0px;
  margin: 0 auto;
  background: var(--clr-black);
  pointer-events: none;
}

.splitter__scrubber {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  height: 15%;
  aspect-ratio: 1/1;
  
  padding: 0;
  transform: translate(-50%, -50%);

  border-radius: 50%;
  justify-content: center;
  align-items: center;
  
  background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(1.3rem);
    backdrop-filter: blur(1.3rem);
	outline: 1px solid rgba(255, 255, 255, 0.3);
	outline-offset:-1px;
}

.splitter__scrubber::after { 
	content: ''; display: block; height: 26%; /*width: 50%;*/ aspect-ratio: 48/25; background: url('images2026/arrows.svg') center center / contain no-repeat;
}

/*
.scrubber__arrow {
  fill: var(--clr-blue);
}
*/

@media (max-width: 750px){
	.splitter__scrubber { width: 2.8rem; height: 2.8rem; }
}