/* ============================
 * MD Words Plus Slider
 * ============================ */

.md-words-plus-slider {
  position: relative;
  padding-left: 3rem;
  padding-right: 3rem;

  opacity: 0;
  transition: opacity 1s ease-out;
}


/* Viewport controls clipping */
.md-wps-viewport {
  overflow: hidden;
  width: 100%;
}


/* Track moves horizontally */
.md-wps-track {
  display: flex;
  will-change: transform;
}

/* Slides */
.md-wps-slide {
  box-sizing: border-box;
}

/* Fade-in */
.md-words-plus-slider {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* ----------------------------
 * Arrows
 * ---------------------------- */

.md-wps-prev,
.md-wps-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 5;
}

.md-wps-prev {
  left: 0;
  background-image: url('../img/arrow-prev.svg');
}

.md-wps-next {
  right: 0;
  background-image: url('../img/arrow-next.svg');
}


.md-wps-prev:disabled,
.md-wps-next:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ----------------------------
 * Dots
 * ---------------------------- */

.md-wps-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.md-wps-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: none;
  background-color: #ccc;
  cursor: pointer;
  padding: 0;
}

.md-wps-dot.is-active {
  background-color: #333;
}