:host {
  --exposure: 50%;

  --thumb-background-color: hsla(0, 0%, 100%, 0.9);
  --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="${thumbSvgWidth}" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="${thumbSvgWidth}" d="M40 20 L50 30 L40 40"/></svg>');
  --thumb-size: clamp(3em, 10vmin, 5em);
  --thumb-radius: 50%;
  --thumb-border-color: hsla(0, 0%, 0%, 0.9);
  --thumb-border-size: 2px;

  --focus-width: var(--thumb-border-size);
  --focus-color: hsl(200, 100%, 80%);

  --divider-width: 2px;
  --divider-color: hsla(0, 0%, 0%, 0.9);

  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  position: relative;
}

::slotted(img) {
  height: auto;
  width: 100%;
}

::slotted([slot='image-2']) {
  clip-path: polygon(
    calc(var(--exposure) + var(--divider-width) / 2) 0,
    100% 0,
    100% 100%,
    calc(var(--exposure) + var(--divider-width) / 2) 100%
  );
}

slot {
  display: flex;
  flex-direction: column;
  width: 100%;
}

slot[name='image-2'] {
  position: absolute;
  top: 0;
  filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));
}

label {
  align-items: stretch;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

input {
  cursor: col-resize;
  margin: 0 calc(var(--thumb-size) / -2);
  width: calc(100% + var(--thumb-size));
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
}

::-moz-range-thumb {
  background-color: var(--thumb-background-color);
  background-image: var(--thumb-background-image);
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--thumb-radius);
  border: var(--thumb-border-size) var(--thumb-border-color) solid;
  color: var(--thumb-border-color);
  width: var(--thumb-size);
  height: var(--thumb-size);
}

::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--thumb-background-color);
  background-image: var(--thumb-background-image);
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--thumb-radius);
  border: var(--thumb-border-size) var(--thumb-border-color) solid;
  color: var(--thumb-border-color);
  width: var(--thumb-size);
  height: var(--thumb-size);
}

input:focus::-moz-range-thumb {
  background-color: var(--thumb-background-color);
  background-image: var(--thumb-background-image);
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--thumb-radius);
  border: var(--thumb-border-size) var(--thumb-border-color) solid;
  color: var(--thumb-border-color);
  width: var(--thumb-size);
  height: var(--thumb-size);
}

input:focus::-webkit-slider-thumb {
  background-color: var(--thumb-background-color);
  background-image: var(--thumb-background-image);
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--thumb-radius);
  border: var(--thumb-border-size) var(--thumb-border-color) solid;
  color: var(--thumb-border-color);
  width: var(--thumb-size);
  height: var(--thumb-size);
}