@c8y/style/styles/components/navigation-and-layout/navigation/_pagination.less

Styles for Cumulocity IoT applications

@import "../../../../variables/_dlt-c8y-icons-vars.less";
@import "../../../mixins/_icon-base.less";
@import "../../../mixins/_pagination.less";

/**
 * 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;
    .dlt-c8y-icon();
    position: relative;
    width: @size-32;
  }
}
.pagination-first a::before {
  position: absolute;
  left: 9px;
  content: @dlt-c8y-icon-skip-previous;
  text-indent: 0;
  font-size: 1em;
}
.pagination-prev a::before {
  position: absolute;
  left: 9px;
  content: @dlt-c8y-icon-chevron-left;
  text-indent: 0;
  font-size: 1em;
}
.pagination-next a::before {
  position: absolute;
  left: 9px;
  content: @dlt-c8y-icon-chevron-right;
  text-indent: 0;
  font-size: 1em;
}
.pagination-last a::before {
  position: absolute;
  left: 9px;
  content: @dlt-c8y-icon-skip-next;
  text-indent: 0;
  font-size: 1em;
}

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

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