//
// Carousel
// --------------------------------------------------

@use 'sass:math';

$carousel-height: $grid-unit-y * 50;
$carousel-bottom-height: $grid-unit-y * 12;
$carousel-image-height: $carousel-height - $carousel-bottom-height;

.carousel {
  position: relative;

  &-inner {
    height: $carousel-height;
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .item {
    position: relative;
    display: none;
    @include transition(0.6s ease-in-out left);

    // Account for jankitude on images
    > img,
    > a > img {
      @include img-responsive;

      line-height: 1;
    }

    // WebKit CSS3 transforms for supported devices
    @media all and (transform-3d), (-webkit-transform-3d) {
      @include transition-transform(0.6s ease-in-out);
      @include backface-visibility(hidden);
      @include perspective(1000px);

      &.next,
      &.active.right {
        @include translate3d(100%, 0, 0);

        left: 0;
      }
      &.prev,
      &.active.left {
        @include translate3d(-100%, 0, 0);

        left: 0;
      }
      &.next.left,
      &.prev.right,
      &.active {
        @include translate3d(0, 0, 0);

        left: 0;
      }
    }

    &-inner {
      height: $carousel-image-height;
      line-height: $carousel-image-height;

      img {
        max-height: $carousel-image-height;
        width: auto;
      }
    }
  }

  > .active,
  > .next,
  > .prev {
    display: block;
  }

  > .active {
    left: 0;
  }

  > .next,
  > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }

  > .next {
    left: 100%;
  }
  > .prev {
    left: -100%;
  }
  > .next.left,
  > .prev.right {
    left: 0;
  }

  > .active.left {
    left: -100%;
  }
  > .active.right {
    left: 100%;
  }

  &-caption {
    bottom: -$grid-unit-y * 12;
    padding-top: $grid-unit-y * 2;
    padding-bottom: $grid-unit-y * 2;
    position: absolute;
    right: 15%;
    left: 15%;
    z-index: 10;
    text-align: center;

    @include themes(color, carousel-caption-color);

    p {
      margin-bottom: 0;
    }

    & .btn {
      text-shadow: none; // No shadow for button elements in carousel-caption
    }
  }

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

  &-control {
    position: absolute;
    top: 0;
    left: 0;
    width: $carousel-control-width;
    font-size: $carousel-control-font-size;
    text-align: center;
    background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
    bottom: $carousel-bottom-height;

    @include themes(color, color-new-body-light);
    @include opacity($carousel-control-opacity);

    &:hover,
    &:focus {
      text-decoration: none;
      outline: 0;

      @include themes(color, color-new-heading);
      @include opacity(0.9);
    }

    &.left,
    &.right {
      filter: none;
    }
    &.right {
      right: 0;
      left: auto;
    }

    // Toggles
    .icon-prev,
    .icon-next,
    .glyphicon-chevron-left,
    .glyphicon-chevron-right {
      position: absolute;
      top: 50%;
      z-index: 5;
      display: inline-block;
      margin-top: -10px;

      @media screen and (min-width: $screen-sm-min) {
        width: ($carousel-control-font-size * 1.5);
        height: ($carousel-control-font-size * 1.5);
        margin-top: math.div($carousel-control-font-size, -2);
        font-size: ($carousel-control-font-size * 1.5);
      }

      &:before {
        font-family: $font-family-awesome;
        font-weight: $font-family-awesome-weight;
      }
    }

    .icon-prev,
    .glyphicon-chevron-left {
      left: 50%;
      margin-left: -$grid-unit-x;

      &:before {
        content: "\f053";
      }
    }

    .icon-next,
    .glyphicon-chevron-right {
      right: 50%;
      margin-right: -$grid-unit-x;

      &:before {
        content: "\f054";
      }
    }

    .icon-prev,
    .icon-next {
      width: $grid-unit-x * 3;
      height: $grid-unit-x * 3;
      font-family: serif;
      line-height: 1;
    }

    .icon-prev {
      &:before {
        content: "\2039";
      }
    }
    .icon-next {
      &:before {
        content: "\203a";
      }
    }
  }

  &-indicators {
    $size: $grid-unit-y * 2;

    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
    position: absolute;
    top: $carousel-image-height + $padding-base-vertical;
    bottom: auto;
    left: 50%;
    z-index: 15;
    width: 60%;

    li {
      width: $grid-unit-y * 2;
      height: $grid-unit-y * 2;
      margin: ceil($grid-unit-y * 0.5);
      border-radius: 50%;
      vertical-align: bottom;
      display: inline-block;
      text-indent: -999px;
      cursor: pointer;

      @include themes(background-color, carousel-indicator-bg);

      &:hover,
      &:focus {
        @include themes(background-color, carousel-indicator-hover-bg);
      }
    }

    .active {
      width: $size;
      height: $size;
      margin: ceil($grid-unit-y * 0.5);

      @include themes-value(background-color, $brand-primary);
    }
  }
}

// Scale up controls for tablets and up
@media screen and (min-width: $screen-sm-min) {
  // Scale up the controls a smidge
  .carousel-control {
    .glyphicon-chevron-left,
    .glyphicon-chevron-right,
    .icon-prev,
    .icon-next {
      width: ($carousel-control-font-size * 1.5);
      height: ($carousel-control-font-size * 1.5);
      margin-top: math.div($carousel-control-font-size, -2);
      font-size: ($carousel-control-font-size * 1.5);
    }
    .glyphicon-chevron-left,
    .icon-prev {
      margin-left: math.div($carousel-control-font-size, -2);
    }
    .glyphicon-chevron-right,
    .icon-next {
      margin-right: math.div($carousel-control-font-size, -2);
    }
  }

  // Show and left align the captions
  .carousel-caption {
    right: 20%;
    left: 20%;
    padding-bottom: 30px;
  }

  // Move up the indicators
  .carousel-indicators {
    bottom: 20px;
  }
}