/* Components :: Carousel :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-carousel {
  max-width: 100%;
}

.slick-prev,
.slick-next {
  @include absolute(top 50%);

  background: transparent;
  border: none;
  color: transparent;
  cursor: pointer;
  display: block;
  font-size: 0px;
  line-height: 0px;
  padding: 0;
  transform: translate(0, -50%);

  &:hover,
  &:focus {
    outline: none;
    background: transparent;
    color: transparent;
  }
}

.slick-prev {
  left: -10px;

  @include mq($from: town) {
    left: -30px;
  }
}

.slick-next {
  right: -10px;

  @include mq($from: town) {
    right: -30px;
  }
}

.slick-list {
  max-width: 100%;
  width: 50vw;
  @include mq($until: city) {
    width: inherit;
  }

  // height: 461px !important;
}

// .slick-track {
//   display: flex !important;
//   height: 100% !important;
// }
// .slick-slide {
//   display: flex !important;
//   height: 100% !important;
// }

.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}