.before-after-slider {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.before-after-slider__wrapper {
  position: relative;
  height: var(--slider-height, 400px);
  overflow: hidden;
  margin: 0;
  border: var(--border-width, 0) solid rgba(var(--border-color-rgb), var(--border-opacity, 1));
  border-radius: var(--border-radius, 0);
  contain: content;
}

/* Alignment variations */
.before-after-slider__wrapper--left {
  max-width: var(--slider-max-width, 800px);
  margin: 0;
}

.before-after-slider__wrapper--center {
  max-width: var(--slider-max-width, 800px);
  margin: 0 auto;
}

.before-after-slider__wrapper--right {
  max-width: var(--slider-max-width, 800px);
  margin: 0 0 0 auto;
}

.before-after-slider__wrapper--full {
  max-width: none;
  margin: 0;
}

/* Create containers for before/after content */
.before-after-slider__before-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.before-after-slider__after-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.before-after-slider__before,
.before-after-slider__after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after-slider__after {
  
}

.before-after-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--line-width);
  background: rgba(var(--line-color-rgb), var(--line-opacity));
  cursor: ew-resize;
  transform: translateX(-50%);
}

/* Base styles for handle shapes */
.before-after-slider__handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--handle-size, 40px);
  height: var(--handle-size, 40px);
  border: var(--handle-width) solid rgba(var(--handle-color-rgb), var(--handle-opacity));
  transform: translate(-50%, -50%);
  background: rgba(var(--handle-bg-color-rgb), var(--handle-bg-opacity));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-size);
  color: rgba(var(--icon-color-rgb), var(--icon-opacity));
}

/* Icons */
.before-after-slider__handle--no-icon::before {
  content: "";
}

.before-after-slider__handle--mirrored-chevrons::before {
  content: "code";
}

.before-after-slider__handle--arrows-outward::before {
  content: "arrows_outward";
}

.before-after-slider__handle--swap-arrows::before {
  content: "sync_alt";
}

.before-after-slider__handle--bars::before {
  content: "menu";
}

.before-after-slider__handle--arrow-left::before {
  content: "arrow_back";
}

.before-after-slider__handle--arrow-right::before {
  content: "arrow_forward";
}

.before-after-slider__handle--chevron-left::before {
  content: "chevron_left";
}

.before-after-slider__handle--chevron-right::before {
  content: "chevron_right";
}

.before-after-slider__handle--double-chevron-left::before {
  content: "keyboard_double_arrow_left";
}

.before-after-slider__handle--double-chevron-right::before {
  content: "keyboard_double_arrow_right";
}

.before-after-slider__handle--caret-left::before {
  content: "arrow_left";
}

.before-after-slider__handle--caret-right::before {
  content: "arrow_right";
}

/* Solid line for "none" option */
.before-after-slider__handle--none {
  background: rgba(var(--line-color-rgb), var(--line-opacity));
}

/* Circle and Square shape lines */
.before-after-slider__handle--circle,
.before-after-slider__handle--square {
  --half-handle-size: calc(var(--handle-size, 40px) / 2);
  background: linear-gradient(
    to bottom,
    rgba(var(--line-color-rgb), var(--line-opacity)) 0%,
    rgba(var(--line-color-rgb), var(--line-opacity)) calc(50% - var(--half-handle-size) + 1px),
    transparent calc(50% - var(--half-handle-size) + 1px),
    transparent calc(50% + var(--half-handle-size)),
    rgba(var(--line-color-rgb), var(--line-opacity)) calc(50% + var(--half-handle-size)),
    rgba(var(--line-color-rgb), var(--line-opacity)) 100%
  );
}

/* Rectangle shape lines */
.before-after-slider__handle--rectangle {
  --rectangle-height: calc(var(--handle-size, 40px) * 1.25);
  --half-rectangle-height: calc(var(--rectangle-height) / 2);
  background: linear-gradient(
    to bottom,
    rgba(var(--line-color-rgb), var(--line-opacity)) 0%,
    rgba(var(--line-color-rgb), var(--line-opacity)) calc(50% - var(--half-rectangle-height) + 1px),
    transparent calc(50% - var(--half-rectangle-height) + 1px),
    transparent calc(50% + var(--half-rectangle-height)),
    rgba(var(--line-color-rgb), var(--line-opacity)) calc(50% + var(--half-rectangle-height)),
    rgba(var(--line-color-rgb), var(--line-opacity)) 100%
  );
}

/* Capsule shape lines */
.before-after-slider__handle--capsule {
  --capsule-height: calc(var(--handle-size, 40px) * 1.25);
  --half-capsule-height: calc(var(--capsule-height) / 2);
  background: linear-gradient(
    to bottom,
    rgba(var(--line-color-rgb), var(--line-opacity)) 0%,
    rgba(var(--line-color-rgb), var(--line-opacity)) calc(50% - var(--half-capsule-height) + 1px),
    transparent calc(50% - var(--half-capsule-height) + 1px),
    transparent calc(50% + var(--half-capsule-height)),
    rgba(var(--line-color-rgb), var(--line-opacity)) calc(50% + var(--half-capsule-height)),
    rgba(var(--line-color-rgb), var(--line-opacity)) 100%
  );
}

/* Hide handle shape when "none" is selected */
.before-after-slider__handle--none::before {
  display: none;
}

/* Circle shape (default) */
.before-after-slider__handle--circle::before {
  border-radius: 50%;
}

/* Square shape */
.before-after-slider__handle--square::before {
  border-radius: 0;
}

/* Rectangle shape */
.before-after-slider__handle--rectangle::before {
  width: calc(var(--handle-size, 40px) * 0.75);
  height: calc(var(--handle-size, 40px) * 1.25);
  border-radius: 0;
}

/* Capsule shape */
.before-after-slider__handle--capsule::before {
  width: calc(var(--handle-size, 40px) * 0.75);
  height: calc(var(--handle-size, 40px) * 1.25);
  border-radius: calc(var(--handle-size, 40px) * 0.375);
}

.before-after-slider__placeholder {
  text-align: center;
  padding: 2em;
  background: #f6f6f7;
  border-radius: 3px;
  color: #637381;
  font-size: 16px;
}

/* Labels css */
.before-after-slider__label {
  position: absolute;
  bottom: 20px;
  padding: 5px 10px;
  background: rgba(var(--label-bg-color-rgb), 0.75);
  color: rgba(var(--label-text-color-rgb), 1);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  border-radius: 2px;
}

.before-after-slider__label--before {
  left: 20px;
}

.before-after-slider__label--after {
  right: 20px;
}