.product-carousel {
  .modal-dialog--zoom & .carousel-inner {
    @include zoom-modal-single-width(0px);
    @media (min-height: 780px) {
      @include zoom-modal-single-width(62px);
    }
  }
  &-control {
    $arrow-width: 15%;

    @mixin arrow {
      top: 0;
      width: $arrow-width;
      z-index: 2;
    }
    &--previous {
      left: -$arrow-width;
      @include arrow;
      @include media-breakpoint-between(md, md) {
        left: 15px;
      }
    }
    &--next {
      right: -$arrow-width;
      @include arrow;
      @include media-breakpoint-between(md, md) {
        right: 15px;
      }
    }
    &-rounded {
      $size: 44px;
      border-radius: 50%;
      width: $size;
      height: $size;
      background: $secondary-background;
      color: $secondary-font-color;
    }
  }
  &-item {
    transition: transform 0.1s ease-in-out;

    &-squared {
      position: relative;
      height: 0;
      padding: 0 0 100% / $photo-width-to-height-ratio;

      .modal-dialog--zoom & {
        padding-bottom: 100% / $photo-width-to-height-ratio-zoom;
      }

      img {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: contain;
      }

      &-only {
        padding-bottom: 0;
        height: auto;

        img {
          position: static;
        }
      }
    }
    &:not(.carousel-item) {
      display: none;
    }
  }
  &-indicators {
    text-align: center;
    padding: 5px 10px 0;
    overflow-x: auto;
    position: static;
    white-space: nowrap;
    display: block;
    margin: 0;

    &-indicator {
      display: none;
      &--visible {
        display: inline-block;
      }
    }

    li {
      $image-width: 60px;
      $image-height: 82px;

      width: $image-width;
      height: $image-height;
      flex: none;
      border-radius: 0;
      border: none;
      background: none;
      opacity: 1;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }

      img {
        width: auto;
        height: auto;
        max-height: $image-height;
        max-width: $image-width;
        margin: 0 auto;
        border: 1px solid transparent;
      }

      &.active {
        img {
          border-color: theme-color("dark-text");
        }
      }
    }
  }
  &--empty {
    padding: 0 0 100% / $photo-width-to-height-ratio 0;
    background: theme-color("light");
    & > * {
      display: none !important;
    }
  }
  &-overlay {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    justify-content: center;
    &-modal-opener {
      flex-basis: 430px;
      cursor: image-url("picture-zoom.svg"), auto;
    }
  }
}