$carouselButtonSize: 72px;

.content-card-slider.main-carousel {
  margin-right: -$margin-normal;

  .card,
  .search-result-card.card {
    display: block;
    width: 260px;
    margin: 22px $margin-half 22px 0;
  }

  .flickity-prev-next-button {
    display: none;
  }

  .flickity-cell {
    margin-right: $margin-normal;
    margin-bottom: $margin-normal;

    .card {
      margin: 0;
    }
  }

  .flickity-viewport {
    width: 100%;

    @include breakpoint(md) {
      margin-top: -$margin-normal; // These are to nullify the added margin on flickity-cell, which is added to allow the hover effect
      margin-bottom: -$margin-normal;
    }
  }

  @include breakpoint(md) {
    .flickity-cell {
      margin: $margin-normal $margin-normal $margin-normal 0;
    }

    &.main-carousel {
      overflow: visible;

      .flickity-prev-next-button {
        position: absolute;
        top: 50%;
        display: block;
        margin-top: 0;
        background-color: $color-white;
        box-shadow: 0 $margin-quarter $margin-normal 0 rgba(0, 0, 0, .2);
        transition: all .2s ease-in-out;
        z-index: 2;
      }

      .flickity-prev-next-button:hover {
        background: $color-white;
        box-shadow: $box-shadow-card-active;
        transform: scale(.9) translateY(-50%);
      }
    }

    .flickity-viewport:after,
    .flickity-viewport:before {
      content: '';
      position: absolute;
      pointer-events: none;
      height: calc(100% - #{$margin-normal});
      top: $margin-half;
      width: 80px;
      z-index: 1;
    }

    .flickity-viewport:after {
      right: 0;
      background-image: linear-gradient(to right, rgba($color-beige-100, 0), rgba($color-beige-100, 1) 90%);
    }

    .flickity-viewport:before {
      left: 0;
      background-image: linear-gradient(to left, rgba($color-beige-100, 0), rgba($color-beige-100, 1) 90%);
    }

    &.hide-arrows {
      .flickity-viewport {
        overflow: visible;
      }

      .flickity-cell:first-child:nth-last-child(3),
      .flickity-cell:first-child:nth-last-child(3) ~ .flickity-cell {
        /* stylelint-disable max-nesting-depth  */
        .card {
          width: calc((1218px - 2 * 12px) / 3);
        }
        /* stylelint-enable */
      }

      .flickity-prev-next-button {
        display: none;
      }

      .flickity-viewport:before,
      .flickity-viewport:after {
        background-image: none;
      }
    }

    .flickity-prev-next-button.next {
      right: -$carouselButtonSize/2;

      &:active {
        box-shadow: $box-shadow-card-active;
      }

      .flickity-button-icon {
        left: 25%;
        top: 25%;
      }
    }

    .flickity-prev-next-button.previous {
      left: -$carouselButtonSize/2;

      .flickity-button-icon {
        left: 15%;
        top: 15%;
      }
    }
  }
}