@carousel-prefix: ~'@{icecream-prefix}-carousel';

.@{carousel-prefix} {
  .slick-slider {
    position: relative;
  }

  .slick-list {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
    touch-action: pan-y;
  }

  .slick-track {
    position: relative;
    display: flex;
  }

  // Arrows
  &.@{carousel-prefix}-secondary {
    .slick-arrow.slick-prev,
    .slick-arrow.slick-next {
      position: absolute;
      top: 50%;
      box-sizing: border-box;
      width: 52px;
      height: 52px;
      margin-top: -26px;
      background: @icecream-color-grey-1;
      border: 1px solid @icecream-color-grey-5;
      border-radius: 26px;
      box-shadow: 0px 4px 8px 0px rgba(51, 51, 51, 0.08);
      outline: none;
      cursor: pointer;

      &:hover,
      &:focus {
        svg {
          color: @icecream-color-blue-6;
        }
      }

      svg {
        position: relative;
      }
    }

    .slick-arrow.slick-prev {
      left: -72px;

      svg {
        left: 1px;
      }
    }

    .slick-arrow.slick-next {
      right: -72px;

      svg {
        right: 1px;
      }
    }

    &&-small {
      .slick-arrow.slick-prev,
      .slick-arrow.slick-next {
        width: 32px;
        height: 32px;
        margin-top: -16px;
        border-radius: 16px;
      }

      .slick-arrow.slick-prev {
        left: -52px;
      }

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

  // Dots
  .slick-dots {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 15;
    display: flex !important;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    list-style: none;

    &-bottom {
      &.@{carousel-prefix}-default,
      &.@{carousel-prefix}-primary {
        bottom: @icecream-gap-sm;
      }

      &.@{carousel-prefix}-secondary {
        bottom: -@icecream-gap-md;
      }
    }

    &.@{carousel-prefix}-default {
      li {
        width: 28px;

        button {
          opacity: 0.2;
          background: @icecream-color-grey-8;
        }

        &.slick-active {
          button {
            opacity: 1;
            background: @icecream-color-blue-6;
          }
        }
      }

      &.@{carousel-prefix}-default-small {
        li {
          width: 20px;
        }
      }
    }

    &.@{carousel-prefix}-primary {
      li {
        width: 28px;

        button {
          opacity: 0.5;
          background: @icecream-color-grey-1;
        }

        &.slick-active {
          button {
            opacity: 1;
          }
        }
      }

      &.@{carousel-prefix}-primary-small {
        li {
          width: 20px;
        }
      }
    }

    &.@{carousel-prefix}-secondary {
      li {
        width: 20px;

        button {
          opacity: 0.3;
          background: @icecream-color-grey-8;
        }

        &.slick-active {
          button {
            opacity: 1;
          }
        }
      }
    }

    li {
      position: relative;
      display: inline-block;
      height: 4px;
      margin: 0 3px;
      button {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        color: transparent;
        font-size: 0;
        border: 0;
        outline: none;
        cursor: pointer;

        &:hover,
        &:focus {
          opacity: 0.75;
        }
      }
      &.slick-active {
        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
}