// Carousel
//
// Extension of `slick-theme.scss` from [Slick Carousel](https://kenwheeler.github.io/slick/).
//
// Styleguide: Component.Carousel


.carousel {
  padding-top: $gap * 2;
  padding-bottom: $gap * 2;
}

// Update `slick-theme.scss`

.slick-slider {
  position: relative;
}

.slick-track:after {
  clear: both;
}

.slick-slide {
  outline: 0;
  padding: 0 #{$gap / 2};
  @include tablet {
    padding: 0 $gap;
  }
}

ul.slick-dots {
  bottom: $gap / 3;
  li {
    button {
      width: 0.875rem;
      height: 0.875rem;
      &::before {
        content: '';
        border-radius: 50%;
        width: 0.875rem;
        height: 0.875rem;
        background: $dark;
      }
    }
  }
}
