.gl-pagination {
  text-align: center;
  border-top: 1px solid $border-color;
  margin: 0;
  margin-top: 0;

  .pagination {
    padding: 0;

    a {
      cursor: pointer;
    }

    .separator,
    .separator:hover {
      a {
        cursor: default;
        background-color: $gray-light;
        padding: $gl-vert-padding;
      }
    }
  }


  .gap,
  .gap:hover {
    background-color: $gray-light;
    padding: $gl-vert-padding;
    cursor: default;
  }
}

.card > .gl-pagination {
  margin: 0;
}

/**
 * Extra-small screen pagination.
 */
@media (max-width: 320px) {
  .gl-pagination {
    .first,
    .last {
      display: none;
    }

    .page {
      display: none;

      &.active {
        display: inline;
      }
    }
  }
}

/**
 * Small screen pagination
 */
@include media-breakpoint-down(xs) {
  .gl-pagination {
    .pagination li a {
      padding: 6px 10px;
    }

    .page {
      display: none;

      &.active {
        display: inline;
      }
    }
  }
}

/**
 * Medium screen pagination
 */
@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)) {
  .gl-pagination {
    .page {
      display: none;

      &.active,
      &.sibling {
        display: inline;
      }
    }
  }
}