$carousel-icons: (
  caret-right,
  caret-left
);

@include generate-icon-classes($carousel-icons);

.paginated-carousel {
  position: relative;

  .carousel-item {
    position: relative;

    @include shopify-breakpoint($mobile) {
      position: absolute;
      top: 0;
      display: none;
      float: none;
      width: auto;
      margin-right: 0;
      opacity: 0;
      transform: translateX(50px);
      transition: all 300ms ease;

      &.js-is-active {
        position: static;
        display: block;
        opacity: 1;
        transform: translateX(0);
      }
    }
  }

  .carousel-nav {
    opacity: 0;
    transition: opacity 300ms ease;

    .js-is-loaded & {
      opacity: 1;
    }
  }

  .carousel-nav-items {
    text-align: center;
  }

  .carousel-nav-item {
    width: em(13);
    height: em(13);
    margin: 0 em(4);
    line-height: em(20);
    vertical-align: middle;
    background-color: $color-grey-text--light;
    border-radius: 50%;

    &.js-is-active {
      background: $color-black;
    }
  }

  .carousel-arrow-left,
  .carousel-arrow-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-arrow-left {
    left: 0;
  }

  .carousel-arrow-right {
    right: 0;
  }
}