/**
 * @file
 * Slick
 *
 * Slick carousel styles.
 */
.slick {
  position: relative;
}

.slick-slide {
  position: relative;
}

.slick-dots {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
  }

  button {
    position: relative;
    @include ir;
    height: 40px;
    width: 40px;
    padding: 0;

    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      content: '';
      height: 0.5rem;
      width: 0.5rem;
      background: $color-black;
      border: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%);

      @at-root li:not(.slick-active) button:after {
        background: rgba($color-black, 0.5);
      }
    }
  }
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  @include ir;
  height: 35px;
  width: 35px;
  padding: 0;
  z-index: 5;
  background-color: $color-green-light;
  border-radius: 8px;
  transition: background-color 300ms ease;

  &:after {
    position: absolute;
    top: 50%;
    left: 48%;
    content: '';
    height: 10px;
    width: 10px;
    border-right: 3px solid $color-green-dark;
    border-top: 3px solid $color-green-dark;
    transform: translate(-50%, -50%) rotate(45deg);

  }

  &.slick-disabled {
    opacity: .5;
    pointer-events: none;
  }

  &:hover {
    background-color: $color-white;
  }

  &.prevArrow {
    &:after {
      transform: translate(-50%, -50%) rotate(225deg);
      left: 54%;
    }
  }

  @media (min-width: $break-medium) {
    width: 46px;
    height: 46px;
  }
}

.slick-next {
  right: 0;
}