$slick-font-path: "~SYW_UIKIT_ASSETS/fonts/fontello/";
$slick-font-family: "fontello";
$slick-loader-path: "~SYW_UIKIT_ASSETS/imgs/";
$slick-arrow-color: black;
//$slick-dot-color: blue;
//$slick-dot-color-active: $slick-dot-color;
$slick-prev-character: "\E80A";
$slick-next-character: "\E80B";
//$slick-dot-character: "\2022";
//$slick-dot-size: 6px;
//$slick-opacity-default: 0.75;
//$slick-opacity-on-hover: 1;
//$slick-opacity-not-active: 0.25;
@import "~slick-carousel/slick/slick.scss";
@import "~slick-carousel/slick/slick-theme.scss";


/* ------------------------------------------------- */
// Stylesheet for Carousel
/* ------------------------------------------------- */

//flex stuff
$list: 1, 2, 3, 4;
@mixin generate-container-max-width($list) {
  .slick-container {
    margin: 0 auto;
  }
  @each $num in $list {
    .slick-container--#{$num} {
      max-width: 380px * $num;
    }
  }
}

@include generate-container-max-width($list)

.slick-track{
  display: flex;

  .slick-slide{
    display: flex;
    height: auto;
    min-width: 220px;

    & > div{
      margin: 0 10px;
      width: 100%;
    }
  }
}

.slick-arrow {
  height: 50px;
  background: white;
  opacity: 0.5;
  &:hover {
    background: white;
    opacity: 0.5;
  }
  &.slick-disabled {
    display: none !important;
  }
}

.slick-prev {
  left: 0;
  z-index: 1;
}
.slick-next {
  right: 0;
  z-index: 1;
}