Frequent Actions

.frequent-actions {
  background-color: $color-blue-light;
  padding: 0.8rem 1.2rem;
  margin-bottom: 2.4rem;
}

.frequent-actions__inner {
  background-color: rgba($color-base-white, 0.5);
  display: flex;
  align-items: center;
  flex-direction: column;

  @media (min-width: $breakpoint-tablet) {
    flex-direction: row;
  }
}

.frequent-actions-header {
  @include typeBody(true);
  padding: 1.2rem;

  @media (min-width: $breakpoint-tablet) {
    max-width: 14.4rem;

    .frequent-actions--with-description & {
      max-width: 28.8rem;
    }
  }
}

.frequent-actions-title {
  @include typeHeadline(true);
  margin: 0;
}

.frequent-actions__items {
  overflow: hidden;
  flex: 1;
  align-items: stretch;
  width: 100%;

  @media (min-width: $breakpoint-tablet) {
    padding: 0 4rem;
  }
}

.frequent-actions__item {
  @include typeCaption(true);
  color: $color-base-blue;
  background-color: $color-base-white;
  margin: 0 0.6rem 0.8rem;
  padding: 1.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (min-width: $breakpoint-tablet) {
    margin-bottom: 0;
  }
}

function createCarousel($carousel) {
  $carousel.each(function () {
    var $carousel = $(this);
    var hasDescription = $carousel
      .closest(".js-frequent-actions")
      .hasClass("frequent-actions--with-description");

    /* Slick needs to get reinitialized on resize after it was destroyed (i.e "unslick") */
    if ($(window).width() >= 768) {
      if (!$carousel.hasClass("slick-initialized")) {
        $carousel.slick({
          infinite: false,
          mobileFirst: true,
          slidesToScroll: 1,
          slidesToShow: hasDescription ? 2 : 3,
          responsive: [
            {
              breakpoint: 1199,
              settings: {
                slidesToShow: hasDescription ? 4 : 5,
              },
            },
          ],
        });
      }
    } else {
      if ($carousel.hasClass("slick-initialized")) {
        $carousel.slick("unslick");
      }
    }
  });
}

$(document).ready(function () {
  var $component = $(".js-frequent-actions");
  var $carousel = $component.find(".js-carousel");

  $component.each(function () {
    // Listen for events
    var resizeTimeout;
    $(window).on("load resize orientationchange", function () {
      if (resizeTimeout) {
        window.cancelAnimationFrame(resizeTimeout);
      }

      resizeTimeout = window.requestAnimationFrame(function () {
        createCarousel($carousel);
      });
    });
  });
});