// TODO: replace with UX Pattern Library/UI Toolkit pattern
// Copied from _pagination.scss in cms

.pagination {
  @include clearfix();

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

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

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

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

  .nav-link {
    @include transition(all $tmg-f2 ease-in-out 0s);

    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: $blue;
      background-image: none;
      border-radius: 3px;
      color: $white;
    }

    &.is-disabled {
      background-color: transparent;
      color: $gray-l2;
      pointer-events: none;
    }
  }

  .nav-label {
    @extend %text-sr;
  }

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

  .current-page,
  .page-number-input,
  .total-pages {
    @extend %t-copy-base;
    @extend %t-strong;

    width: ($baseline*2.5);
    vertical-align: middle;
    margin: 0 ($baseline*0.75);
    padding: ($baseline/4);
    text-align: center;
    color: $gray-d1;
  }

  .current-page {
    @extend %ui-depth1;

    position: absolute;

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

  .page-divider {
    @extend %t-title4;
    @extend %t-regular;

    vertical-align: middle;
    color: $gray-l2;
  }

  .pagination-form {
    @extend %ui-depth2;

    position: relative;

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

    .page-number-input {
      @include transition(all $tmg-f2 ease-in-out 0s);

      border: 1px solid transparent;
      border-bottom: 1px dotted $gray-l2;
      border-radius: 0;
      box-shadow: none;
      background: none;

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

      &:focus {
        // borrowing the base input focus styles to match overall app
        @include linear-gradient($yellow-l4, tint($yellow-l4, 90%));

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

// styles for search/pagination metadata and sorting
.listing-tools {
  @extend %t-copy-sub1;

  color: $gray-d1;

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

  .listing-sort-select {
    @extend %t-copy-sub1;
    @extend %t-regular;

    border: 0;
  }
}