.sandbox-ui-fader {
  --sandbox-fader-width: 20px;
  --sandbox-fader-height: 110px;
  --sandbox-fader-bg: color-mix(in srgb, var(--sandbox-surface) 78%, var(--sandbox-ruler-bg));
  --sandbox-fader-border: color-mix(in srgb, var(--sandbox-border) 84%, transparent);
  --sandbox-fader-thumb: color-mix(in srgb, var(--sandbox-surface) 92%, var(--sandbox-ruler-bg));
  --sandbox-fader-thumb-border: color-mix(in srgb, var(--sandbox-border) 88%, transparent);
  --sandbox-fader-accent: var(--sandbox-accent);
  position: relative;
  display: inline-block;
  width: var(--sandbox-fader-width);
  height: var(--sandbox-fader-height);
  border-left: 1px solid color-mix(in srgb, var(--sandbox-fader-border) 92%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--sandbox-fader-border) 92%, transparent);
  border-radius: 2px;
  background:
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), color-mix(in srgb, var(--sandbox-fader-border) 82%, transparent) 100%),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--sandbox-fader-border) 74%, transparent) 0 1px, transparent 1px 9px),
    var(--sandbox-fader-bg);
  touch-action: none;
  user-select: none;
  cursor: ns-resize;
}

.sandbox-ui-fader:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sandbox-fader-accent) 58%, transparent),
    0 0 0 3px color-mix(in srgb, var(--sandbox-fader-accent) 24%, transparent);
}

.sandbox-ui-fader.is-dragging {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sandbox-fader-accent) 46%, transparent);
}

.sandbox-ui-fader__thumb {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 8px;
  margin-left: -8px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--sandbox-fader-thumb-border) 92%, transparent);
  background: var(--sandbox-fader-thumb);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sandbox-fader-accent) 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--sandbox-text) 16%, transparent);
  top: calc(var(--sandbox-fader-height) - 8px);
  pointer-events: none;
}