@import "@/styles/variables";
@import "@/styles/mixins";

.theirComment {
  color: $black;
  padding: $hl-4 0 7.125rem 0;
}

.swiperContent {
  position: relative;
  background: $grey-light;
  border-radius: $radius;
  margin-top: $hl-8;
  padding: $hl-4 $hl-3;

  :global(.swiper-button-prev),
  :global(.swiper-button-next) {
    text-align: center;
    color: #000;
    font-weight: $regular;
    opacity: 0.2;
    width: 2.5rem;
    height: 2.5rem;

    i {
      font-size: 2.5rem;
      width: 2.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
    }

    &:after {
      display: none;
    }

    &:hover {
      color: $blue;
      opacity: 1;
    }
  }


  :global(.swiper-button-prev) {
    left: 1rem;
    transform: rotate(180deg);
  }

  :global(.swiper-button-next) {
    right: 1rem;
  }

  :global(.swiper-pagination) {
    left: 50%;
    top: 100%;
    line-height: 0;
    margin-top: $hl-9;
    transform: translateX(-50%);
  }

  :global(.swiper-pagination-bullet) {
    background: $blue-dark;
    width: .625rem;
    height: .625rem;
    margin: 0 $hl-10;
    opacity: 0.15;
  }

  :global(.swiper-pagination-bullet.swiper-pagination-bullet-active) {
    opacity: 0.6;
  }

  .inner {
    text-align: center;

    img {
      height: 2.5rem;
    }

    .comment {
      margin-top: $hl-8;
    }

    .people {
      @include p2();
      opacity: 0.6;
      margin-top: $hl-8;
    }
  }
}