.pagination ,
.pagination *,
.pagination *:before,
.pagination *:after {
  
  box-sizing: border-box;
}

.pagination {
  
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
  gap: 10px;
  
  & a {
  
    display: flex;
    width: 38px;
    height: 38px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #E8EBF9;
    background: #FFF;
    color: inherit;
    text-decoration: none;
    
    &:is(:hover) {
  
      background: rgba(0,0,0,0.02);
    }
    
    &.selected {
      
      background: black;
      color: white;
      pointer-events: none;
    }
  }
  
  & .paginationSpaceBetween {

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

body.rtl .pagination .fa-angle-left,
body.rtl .pagination .fa-angle-right {
  
  transform: scaleX(-1);
}