/* Pagination - Bootstrap Compatible */

.pagination {
  display: flex;
  padding-inline-start: 0;
  margin: var(--gutter-size) 0;
  border-radius: var(--border-radius);
  flex-wrap: wrap;

  > li {
    display: inline;
    align-self: center;
    > a, > span {
      position: relative;
      display: inline-block;
      padding: .5em 1em;
      background: var(--pagination-background-color);
      border: 1px solid var(--default-border-color);
      color: var(--pagination-text-color);
      text-decoration: none;
      margin-inline-start: -1px;
    }
    &:first-child {
      > a, > span {
        margin-inline-start: 0;
        border-start-start-radius: var(--border-radius);
        border-end-start-radius: var(--border-radius);
      }
    }
    &:last-child {
      > a, > span {
        border-start-end-radius: var(--border-radius);
        border-end-end-radius: var(--border-radius);
      }
    }
  }

  > li:not(.disabled):not(.active) > a {
    &:hover, &:focus {
      z-index: 2;
      background-color: var(--pagination-background-color-hover);
      border-color: var(--pagination-border-color-hover);
      color: var(--pagination-text-color-hover);
    }
  }

  > .active > a, > .active > span {
    z-index: 3;
    background-color: var(--pagination-background-color-active);
    border-color: var(--pagination-background-color-active);
    color: var(--pagination-text-color-active);
    cursor: default;
  }

  > .disabled {
    > span, > span:hover, > span:focus, > a, > a:hover, > a:focus {
      opacity: .5;
      cursor: not-allowed;
    }
  }
}

.card-footer .pagination {
  margin-top: 0;
}