.component__comments{
  margin-bottom:60px;
  margin-top:4rem;
  position:relative;
}
@media screen and (min-width:768px){
  .component__comments{
    margin-bottom:80px;
  }
}
@media screen and (min-width:1200px){
  .component__comments{
    margin-bottom:100px;
  }
}

.page-comments__pager{
  display:none;
}

.comments-pager{
  margin-top:16px;
  text-align:center;
}
@media screen and (min-width:768px){
  .comments-pager{
    margin-top:20px;
  }
}
@media screen and (min-width:1200px){
  .comments-pager{
    margin-top:30px;
  }
}

.pager__items{
  align-items:center;
  display:inline-flex;
  gap:.5rem;
  list-style:none;
}

.pager__item,.pager__items{
  margin:0;
  padding:0;
}
.pager__item.is-disabled{
  opacity:.5;
  pointer-events:none;
}
.pager__item.is-active{
  font-weight:700;
}
.pager__item--ellipsis{
  padding:.5rem 0;
}

.pager__link{
  align-items:center;
  border:1px solid #e0eaf7;
  border-radius:2.5rem;
  color:#141414;
  display:flex;
  font-size:.875rem;
  height:34px;
  justify-content:center;
  min-width:34px;
  text-decoration:none;
  transition:all .2s ease;
}
.pager__link:hover{
  background-color:#e0eaf7;
}
.pager__link svg{
  display:block;
}

.pager__item--next .pager__link,.pager__item--prev .pager__link{
  border:none;
}

.pager__item.is-active .pager__link{
  background-color:#15a8f1;
  border-color:#15a8f1;
  color:#fff;
}

.pager__ellipsis{
  color:#15a8f1;
  display:block;
  padding:0 .5rem;
}

.loading{
  color:#15a8f1;
  padding:2rem;
  text-align:center;
}
.loading-spinner{
  animation:spin 1s ease-in-out infinite;
  border-radius:50%;
  display:inline-block;
  height:2rem;
  margin-bottom:1rem;
  width:2rem;
}

.error{
  color:#e33f1e;
  padding:2rem;
  text-align:center;
}
.error .retry-button{
  background:none;
  border:none;
  color:#252525;
  cursor:pointer;
  margin-left:.5rem;
  padding:0;
  text-decoration:underline;
}
@keyframes spin{
  to{
    transform:rotate(1turn);
  }
}