.carousel {
  margin-bottom: 8px;
}

.carousel-inner {
  > .item {
    @include _padding(30px, 30px, 30px, 30px);

    background-color: $color-background-tint-primary;
    align-items: center;

    &.active,
    &.next,
    &.prev {
      display: flex;
      flex-wrap: wrap;
    }

    > .carousel-image-wrapper {
      @include _padding(30px, 30px, 30px, 30px);

      background-color: $color-background-secondary;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 415px;
    }

    > .carousel-text {
      @include _padding(0px, 30px, 0px, 30px);
    }
  }
}

.carousel-indicators {
  bottom: -42px;

  li {
    background-color: $color-carousel-inactive-indicator;
    border-color: $color-carousel-inactive-indicator;
  }

  .active {
    background-color: $color-secondary;
    border-color: $color-secondary;
    width: 10px;
    height: 10px;
    margin: 1px;
  }
}

/* 3 cards visible on desktop, scroll one at a time */
.carousel-cards {
  .carousel-inner {
    display: flex;

    .next,
    .prev {
      display: flex;
      width: 33.33333333%;
    }

    .item {
      align-items: stretch;
      background-color: transparent;
      @include _padding(13px, 13px, 13px, 13px); // padding for card shadow

      .card {
        margin: 0;
      }
    }

    /* show 3 items */
    .active,
    .active + .item,
    .active + .item + .item {
      display: flex;
    }

    .item.active:not(.right):not(.left),
    .item.active:not(.right):not(.left) + .item,
    .item.active:not(.right):not(.left) + .item + .item {
      transition: none;
    }

    .item.next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    /* next animation */
    .active.left + .item.next.left,
    .item.next.left + .item,
    .item.next.left + .item + .item,
    .item.next.left + .item + .item + .item {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }

    /* prev animation */
    .active.right + .item.prev.right,
    .item.prev.right + .item,
    .item.prev.right + .item + .item,
    .item.prev.right + .item + .item + .item {
      display: flex;
      position: relative;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }

    /* position previous card outside carousel for animation */
    .item.prev.right {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      visibility: visible;
      height: 100%;
    }

    /* position next card outside carousel for animation */
    .active.item + .item + .item + .item {
      display: flex;
      position: absolute;
      top: 0;
      right: -33.33333333%;
      z-index: -1;
      visibility: visible;
      height: 100%;
    }
  }

  .carousel-nav {
    .button {
      @include _font-size(40px);
      border-radius: calculate-rem(20px);
      line-height: 0;
      min-width: auto;

      &.disabled {
        opacity: 0.38;
        pointer-events: none;
        cursor: default;
      }

      &:hover:not(.disabled) {
        background-color: rgba(0, 0, 0, 0.04);
      }
    }
  }
}

.carousel-cards-container {
  /* shrink padding because cards have their own */
  @include _padding(0px, 2px, 0px, 2px);
}

.carousel-button {
  margin-top: 2rem;
}

.carousel-image {
  margin-top: 15px;
}

.carousel-image--column {
  padding-right: 20px;
}

.carousel-column--images {
  margin-top: -15px;
}

.carousel-header {
  margin-top: 0rem !important;
}
