/* --- Scoped Carousel Component Styles --- */

.image-carousel * {
  box-sizing: border-box;
}

.image-carousel ul {
  width: 75vw;
  height: auto;
  padding: 20px;
  display: flex;
  gap: 4vw;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  anchor-name: --my-carousel;
  scroll-marker-group: after;
}

.image-carousel li {
  list-style-type: none;
  padding: 20px;
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.image-carousel ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  opacity: 0.7;
  cursor: pointer;
  position: absolute;
  position-anchor: --my-carousel;
}

.image-carousel ul::scroll-button(*):hover,
.image-carousel ul::scroll-button(*):focus {
  opacity: 1;
}

.image-carousel ul::scroll-button(*):active {
  translate: 1px 1px;
}

.image-carousel ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

.image-carousel ul::scroll-button(left) {
  content: "◄";
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) - 30px);
}

.image-carousel ul::scroll-button(right) {
  content: "►";
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) - 30px);
}

.image-carousel ul::scroll-marker-group {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.image-carousel li::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
}

.image-carousel li::scroll-marker:target-current {
  background-color: var(--pico-color);
}