/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

// This file combines Bulma CSS with our own CSS that previously overrode Bulma. In the future we should adopt the HDS pagination.

.pagination-previous[disabled],
.pagination-next[disabled],
.pagination-link[disabled],
.pagination-ellipsis[disabled] {
  cursor: not-allowed;
}

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis,
.tabs {
  user-select: none;
}

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
  align-items: center;
  box-shadow: none;
  display: inline-flex;
  font-size: $size-6;
  justify-content: flex-start;
  line-height: 1.5;
  margin: $size-11;
  padding-bottom: calc(0.5em - 1px);
  padding-left: calc(0.75em - 1px);
  padding-right: calc(0.75em - 1px);
  padding-top: calc(0.5em - 1px);
  position: relative;
  vertical-align: top;
}

.pagination-link.is-current {
  color: $white;
}

.pagination-list {
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: flex-start;
  order: 1;
}

.list-pagination {
  @extend .has-slim-padding;
  position: relative;
  top: 1px;
  background-color: $grey-lightest;
  margin-bottom: $size-4;

  a {
    text-decoration: none;
    height: 1.5rem;
    min-width: 1.5rem;
    border: none;
  }
  a.pagination-link {
    width: 3ch;
  }
  a:not(.is-current):hover {
    text-decoration: underline;
    color: $blue;
  }
  a.is-current {
    background-color: $grey;
  }
  .pagination {
    justify-content: center;
  }

  .pagination-list {
    flex-grow: 0;
    flex-wrap: wrap;

    li {
      list-style: none;
    }
  }
  .pagination,
  .pagination-list {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  .pagination-ellipsis {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

.list-pagination .pagination-previous,
.list-pagination .pagination-next {
  @extend .button;
  @extend .is-primary;
  @extend .is-outlined;
  @extend .is-compact;
  background: $white;
  border-color: $blue-500;
  color: $blue-500;
  max-width: 8rem;

  @include until($mobile) {
    max-width: 2rem;
    padding-left: 0;
    padding-right: 0;
  }

  .pagination-next-label,
  .pagination-previous-label {
    @include until($mobile) {
      display: none;
    }
  }

  .icon {
    height: 1em;
    width: 1em;
    vertical-align: middle;

    &:last-child:not(:first-child),
    &:first-child:not(:last-child) {
      margin: -0.1em 0 0;
    }
  }

  .button .icon {
    margin: 0;
  }
}

.pagination-previous {
  order: 1;
}

.pagination-next {
  order: 3;
}

.pagination.is-centered {
  &.pagination-previous {
    order: 1;
  }

  &.pagination-list {
    justify-content: center;
    order: 2;
  }

  &.pagination-next {
    order: 3;
  }
}

.pagination.is-right {
  &.pagination-previous {
    order: 1;
  }

  &.pagination-next {
    order: 2;
  }

  &.pagination-list {
    justify-content: flex-end;
    order: 3;
  }
}

// responsive css
@media screen and (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
  }
  .pagination-previous,
  .pagination-next {
    flex-grow: 1;
    flex-shrink: 1;
  }
  .pagination-list li {
    flex-grow: 1;
    flex-shrink: 1;
  }
}

.list-pagination .pagination-next {
  @include until($mobile) {
    order: 3;
  }
}