/* Shared carousel behaviour
   Everything a Bootstrap carousel needs that does not depend on what is
   inside the slides. The MultiImage slider and the CardGroup carousel both
   carry .cms-carousel and the classes below, which CarouselPresentation
   builds for them, so the two cannot drift apart.

   Anything about images belongs in multi-image.css, and anything about cards
   in cards.css. */

.cms-carousel {
    position: relative;
}

/* Transition -------------------------------------------------------------
   Bootstrap hands us two hooks. Sideways slide translates the track; fade
   stacks the items and cross animates opacity, with z-index deciding which
   is on top. Everything below is one of those two shapes.

   Bootstrap's own rules are two classes deep, and this file loads after its
   stylesheet, so a .cms- prefixed selector always wins. */

/* Speed. Bootstrap fixes its transitions at .6s; this makes that a variable
   so it applies to whichever transition is in play. */
.cms-carousel {
    --cms-speed: 0.6s;
}

.cms-speed--fast { --cms-speed: 0.3s; }
.cms-speed--slow { --cms-speed: 1.2s; }

.cms-carousel .carousel-item {
    transition-duration: var(--cms-speed);
}

/* Fade holds the outgoing slide with a delay rather than a duration, and
   Bootstrap writes .6s into it literally. Left alone, the old slide would
   vanish early at any other speed. */
.cms-carousel.carousel-fade .active.carousel-item-start,
.cms-carousel.carousel-fade .active.carousel-item-end {
    transition: opacity 0s var(--cms-speed);
}

/* Slide up. Same track movement as Bootstrap's slide, on the other axis.
   .carousel-inner already clips, so nothing else is needed. */
.cms-slide-y .active.carousel-item-end,
.cms-slide-y .carousel-item-next:not(.carousel-item-start) {
    transform: translateY(100%);
}

.cms-slide-y .active.carousel-item-start,
.cms-slide-y .carousel-item-prev:not(.carousel-item-end) {
    transform: translateY(-100%);
}

/* Zoom. The fade shape with scale added: the arriving slide grows into place
   while the leaving one pushes past. Scaling the item, not its contents,
   keeps this independent of Ken Burns, which scales the image itself. */
.cms-zoom .carousel-item {
    opacity: 0;
    transform: scale(0.94);
    transition-property: opacity, transform;
}

.cms-zoom .carousel-item-next.carousel-item-start,
.cms-zoom .carousel-item-prev.carousel-item-end,
.cms-zoom .carousel-item.active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
}

.cms-zoom .active.carousel-item-start,
.cms-zoom .active.carousel-item-end {
    z-index: 0;
    opacity: 0;
    transform: scale(1.06);
}

/* Before the start class lands, Bootstrap still has the incoming item
   translated off screen. Hold it at the starting scale instead. */
.cms-zoom .carousel-item-next:not(.carousel-item-start),
.cms-zoom .carousel-item-prev:not(.carousel-item-end) {
    transform: scale(0.94);
}

/* None. Wins over the speed rule above by being a class deeper. */
.cms-carousel.cms-instant .carousel-item,
.cms-carousel.cms-instant.carousel-fade .carousel-item {
    transition: none;
}

/* Tools ------------------------------------------------------------------
   Bottom right, clear of the admin edit controls that sit top right in the
   content preview. The dots sit bottom centre, so this corner is free. */
.cms-tools {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 3;
    display: flex;
    gap: 0.25rem;
}

.cms-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(0, 0, 0, 0.45);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(0, 0, 0, 0.7);
    --bs-btn-hover-border-color: transparent;
    line-height: 1;
}