// File extension required to differentiate between slick.scss and slick.css
// sass-lint:disable-block clean-import-paths
@import './../../../../../node_modules/slick-carousel/slick/slick.scss';

.an-slideshow {
  position: relative;
  background-color: $grey-lighter;

  @include media-breakpoint-up( xxl ) {
    max-width: map-get($container-max-widths, xl);
    margin-right: auto;
    margin-left: auto;
  }

  &-set {
    position: relative;

    &-sm {
      @include media-breakpoint-up( md ) {
        display: none;
      }
    }

    &-md {
      display: none;

      @include media-breakpoint-up( md ) {
        display: block;
      }
    }
  }

  &-list {
    z-index: 1;
  }

  &-item {
    //Hide all but the first item when slick slider is not initialised
    display: none;
    cursor: pointer;

    &:first-child {
      display: block;
    }

    &:focus {
      outline: none;
    }
  }

  &-text {

    .slick-initialized & {
      opacity: 0;
      transition: opacity 100ms linear;
    }

    .slick-active & {
      opacity: 1;
      transition: opacity 300ms linear 300ms;
    }
  }

  &-buttons {
    position: absolute;
    top: -20px;
    display: flex;
    width: 100%;
    padding: 100% $grid-gutter-width 0;
    justify-content: space-between;

    @include media-breakpoint-up( md ) {
      padding-top: 18.5%;
    }
  }

  &-button {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    color: $white;
    cursor: pointer;
    background-color: $blue;
    border: none;
    border-radius: 50px;

    &-previous {
      transform: rotate(-180deg);
    }

    &-next {
      margin-left: auto;
    }

    .ai {
      position: absolute;
      top: 19px;
      left: 3px;
      transition: transform 0.1s ease-in-out;
    }

    &:focus,
    &:hover {
      .ai {
        transform: translateX(2px);
      }
    }

    // Important required because slick-slider adds inline display style
    &.slick-disabled {
      // sass-lint:disable-block no-important
      display: none !important;
    }
  }
}