@import "../utilities/controls";
@import "../utilities/mixins";


@import "../../customize/variables";


.pagination {
  @extend %block;

  font-size: $size-normal;
  margin: $pagination-margin;

  // Sizes
  &.is-small {
    font-size: $size-small;
  }

  &.is-medium {
    font-size: $size-medium;
  }

  &.is-large {
    font-size: $size-large;
  }

  &.is-rounded {
    .pagination-previous,
    .pagination-next {
      padding-left: 1em;
      padding-right: 1em;
      border-radius: $radius-rounded;
    }

    .pagination-link {
      border-radius: $radius-rounded;
    }
  }
}

.pagination,
.pagination-list {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
  @extend %control;

  @extend %unselectable;

  font-size: $pagination-item-font-size;
  justify-content: center;
  margin: $pagination-item-margin;
  padding-left: $pagination-item-padding-left;
  padding-right: $pagination-item-padding-right;
  text-align: center;
}

.pagination-previous,
.pagination-next,
.pagination-link {
  border-color: $pagination-border-color;
  color: $pagination-color;
  min-width: $pagination-min-width;

  &:hover {
    border-color: $pagination-hover-border-color;
    color: $pagination-hover-color;
  }

  &:focus {
    border-color: $pagination-focus-border-color;
  }

  &:active {
    box-shadow: $pagination-shadow-inset;
  }

  &[disabled] {
    background-color: $pagination-disabled-background-color;
    border-color: $pagination-disabled-border-color;
    box-shadow: none;
    color: $pagination-disabled-color;
    opacity: 0.5;
  }
}

.pagination-previous,
.pagination-next {
  padding-left: $pagination-nav-padding-left;
  padding-right: $pagination-nav-padding-right;
  white-space: nowrap;
}

.pagination-link {
  &.is-current {
    background-color: $pagination-current-background-color;
    border-color: $pagination-current-border-color;
    color: $pagination-current-color;
  }
}

.pagination-ellipsis {
  color: $pagination-ellipsis-color;
  pointer-events: none;
}

.pagination-list {
  flex-wrap: wrap;

  li {
    list-style: none;
  }
}

@include mobile {
  .pagination {
    flex-wrap: wrap;
  }

  .pagination-previous,
  .pagination-next {
    flex-grow: 1;
    flex-shrink: 1;
  }

  .pagination-list {
    li {
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}


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

  .pagination-previous,
  .pagination-next,
  .pagination-link,
  .pagination-ellipsis {
    margin-bottom: 0;
    margin-top: 0;
  }

  .pagination-previous {
    order: 2;
  }

  .pagination-next {
    order: 3;
  }

  .pagination {
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 0;

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

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

      .pagination-next {
        order: 3;
      }
    }

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

      .pagination-next {
        order: 2;
      }

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