.pagination {
   display: flex;
   margin: $line-height-computed 0;
   padding-left: 0;

   > li {
      list-style: none;

      > a,
      > span {
         position: relative;
         display: block;
         padding: 6px 11px;
         color: $pagination-color;
         background-color: $pagination-bg;
         border: 1px solid $pagination-border;
         margin-left: -1px;

         &:hover,
         &:focus {
            z-index: 3;
            color: $pagination-hover-color;
            background-color: $pagination-hover-bg;
            border-color: $pagination-hover-border;
         }
      }

      > a {
         cursor: pointer;
      }

      &:first-child {
         > a,
         > span {
            margin-left: 0;
            @include border-left-radius($border-radius-base);
         }
      }

      &:last-child {
         > a,
         > span {
            @include border-right-radius($border-radius-base);
         }
      }
   }

   > .active > a,
   > .active > span {
      &,
      &:hover,
      &:focus {
         z-index: 2;
         color: $pagination-active-color;
         background-color: $pagination-active-bg;
         border-color: $pagination-active-border;
         cursor: default;
      }
   }

   > .disabled > a,
   > .disabled > span {
      &,
      &:hover,
      &:focus {
         color: $pagination-disabled-color;
         background-color: $pagination-disabled-bg;
         border-color: $pagination-disabled-border;
         cursor: $cursor-disabled;
      }
   }

   > .unactive > a {
      background-color: transparent;
      pointer-events: none;
   }
}

.pager {
   display: flex;
   width: auto;
   flex-shrink: 0;
}

.go-to-page {
   margin: 20px;
   width: 130px;
}