@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 {

  .pagination-first,
  .pagination-prev,
  .pagination-next,
  .pagination-last {

    >a,
    >span {
      overflow: hidden;
      @include icon-base.dlt-c8y-icon;
      position: relative;
      width: $size-32;
      height: $form-control-height-base;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .pagination-first a::before {
    position: absolute;
    top: 0;
    left: 9px;
    text-indent: 0;
    font-size: 1em;
    height: 100%;

    @if $use-svg-icons {
      $_icon-dir: if(sass($use-relative-paths): '../../../../assets/icons'; else: 'assets/icons');
      --_icon-mask: url("#{$_icon-dir}/dlt/skip-previous.svg");
      mask-image: var(--_icon-mask);
      -webkit-mask-image: var(--_icon-mask);
    } @else {
      content: dlt-c8y-icons-vars.$dlt-c8y-icon-skip-previous;
    }
  }

  .pagination-prev a::before {
    position: absolute;
    top: 0;
    left: 9px;
    text-indent: 0;
    font-size: 1em;
    height: 100%;

    @if $use-svg-icons {
      $_icon-dir: if(sass($use-relative-paths): '../../../../assets/icons'; else: 'assets/icons');
      --_icon-mask: url("#{$_icon-dir}/dlt/chevron-left.svg");
      mask-image: var(--_icon-mask);
      -webkit-mask-image: var(--_icon-mask);
    } @else {
      content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-left;
    }
  }

  .pagination-next a::before {
    position: absolute;
    top: 0;
    left: 7px;
    text-indent: 0;
    font-size: 1em;
    height: 100%;

    @if $use-svg-icons {
      $_icon-dir: if(sass($use-relative-paths): '../../../../assets/icons'; else: 'assets/icons');
      --_icon-mask: url("#{$_icon-dir}/dlt/chevron-right.svg");
      mask-image: var(--_icon-mask);
      -webkit-mask-image: var(--_icon-mask);
    } @else {
      content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-right;
    }
  }

  .pagination-last a::before {
    position: absolute;
    top: 0;
    left: 9px;
    text-indent: 0;
    font-size: 1em;
    height: 100%;

    @if $use-svg-icons {
      $_icon-dir: if(sass($use-relative-paths): '../../../../assets/icons'; else: 'assets/icons');
      --_icon-mask: url("#{$_icon-dir}/dlt/skip-next.svg");
      mask-image: var(--_icon-mask);
      -webkit-mask-image: var(--_icon-mask);
    } @else {
      content: dlt-c8y-icons-vars.$dlt-c8y-icon-skip-next;
    }
  }
}

// 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);
}