$page-active-color: #3c4258;

%page-link {

border-radius: 3px;
transition: .3s all;
margin: 0 7px;
color: #1a1f36;
display: block;
cursor: pointer;
padding: .5rem .75rem;
&:disabled {
  cursor: not-allowed;
}
&.js-active,
&:hover {
  background-color: $page-active-color;
  color: #fff;
}

}

.pagination-wrap {

display: flex;
.pagination-input {
  display: none;
}
> .input-group {
  width: initial;
}
> .input,
> .input-group > .input {
  width: 7em;
  &.is-invalid:focus {
    box-shadow: 0 0 0 1px #cd3d64;
    color: #cd3d64;
  }
}
.input-group-append > .input-group-text {
  background-color: $page-active-color;
  color: #fff;
  height: 100%;
}
@media (max-width: $screen-sm) {
  display: block;
  > .input-group {
    margin-top: 1em;
  }
  > .pagination {
    justify-content: space-between;
  }
}

}

.pagination {

display: flex;
list-style: none;
flex-wrap: wrap;
@media (max-width: $screen-sm) {
  .page-link {
    margin-left: 3px;
    margin-right: 3px;
  }
  .page-link,
  .page-link-btn {
    padding: .2em .5em;
    i {
      font-size: 12px;
    }
  }
}

}

.page-link {

@extend %page-link;

}

.pagination-lg .page-link {

padding: 1rem 1.5rem;
font-size: 1.25rem;
line-height: 1.5;

} .pagination-sm .page-link {

padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;

}

.page-link-btn {

font-weight: 900;
@extend %page-link;
box-shadow: rgba(0, 0, 0, 0) 0 0 0 0,
  rgba(0, 0, 0, 0.12) 0 1px 1px 0,
  rgba(60, 66, 87, 0.16) 0 0 0 1px,
  rgba(60, 66, 87, 0.12) 0 2px 5px 0;
&:hover {
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0,
    rgba(0, 0, 0, 0.12) 0 1px 1px 0,
    rgba(60, 66, 87, 0.16) 0 0 0 1px,
    rgba(60, 66, 87, 0.12) 0 3px 9px 0,
    rgba(60, 66, 87, 0.12) 0 2px 5px 0;
}

}

.page-item.disabled {

.page-link,
.page-link-btn {
  cursor: not-allowed;
  opacity: .5;
  &:hover {
    background-color: initial;
    color: initial;
  }
}

}