// Copied from elements/_pagination.scss

.pagination {
  @include clearfix();

  display: inline-block;
  width: flex-grid(3, 12); // TODO: remove flex-grid

  &.pagination-compact {
    @include text-align(right);
  }

  &.pagination-full {
    display: block;
    width: flex-grid(4, 12); // TODO: remove flex-grid
    margin: $baseline auto;
  }

  .nav-item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

  .nav-link {
    display: block;
    border: 0;
    background-image: none;
    background-color: transparent;
    padding: ($baseline/2) ($baseline*0.75);

    &.previous {
      margin-right: ($baseline/2);
    }

    &.next {
      margin-left: ($baseline/2);
    }

    &:hover {
      background-color: theme-color("primary");
      background-image: none;
      border-radius: 3px;
      color: $white;
    }

    &.is-disabled {
      background-color: transparent;
      color: theme-color("disabled");
      pointer-events: none;
    }
  }

  .nav-label {
    @extend .sr-only;
  }

  .pagination-form,
  .current-page,
  .page-divider,
  .total-pages {
    display: inline-block;
  }

  .current-page,
  .page-number-input,
  .total-pages {
    width: ($baseline*2.5);
    vertical-align: middle;
    margin: 0 ($baseline*0.75);
    padding: ($baseline/4);
    text-align: center;
    color: theme-color("dark");
  }

  .current-page {
    position: absolute;

    @include left(-($baseline/4));
  }

  .page-divider {
    vertical-align: middle;
    color: theme-color("dark");
  }

  .pagination-form {
    position: relative;
    z-index: 100;

    .page-number-label,
    .submit-pagination-form {
      @extend .sr-only;
    }

    .page-number-input {
      border: 1px solid transparent;
      border-bottom: 1px dotted $gray;
      border-radius: 0;
      box-shadow: none;
      background: none;

      &:hover {
        background-color: $white;
        opacity: 0.6;
      }

      &:focus {
        opacity: 1;
        box-shadow: 0 0 3px $black inset;
        background-color: $white;
        border: 1px solid transparent;
        border-radius: 3px;
      }
    }
  }
}

// styles for search/pagination metadata and sorting
.listing-tools {
  color: theme-color("dark");

  label { // override
    color: inherit;
    font-size: inherit;
    cursor: auto;
  }

  .listing-sort-select {
    border: 0;
  }
}