// carousel plugin: slick - http://kenwheeler.github.io/slick/
@import '../../external/slick';

$carousel-item-padding: 1em;

.carousel {
  margin: -$carousel-item-padding;
}

.carousel.is-carousel {
  margin: 0;
  position: relative;
  background: $colour-blue;
  border: ($carousel-prev-next-size * 1.5) solid $colour-blue;
}

.carousel--lean.is-carousel {
  background: transparent;
  border: $carousel-prev-next-size solid transparent;
  border-top: 0;
  border-bottom: 0;
}

.carousel__slide {
  //applying to <ol>, as this brings with it some nice semantics to the html, so need to override styles below
  margin: 0;
  padding: 0;
}

.carousel__item {
  padding: $carousel-item-padding;
  height: auto;
}

.carousel__tile {
  display: block;
  width: 100%;
  background: $colour-grey-light;
  text-align: center;
}

.carousel__prev-next {
  position: absolute;
  top: 50%;
  margin-top: -($carousel-prev-next-size / 2);

  &[aria-disabled="true"] {
    opacity: 0.2;
    pointer-events: none;
  }
}

.carousel__prev {
  right: 100%;
}

.carousel__next {
  left: 100%;
}

.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;

  li {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.25em;
    padding: 0;
    cursor: pointer;
  }

  button {
    display: block;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;

    &:hover,
    &:focus {
      outline: none;
    }

    &:hover::before,
    &:focus::before {
      opacity: 1;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 3em;
      width: 1em;
      height: 1em;
      content: '\2022';
      text-align: center;
      opacity: 0.25;
      color: #000;
    }
  }

  .slick-active button::before {
    opacity: 0.75;
    color: #000;
  }
}