@mixin slider($top, $posShift: true) {
  .slick-arrow {
    position: absolute;
    top: rem($top);
    font-size: rem(62);
    color: $bsi-color_blue;

    &.slick-prev {
      left: -80px;
    }

    &.slick-next {
      right: -80px;
    }
  }

  .slick-dots {
    @if $posShift {
      left: -300px;
      bottom: 30px;
      font-size: larger;
    }

    li {
      margin: 0;
      button {
        &:before {
          font-size: 15px;
        }
      }

      &.slick-active {
        button {
          &:before {
            color: $bsi-color_blue;
          }
        }
      }
    }
  }

  .slick-slider {
    &.slick-dotted {
      margin-bottom: 0;
    }
  }

  .slick-slide {
    @include media-breakpoint-up(md) {
      padding-left: rem(15);
    }

    @include media-breakpoint-down(lg) {
      display: flex;
      justify-content: center;
    }
  }
}


.#{$ns}boardingschool {
  &--detail {
    &--slider {
      @include slider(215);
    }

    &--references {
      &--slider {
        @include slider(100);
      }
    }

    .#{$ns}references-video--slider {
      @include slider(215, false);
    }

    .slider-nav-container {
      .slick-arrow {
        font-size: rem(45);
      }
    }
  }
}