// ------------------------------------\
// PAGINATION
// ------------------------------------/

.a-pagination {
  .page-item {
    .page-link {
      padding: 5px 14px 3px;
      margin-right: 12px;
      margin-bottom: 12px;
      color: $black;
      background-color: transparent;
      border: 1px solid $white;
      border-radius: 0;

      &:focus,
      &:hover {
        color: $white;
        text-decoration: none;
        background-color: $blue;
        border-color: $blue;
      }
    }

    &.active {
      .page-link {
        background-color: $white;

        &:hover {
          color: $black;
          background-color: $white;
          border: 1px solid $white;
        }
      }
    }
  }
}

// Change colors on Pagination when different backgrounds on body
.a-bgGreyLight,
.a-bgBlueLight {
  .page-item {
    .page-link {
      background-color: $white;
    }

    &.active {
      .page-link {
        border: 2px solid $white;

        &:hover {
          border: 2px solid $white;
        }
      }
    }
  }
}