.slick {
  &-track {
    margin-left: 0;
  }
  &-slider {
    $self: &;
    position: relative;
    .slick-dots {
      position: absolute;
      bottom: 5px;
      z-index: 5;
      @include media-breakpoint-up($banner-breakpoint-desktop) {
        bottom: 16px;
      }

      li {
        margin: 0;
        width: 10px;
        @include media-breakpoint-up($banner-breakpoint-desktop) {
          width: 24px;
        }
      }
      button {
        padding: 0;
        margin: 0;
        width: auto;
        &:before {
          font-size: 24px;
          color: #f1f1f1;
          opacity: 0.3;
          padding: 0;
          height: auto;
          width: auto;
          @include media-breakpoint-up($banner-breakpoint-desktop) {
            font-size: 50px;
          }
        }
      }
      .slick-active {
        button {
          &:before {
            opacity: 1;
            color: #f1f1f1;
          }
        }
      }
    }

    &:not(.product-feature__product):not(.banner) {
      #{$self}__grid {
        padding: 1px 10px 1px 0;

        @include media-breakpoint-up(sm) {
          padding: 1px 5px;
          margin-bottom: 8px;
        }
      }
      .slick-list {
        padding-right: 15px;

        @include media-breakpoint-up(sm) {
          padding-right: 0;
        }
      }
    }

    .slick-arrow {
      position: absolute;
      top: 50%;
      width: 20px;
      height: 30px;
      z-index: 1;
      cursor: pointer;
      transform: translateY(-50%);

      &--prev {
        left: 0;
        border-left: none;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;

        &:before {
          content: "";
          position: absolute;
          top: 50%;
          left: 7px;
          transform: translateY(-50%) rotate(45deg);
          border-left: 1px solid #dedede;
          border-bottom: 1px solid #dedede;
          width: 20px;
          height: 20px;
        }
      }

      &--next {
        right: 0;
        border-right: none;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;

        &:before {
          content: "";
          position: absolute;
          top: 50%;
          left: -7px;
          transform: translateY(-50%) rotate(-135deg);
          border-left: 1px solid #dedede;
          border-bottom: 1px solid #dedede;
          width: 20px;
          height: 20px;
        }
      }
    }

    &--arrow-border {
      .slick-arrow {
        border: 1px solid #dedede;
        display: none !important;
        @include media-breakpoint-up($banner-breakpoint-desktop) {
          display: block !important;
        }

        &--prev {
          &:before {
            content: "";
            width: 10px;
            height: 10px;
          }
        }

        &--next {
          &:before {
            content: "";
            width: 10px;
            height: 10px;
            left: 3px;
          }
        }
      }
    }

    &--space-between {
      margin-right: -15px;
      @include media-breakpoint-up(sm) {
        margin-left: -5px;
        margin-right: -5px;
      }
      .card-product {
        margin-bottom: 10px;
        @include media-breakpoint-up(md) {
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      .slick {
        &-slide {
          padding: 0 10px 0 0;
          @include media-breakpoint-up(sm) {
            padding: 0 5px;
          }
          > div {
            @include media-breakpoint-up(md) {
              margin-left: -5px;
              margin-right: -5px;
            }
          }
        }
      }
    }

    &__clear {
      // Must be equal to the padding of the container of the page
      margin-right: -15px;

      @include media-breakpoint-up(sm) {
        margin: {
          left: -5px;
          right: -5px;
        }
      }

      .slick-arrow--prev {
        margin-left: 5px;
      }

      .slick-arrow--next {
        right: 5px;
      }
    }

    .card-blog {
      margin-bottom: 0;
    }

    .brand {
      &__list-item {
        img {
          margin: 0 auto;
        }
      }
    }
  }
  &-loading {
    .slick-list {
      background: #fff url("#{$pathImgCommon}ajax-loader.gif") center center
        no-repeat;
    }
  }
}
