// blog overview : carousel show layout before slick initialization
.blog-overview--carousel-on-s {
  .slick-list {
    overflow: visible;
  }

  @include viewport--l('inversed') {
    // slick slider
    .slick-slider {
      position: static;
      width: grid-columns(5, 6);

      .blog-overview__item {
        margin: 0;
        padding: 0 $blog-overview-spacing--s;
      }
    }

    .slick-list {
      margin-left: -$blog-overview-spacing--s;
      margin-right: -$blog-overview-spacing--s;
    }

    .slick-arrow {
      display: none !important; // overwrite inline style attribute to hide button on resize
    }

    .blog-overview {
      &__list:not(.slick-initialized) {
        display: flex;
      }

      &__list {
        width: grid-columns(5, 6);
      }

      &__list > .blog-overview__item {
        flex: 1 0 100%;
        margin-right: (2 * $blog-overview-spacing--s);
      }
    }
  }
}

// blog overview : carousel
.blog-overview--carousel {
  // viewport l
  @include viewport--l {
    .block__content {
      position: relative;
    }

    .blog-overview {
      &__list:not(.slick-initialized) {
        visibility: hidden;
      }

      &__list {
        width: grid-columns(10, 12);
      }

      &__list > .blog-overview__item {
        flex: 1 0 auto;
        width: calc(
          #{grid-columns(5, 10)} + (2 * #{$blog-overview-spacing--l})
        );
      }

      &__item {
        margin: 0;
        padding: 0 $blog-overview-spacing--l;
      }
    }
    // slick slider
    .slick-arrow {
      opacity: 0;
    }

    .slick-arrow[style*='height'] {
      opacity: 1;
    }

    .slick-list {
      margin-left: -$blog-overview-spacing--l;
      margin-right: -$blog-overview-spacing--l;
    }

    .slick-arrow {
      background: $color-alpha--two-30;
      border: 0;
      cursor: pointer;
      font-size: 0;
      padding: 0;
      position: absolute;
      transition: background-color $transition-duration,
        opacity $transition-duration, visibility 0s $transition-duration;
      top: 0;
      width: 100px;
      z-index: 1;

      &:hover,
      &:focus {
        background: $color-alpha--two-70;
      }

      &::before {
        @include svg-base64(
          'arrow-right-30',
          $blog-overview-carousel-button-arrow-color
        );
        display: inline-block;
        position: relative; // IE11 fix for icon shift on click
        height: $icon-size--l;
        width: $icon-size--l;
      }
    }

    .slick-next {
      right: 0;
    }

    .slick-prev {
      left: 0;
      transform: rotate(180deg);
    }

    .slick-disabled {
      opacity: 0;
      transition: background-color $transition-duration,
        opacity $transition-duration, visibility 0s $transition-duration;
      visibility: hidden;
    }
  }
  // viewport xl
  @include viewport--xxl {
    .slick-list,
    .blog-overview__list:not(.slick-initialized) {
      margin-left: -$blog-overview-spacing--xxl;
      margin-right: -$blog-overview-spacing--xxl;
    }

    &__list > .blog-overview__item {
      flex: 1 0 auto;
      width: calc(
        #{grid-columns(5, 10)} + (2 * #{$blog-overview-spacing--xxl})
      );
    }

    .blog-overview__item {
      padding: 0 $blog-overview-spacing--xxl;
    }

    &:not(.blog-overview--topic) .blog-overview__item {
      width: $blog-overview-carousel-item-width--xxl;
    }
  }
}