// Pagination
// *******************************************************************************

// Pagination Mixins
@each $color, $value in $theme-colors {
  @if $color != primary and $color != light {
    @include template-pagination-variant('.pagination-#{$color}', $value);
    @include template-pagination-outline-variant('.pagination-outline-#{$color}', $value);
  }
}

// Pagination next, prev, first & last css padding
.page-item {
  &.first,
  &.last,
  &.next,
  &.prev,
  &.previous {
    .page-link {
      padding: $pagination-padding-y - 0.043rem $pagination-padding-x - 0.067rem;
    }
  }
  &.disabled,
  &[disabled] {
    .page-link {
      opacity: $pagination-disabled-opacity;
      pointer-events: none;
    }
  }
}
.page-item:last-child .tf-icon {
  transform: translateX(7%);
}

// Pagination basic style
.page-link,
.page-link > a {
  @include border-radius($border-radius);

  text-align: center;
  min-width: calc(
    #{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-x * 1.923)} + calc(#{$pagination-border-width} * 2)'}
  );
  min-height: calc(
    #{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + calc(#{$pagination-border-width} * 2)'}
  );

  &:focus {
    color: $pagination-hover-color;
  }
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
}

// Add spacing between pagination items
.page-item + .page-item .page-link,
.pagination li + li > a:not(.page-link) {
  .pagination-sm & {
    margin-left: 0.25rem;
  }
  .pagination-lg & {
    margin-left: 0.5rem;
  }
}

// Removed border from default pagination and set line-height of icons
.pagination {
  &:not([class*='pagination-outline-']) {
    .page-link {
      border-color: transparent;
    }
  }
  &[class*='pagination-outline-'] {
    .page-item.active .page-link {
      box-shadow: none;
    }
    .page-item:not(.active) .page-link,
    .pagination li > a:not(.page-link) {
      background-color: transparent;
      &:hover,
      &:focus {
        background-color: rgba-to-hex(rgba($black, 0.06), $rgba-to-hex-bg);
        border-color: rgba-to-hex(rgba($black, 0.22), $rgba-to-hex-bg);
        color: $headings-color;
      }
    }
  }
}

.page-link.btn-primary {
  box-shadow: none !important;
}

// Pagination shape rounded & Square
.pagination {
  &.pagination-square .page-item a {
    @include border-radius(0);
  }
  &.pagination-round .page-item a {
    @include border-radius(50%);
  }
  &.pagination-rounded .page-item a {
    @include border-radius($border-radius);
  }
  &.pagination-sm.pagination-rounded .page-item a {
    @include border-radius($border-radius-sm);
  }
  &.pagination-lg.pagination-rounded .page-item a {
    @include border-radius($border-radius-lg);
  }
}

// Sizing
// *******************************************************************************

// Pagination Large
.pagination-lg .page-link,
.pagination-lg > li > a:not(.page-link) {
  min-width: calc(
    #{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-x-lg * 1.615)} + calc(#{$pagination-border-width} * 2)'}
  );
  min-height: calc(
    #{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-y-lg * 2.33)} + calc(#{$pagination-border-width} * 2)'}
  );
}

// Pagination Small
.pagination-sm .page-link,
.pagination-sm > li > a:not(.page-link) {
  min-width: calc(
    #{'#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)'}
  );
  min-height: calc(
    #{'#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)'}
  );
}
.pagination-sm > .page-item {
  &.first,
  &.last,
  &.next,
  &.prev,
  &.previous {
    .page-link {
      padding: $pagination-padding-y-sm - 0.1055rem;
    }
  }
}

// RTL pagination
// *******************************************************************************

@include rtl-only {
  .pagination {
    padding-right: 0;
  }

  // Add spacing between pagination items
  .page-item + .page-item .page-link,
  .pagination li + li > a:not(.page-link) {
    margin-left: 0;
    margin-right: $pagination-margin-start;
    .pagination-sm & {
      margin-right: 0.25rem;
    }
    .pagination-lg & {
      margin-right: 0.5rem;
    }
  }

  .page-item {
    &.first,
    &.last,
    &.next,
    &.prev,
    &.previous {
      .page-link {
        i {
          transform: rotate(180deg);
        }
      }
    }
  }
}

@include dark-layout-only {
  .pagination[class*='pagination-outline-'] {
    .page-item .page-link,
    .pagination li > a:not(.page-link) {
      &:hover,
      &:focus {
        background-color: rgba($base, 0.06);
        border-color: rgba-to-hex(rgba($base, 0.22), $rgba-to-hex-bg);
      }
    }
  }
}