/* Containers  */
.axili-slides {
  --controls-width: 3rem;
  position: relative;
  height: 75dvh;

  overflow: hidden;
}

.axili-slide {
  object-fit: cover;
  height: 100%;

  display: none;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

.axili-slide.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* Controls  */

.axili-slides-info {
  left: var(--controls-width);
  right: var(--controls-width);
}

.axili-slides-info,
.axili-slides-left,
.axili-slides-right {
  position: absolute;
  z-index: 2;
  bottom: 0;
}

.axili-slides-left:hover,
.axili-slides-right:hover,
.axili-slides-left:focus-visible,
.axili-slides-right:focus-visible {
  background-color: hsl(var(--axili-surface), 0.75);
  color: color-mix(
    in srgb,
    hsl(var(--axili-primary)) 20%,
    hsl(var(--axili-title))
  );
}

.axili-slides-left:focus-visible,
.axili-slides-right:focus-visible,
.axili-slide-info:focus-visible {
  outline: hsl(var(--axili-title));
  outline-width: 2px;
  outline-style: solid;
}

.axili-slides-left,
.axili-slides-right {
  cursor: pointer;
  top: 0;
  width: var(--controls-width);

  background-color: hsl(var(--axili-background), 0.5);
  color: hsl(var(--axili-title));
  font-size: 2rem;
  outline: none;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

.axili-slides-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.axili-slide-info {
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 999999px;

  background-color: hsl(var(--axili-surface), 0.5);
  box-shadow: 0 0 2px hsl(var(--axili-title));

  width: 1rem;
  height: 1rem;
}

.axili-slide-info.active {
  background-color: hsl(var(--axili-primary));
}

.axili-slides-left {
  left: 0;
}

.axili-slides-right {
  right: 0;
}