@use "../mixins/media-queries";

.slick-slider {
  width: 100%;
  overflow: hidden;

  @include media-queries.lg {
    height: 260px;
    width: 620px;
  }

  .slick-next {
    right: 30px;

    &:before {
      content: "";
      width: 10px;
      height: 10px;
      transform: rotate(-45deg);
      border-bottom: 2px solid #000;
      border-right: 2px solid #000;
      display: block;
      position: relative;
      left: 15px;
    }
  }

  .slick-prev {
    left: 30px;
    z-index: 1;
    position: absolute;

    &:before {
      content: "";
      width: 10px;
      height: 10px;
      transform: rotate(-135deg);
      border-top: 2px solid #000;
      border-right: 2px solid #000;
      display: block;
      position: relative;
      left: 20px;
    }
  }

  .slick-prev, .slick-next {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;

    &:hover, &:focus, &:active {
      background: rgba(255, 255, 255, 0.8);
    }
  }
}