$bs5-slideshow-control-outsite-spacing: 80px !default;
$bs5-slideshow-indicators-outsite-spacing: 50px !default;
$bs5-slideshow-indicators-insite-spacing: 20px !default;

bs5-slideshow {

  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;

  display: block;
  @extend .carousel !optional;

  .slideshow-row {
    @extend .flex-scrollbar-x-scroll;
    @extend .scrollbar-invisible;

    // slide
    > * {
      position: relative;
      .slide-caption {
        @extend .carousel-caption !optional;
      }
    }
  }

  &.touchscroll-disabled {
    .slideshow-row {
      overflow-x: hidden;
    }
  }

  .slideshow-controls {
    color: inherit;
    width: 50px;
    padding: 0;
    opacity: 1;

    &.slideshow-control-prev, &.slideshow-control-next {
      color: inherit;
      &:hover, &:focus {
        opacity: 1;
        color: inherit;
      }
    }

    &.control-middle {
      flex-direction: column;
      justify-content: center;
    }
    &.control-bottom {
      flex-direction: column;
      justify-content: flex-start;
    }
    &.control-top {
      flex-direction: column;
      justify-content:flex-end;
    }

    &.slideshow-control-prev {
      @extend .carousel-control-prev !optional;
      left: 0; // default

      &.control-insite {
        left: 0;
      }
      &.control-outsite {
        left: -$bs5-slideshow-control-outsite-spacing;
      }
    }
    &.slideshow-control-next {
      @extend .carousel-control-next !optional;
      right: 0; // default

      &.control-insite {
        right: 0;
      }
      &.control-outsite {
        right: -$bs5-slideshow-control-outsite-spacing;
      }
    }
  
    .slideshow-control-fallback-prev-icon {
      @extend .carousel-control-prev-icon !optional;
    }
    .slideshow-control-fallback-next-icon {
      @extend .carousel-control-next-icon !optional;
    }

  }

  // .slideshow-indicators {
  //   @extend .carousel-indicators !optional;
  // }

  .slideshow-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    list-style: none;
    margin-right: $carousel-control-width;
    margin-left: $carousel-control-width;
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
    li {
      flex: 0 1 auto;
      margin-right: $carousel-indicator-spacer;
      margin-left: $carousel-indicator-spacer;
      cursor: pointer;
    }

    &.indicators-bottom {
      top: auto;
      right: 0;
      bottom:  $bs5-slideshow-indicators-insite-spacing;
      left: 0;
      &.indicators-insite {
        bottom:  $bs5-slideshow-indicators-insite-spacing;
      }
      &.indicators-outsite {
        bottom: -$bs5-slideshow-indicators-outsite-spacing;
      }
    }
    &.indicators-top {
      top: 0;
      right: 0;
      bottom: auto;
      left:  $bs5-slideshow-indicators-insite-spacing;
      &.indicators-insite {
        top:  $bs5-slideshow-indicators-insite-spacing;
      }
      &.indicators-outsite {
        top: -$bs5-slideshow-indicators-outsite-spacing;
      }
    }
    &.indicators-right {
      top: 0;
      right:  $bs5-slideshow-indicators-insite-spacing;
      bottom: 0;
      left: auto;
      &.indicators-insite {
        right:  $bs5-slideshow-indicators-insite-spacing;
      }
      &.indicators-outsite {
        right: -$bs5-slideshow-indicators-outsite-spacing;
      }
    }
    &.indicators-left {
      top: 0;
      right: auto;
      bottom: 0;
      left:  $bs5-slideshow-indicators-insite-spacing;
      &.indicators-insite {
        left:  $bs5-slideshow-indicators-insite-spacing;
      }
      &.indicators-outsite {
        left: -$bs5-slideshow-indicators-outsite-spacing;
      }
    }

  }

}