.Pagination {
  &:extend(.Link.is-black all);

  align-items: center;
  display: inline-flex;
  justify-content: flex-end;

  > li:not(:first-child) {
    margin-left: var(--gap-m);
  }

  &.is-right {
    display: flex;
  }
}

.Pagination-first,
.Pagination-previous,
.Pagination-next,
.Pagination-last {
  display: inline-block;

  > a {
    .IconButton;

    display: block;
    margin: 0 calc(0px - var(--gap-s));
  }

  &.is-disabled {
    opacity: 0.3;
    pointer-events: none;
  }
}

.Pagination-first > a {
  --IconButton-name: 'first_page';
}

.Pagination-previous > a {
  --IconButton-name: 'chevron_left';
}

.Pagination-next > a {
  --IconButton-name: 'chevron_right';
}

.Pagination-last > a {
  --IconButton-name: 'last_page';
}

// Legacy
.pagination {
  &:extend(.Pagination all);

  > li,
  > .paginationItem {
    &:extend(.Pagination-item all);
  }

  > li.first,
  > .paginationFirst {
    &:extend(.Pagination-first all);
  }

  > li.previous,
  > .paginationPrevious {
    &:extend(.Pagination-previous all);
  }

  > li.next,
  > .paginationNext {
    &:extend(.Pagination-next all);
  }

  > li.last,
  > .paginationLast {
    &:extend(.Pagination-last all);
  }
}
