.compare-slider_ba {
  --compare-slider-pos: 50%;
  --compare-slider-edge: 12px;
  --compare-slider-toggle-gap: 8px;
  --compare-slider-clamped: clamp(var(--compare-slider-edge), var(--compare-slider-pos), calc(100% - var(--compare-slider-edge)));
  max-width: 1200px;
  min-width: 280px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}
.compare-slider_ba.is-dragging { cursor: ew-resize; user-select: none; }
.compare-slider_ba picture,
.compare-slider_ba img { display: block; width: 100%; }

.compare-slider_resize { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 calc(100% - var(--compare-slider-clamped)) 0 0); }
.compare-slider_resize img { max-width: none; height: 100% !important; object-fit: cover; }
.compare-slider_resize .b-hotspots-toggle { left: auto; right: calc(100% - var(--compare-slider-clamped) + 2px + var(--compare-slider-toggle-gap)); }

.compare-slider_bar { position: absolute; z-index: 2; top: 0; left: var(--compare-slider-clamped); width: 4px; height: 100%; transform: translateX(-50%); background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0,0,0,0.33); cursor: ew-resize; touch-action: none; }
.compare-slider_bar:after { content: ''; position: absolute; top: 50%; width: 32px; height: 32px; margin: -14px 0 0 -14px; background-image: url(https://flooranddecor.a.bigcontent.io/v1/static/fnd-logo-4x); background-size: 100% 100%; border: 1px solid #FFFFFF; box-sizing: border-box; }
.compare-slider_arrow { position: absolute; max-width: none; width: 24px; height: 24px; color: white; top: calc(50% - 10px); background-image: url(https://flooranddecor.a.bigcontent.io/v1/static/icon-arrow-right-small-white); background-size: contain; background-repeat: no-repeat; background-position: 70% 50%; }
.compare-slider_ba ._left { transform: scaleX(-1); left: -38px; }
.compare-slider_ba ._right { right: -38px; }