// Carousel

$carousel-control-offset: 30px !default;

$carousel-indicator-size: 14px !default;
$carousel-indicator-spacer: 6px !default;
$carousel-indicator-bg: $border-color-light !default;
$carousel-indicator-active-bg: $darkgray !default;

$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;

$carousel-control-icon-width: 20px !default;

$carousel-transition: transform .6s ease !default;


// Wrapper for the slide container and indicators
.carousel {
   position: relative;
   padding: 20px 0 44px;
   border-top: 1px solid $border-color-light;
   border-bottom: 1px solid $border-color-light;
   margin-bottom: 35px;
}

.carousel-inner {
   position: relative;
   width: 100%;
   overflow: hidden;
}

.carousel-item {
   position: relative;
   display: none;
   align-items: center;
   width: 100%;
   transition: $carousel-transition;
   backface-visibility: hidden;
   perspective: 1000px;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
   display: block;
}

.carousel-item-next,
.carousel-item-prev {
   position: absolute;
   top: 0;
}

// CSS3 transforms when supported by the browser
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
   transform: translateX(0);

   @supports (transform-style: preserve-3d) {
      transform: translate3d(0, 0, 0);
   }
}

.carousel-item-next,
.active.carousel-item-right {
   transform: translateX(100%);

   @supports (transform-style: preserve-3d) {
      transform: translate3d(100%, 0, 0);
   }
}

.carousel-item-prev,
.active.carousel-item-left {
   transform: translateX(-100%);

   @supports (transform-style: preserve-3d) {
      transform: translate3d(-100%, 0, 0);
   }
}


//
// Left/right controls for nav
//

.carousel-control-prev,
.carousel-control-next {
   position: absolute;
   top: 50%;
}

.carousel-control-prev {
   left: $carousel-control-offset;
}

.carousel-control-next {
   right: $carousel-control-offset;
}


// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.

.carousel-indicators {
   position: absolute;
   right: 0;
   bottom: 15px;
   left: 0;
   z-index: 15;
   display: flex;
   justify-content: center;
   padding-left: 0;
   list-style: none;
   margin: 0;

   li {
      position: relative;
      flex: 0 1 auto;
      width: $carousel-indicator-size;
      height: $carousel-indicator-size;
      margin-right: $carousel-indicator-spacer;
      margin-left: $carousel-indicator-spacer;
      text-indent: -999px;
      background-color: $carousel-indicator-bg;
      border-radius: 50%;
      transition: $base-transition;
      cursor: pointer;

      // Use pseudo classes to increase the hit area by $carousel-indicator-spacer on top and bottom.
      &::before,
      &::after {
         content: "";
         position: absolute;
         left: 0;
         display: inline-block;
         width: 100%;
         height: $carousel-indicator-spacer;
      }

      &::before {
         top: -$carousel-indicator-spacer;
      }

      &::after {
         bottom: -$carousel-indicator-spacer;
      }
   }

   li:hover,
   li:active,
   li:focus,
   .active {
      background-color: $carousel-indicator-active-bg;
   }
}


// Optional captions
//
//

.carousel-caption {
   position: absolute;
   right: ((100% - $carousel-caption-width) / 2);
   bottom: 20px;
   left: ((100% - $carousel-caption-width) / 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: $carousel-caption-color;
   text-align: center;
}