.pagination li {
  &:first-child,
  &.active-sibling,
  &.active,
  &.active + li,
  &:last-child {
    display: inline-block !important;
  }
  // There are >= 7 pages
  &:first-child:nth-last-child(n+8) {
    $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10
    &~li {
      // Start out with all siblings hidden
      display: none;
      // Show ellipsis before the previous one
      &.active-sibling:before {
        @include ellipsis(true);
      }
      // Show ellipsis after the next one
      &.active + li:after {
        @include ellipsis(false);
      }
      // Show the last children in the list by default
      &:nth-last-child(-n+#{$how-many-on-ends}) {
        display: inline-block;
      }
      // The child at the beginning of the last group shows ellipsis for the group
      &:nth-last-child(#{$how-many-on-ends}) {
        &:before {
          @include ellipsis(true);
        }
      }
      // The very beginning elements do not need to show ellipsis
      &:nth-child(-n+#{$how-many-on-ends - 3}), // The very end elements do not need to show ellipsis
      &:nth-last-child(-n+#{$how-many-on-ends - 3}), // Even if it's a sibling to "active"
      &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {
        &:before,
        &:after {
          display: none !important;
        }
      }
    }
    &.active,
    &~li.active {
      // Hide the last group if "active" comes before them
      &~li:nth-last-child(-n+#{$how-many-on-ends}) {
        display: none;
        // If there is overlap, the element will show, but hide it's ellipsis
        &:before {
          display: none;
        }
      }
      // Show the first group together if "active" comes before them
      &~li:nth-child(-n+#{$how-many-on-ends}) {
        display: inline-block;
      }
      // If "active" is before the last member in the group, don't show ellipsis
      &~li:nth-child(-n+#{$how-many-on-ends - 1}) {
        &:after {
          display: none;
        }
      }
      // The child at the end of the first group shows ellipsis for the group
      &~li:nth-child(#{$how-many-on-ends}) {
        &:after {
          @include ellipsis(false);
        }
      }
      // "active" should never show ellipsis
      &:before,
      &:after {
        display: none;
      }
    }
  }
}