/* --------------------------------------------------

   Slick Default
   -------------------------------------------------- */

.slick-slide {
  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  &:focus {
    outline: none;
    border: none;
  }
}


/* --------------------------------------------------

   Slick Dots
   -------------------------------------------------- */

.slick-dots {
  @include cols(12);
  margin-bottom: space(1);
  list-style: none;
  text-align: center;

  li {
    display: inline;

    .dot {
      width: 5px;
      height: 5px;
      border: 1px solid color('white');
      display: inline-block;
      opacity: .25;
      cursor: pointer;
      border-radius: 50px;
      margin: 2px;
      transition: all .5s ease('out-cubic');
    }

    &.slick-active {
      .dot {
        opacity: 1;
        background-color: color('white');
      }
    }
  }
}



/* --------------------------------------------------

   Slick Arrow
   -------------------------------------------------- */

.slickArrow {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  cursor: pointer;
  z-index: 1000;
  transition: all .5s;
  background: c('free-speech-red');
  transform: translateY(-50%);

  &::before,
  &::after {
    content: "";
    width: 20px;
    height: 4px;
    position: absolute;
    background: c('white');
  }

  &--prev {
    left: s(1);

    .slick--rtl & {
      left: auto;
      right: s(1);
      transform: rotate(180deg) translateY(50%);
    }

    &::before {
      transform: rotate(-45deg);
      top: 18px;
      left: 14px;
    }

    &::after {
      transform: rotate(45deg);
      top: 30px;
      left: 14px;
    }
  }

  &--next {
    right: s(1);

    .slick--rtl & {
      right: auto;
      left: s(1);
      transform: rotate(180deg) translateY(50%);
    }

    &::before {
      transform: rotate(45deg);
      top: 18px;
      right: 14px;
    }

    &::after {
      transform: rotate(-45deg);
      top: 30px;
      right: 14px;
    }
  }

  &.slick-disabled {
    cursor: default;
    opacity: 0.1;
  }
}