.carousel {
  &:not(.slick-initialized) {
    .banner__slide:not(:first-child) {
      display: none; // hide all except first item until initialization complete
    }
  }
}

.carousel {
  position: relative;
}

.carousel__dots,
.carousel {
  .slick-dots {
    align-items: center;
    display: flex;
    justify-content: center;
    left: 0;
    line-height: 0;
    position: absolute;
    width: 100%;

    button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0;
      height: $spacing--m;
      margin: 0 10px;
      outline: none;
      padding: 0;
      text-indent: -9999px;
      width: auto;
    }

    button::before {
      border-radius: 50%;
      border: 2px solid $color-alpha--two-70;
      content: '';
      display: block;
      height: $baseline * 1.4;
      position: relative; // fix IE 10/11 text jump in active button
      transition: border $transition-duration--fast;
      width: 14px;
    }

    button:hover::before {
      border-color: $color-brand--two;
    }

    .carousel--photo & {
      &--light {
        button::before {
          border-color: $carousel-photo-slick-dots-color;
        }

        button:hover::before {
          border-color: $carousel-photo-slick-dots-color-hover;
        }

        .slick-active button::before {
          background: $carousel-photo-slick-dots-color-active;
        }
      }

      &--dark {
        button::before {
          border-color: $carousel-photo-slick-dots-color-dark;
        }

        button:hover::before {
          border-color: $carousel-photo-slick-dots-color-dark-hover;
        }

        .slick-active button::before {
          background: $carousel-photo-slick-dots-color-dark-active;
        }
      }
    }
  }

  .slick-active button {
    cursor: auto;

    &::before {
      background: $color-brand--two;
      transition: background-color 0.4s;
    }
  }
}

// viewport s
@include viewport--m('inversed') {
  .carousel--on-s {
    // slick slider
    .slick {
      &-list {
        margin-left: -$carousel-slick-spacing--s;
        margin-right: -$carousel-slick-spacing--s;
      }
      &-slide {
        padding: 0 $carousel-slick-spacing--s;
      }
    }
  }
}

// viewport m
@include viewport--range($breakpoint-viewport--m, $breakpoint-viewport--l) {
  .carousel--on-m {
    // slick slider
    .slick {
      &-list {
        margin-left: -$carousel-slick-spacing--m;
        margin-right: -$carousel-slick-spacing--m;
      }
      &-slide {
        padding: 0 $carousel-slick-spacing--m;
      }
    }
  }
}

// background mappings
@include carousels-carousel-background-mapping;