@use "../../../../variables/index" as *;

@use "../../../../variables/dlt-c8y-icons-vars";
@use "../../../mixins/icon-base";
@use "../../../mixins/pagination";

/**
 * Pagination - Page navigation component
 *
 * Note: Uses $size-* tokens where applicable, $pagination-* variables for colors, and component tokens.
 *
 * Intentionally hardcoded values:
 * - Border widths (1px): Standard borders
 * - Negative offsets (-1px): Fine-tuning
 * - Percentages (50%, 100%): Layout and positioning
 * - Calc expressions: Complex computed border-radius
 * - Z-index values (2, 3): Stacking order
 * - Opacity values: Visual states
 */

.pagination {
  display: flex;
  margin: 0;
  padding-left: 0;
  border-radius: calc($form-control-height-base * 0.5);

  > li {
    display: inline;
    > a,
    > span {
      position: relative;
      float: left;
      margin-left: -1px;
      padding: $component-padding-base-vertical $component-padding-base-horizontal;
      border: 1px solid $pagination-border;
      background-color: $pagination-bg;
      color: $pagination-color;
      text-decoration: none;
      line-height: $line-height-base;

      &:hover,
      &:focus {
        z-index: 2;
        border-color: $pagination-hover-border;
        background-color: $pagination-hover-bg;
        color: $pagination-hover-color;
      }
      &:focus {
        outline: 2px solid $component-color-focus;
        outline-offset: -2px;
        border-radius: $component-border-radius-focus;
      }
    }
    &:first-child {
      > a,
      > span {
        margin-left: 0;
        text-indent: 9000px;
        border-top-left-radius: calc($form-control-height-base * 0.5);
        border-bottom-left-radius: calc($form-control-height-base * 0.5);
      }
    }
    &:last-child {
      > a,
      > span {
        text-indent: 9000px;
        border-top-right-radius: calc($form-control-height-base * 0.5);
        border-bottom-right-radius: calc($form-control-height-base * 0.5);
      }
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      z-index: 3;
      border-color: $pagination-active-border;
      background-color: $pagination-active-bg;
      color: $pagination-color-active;
      cursor: default;
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      border-color: $pagination-disabled-border;
      background-color: $pagination-disabled-bg;
      color: $pagination-disabled-color;
      cursor: $cursor-disabled;
    }
  }
}

.pagination-first,
.pagination-prev,
.pagination-next,
.pagination-last {
  > a {
    overflow: hidden;
    @include icon-base.dlt-c8y-icon;
    position: relative;
    width: $size-32;
  }
}
.pagination-first a::before {
  position: absolute;
  left: 9px;
  content: dlt-c8y-icons-vars.$dlt-c8y-icon-skip-previous;
  text-indent: 0;
  font-size: 1em;
}
.pagination-prev a::before {
  position: absolute;
  left: 9px;
  content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-left;
  text-indent: 0;
  font-size: 1em;
}
.pagination-next a::before {
  position: absolute;
  left: 9px;
  content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-right;
  text-indent: 0;
  font-size: 1em;
}
.pagination-last a::before {
  position: absolute;
  left: 9px;
  content: dlt-c8y-icons-vars.$dlt-c8y-icon-skip-next;
  text-indent: 0;
  font-size: 1em;
}

// Sizing
.pagination-lg {
  @include pagination.pagination-size($component-padding-large-vertical, $component-padding-large-horizontal, $font-size-large, $line-height-large, $component-border-radius-large);
}

.pagination-sm {
  @include pagination.pagination-size($component-padding-small-vertical, $component-padding-small-horizontal, $font-size-small, $line-height-small, $component-border-radius-small);
}