@use '../../sass-utilities' as *;

$pf-v6-c-pagination--breakpoint-map: build-breakpoint-map();
$pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");

@include pf-root($pagination) {
  --#{$pagination}--inset: 0;
  --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
  --#{$pagination}--BorderColor: var(--pf-t--global--border--color--high-contrast);
  --#{$pagination}--BorderBlockStartWidth: 0;
  --#{$pagination}--BorderBlockEndWidth: 0;

  // Page insets
  --#{$pagination}--m-page-insets--inset: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--border--width--main--default));

  // nav
  --#{$pagination}__nav--Display: none;
  --#{$pagination}--m-display-summary__nav--Display: none;
  --#{$pagination}--m-display-full__nav--Display: inline-flex;
  --#{$pagination}__nav--ColumnGap: var(--pf-t--global--spacer--sm);

  // nav page select
  --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
  --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
  --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
  --#{$pagination}__nav-page-select--c-form-control--Width: calc(var(--#{$pagination}__nav-page-select--c-form-control--width-base) + (var(--#{$pagination}__nav-page-select--c-form-control--width-chars) * 1ch));

  // total items
  --#{$pagination}__total-items--Display: block;
  --#{$pagination}--m-display-summary__total-items--Display: block;
  --#{$pagination}--m-display-full__total-items--Display: none;

  // top
  --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
  --#{$pagination}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$pagination}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$pagination}--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
  --#{$pagination}--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$pagination}--m-sticky--InsetBlockStart: 0;
  --#{$pagination}--m-sticky--BorderBlockEndWidth:  var(--pf-t--global--border--width--high-contrast--regular);
  --#{$pagination}--m-sticky-base--InsetBlockStart: 0;
  --#{$pagination}--m-sticky-base--BorderRadius: 0;
  --#{$pagination}--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
  --#{$pagination}--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
  --#{$pagination}--m-sticky-stuck--BoxShadow: var(--#{$pagination}--m-sticky--BoxShadow);
  --#{$pagination}--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
  --#{$pagination}--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);

  // bottom
  --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
  --#{$pagination}--m-bottom--BorderRadius: 0;
  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
  --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$pagination}--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
  --#{$pagination}--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
  --#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
  --#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$pagination}--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
  --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
  --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
  --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
  --#{$pagination}--m-bottom--m-static--BorderRadius: 0;
  --#{$pagination}--m-bottom--m-static--BackgroundColor: transparent;
  --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: 0;

  :where(:root.pf-v6-theme-glass) & {
    --#{$pagination}--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
    --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
    --#{$pagination}--m-sticky--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
    --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
    --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
    --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
    --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
  }

  // page menu
  --#{$pagination}__page-menu--Display--base: block;
  --#{$pagination}__page-menu--Display: none;
  --#{$pagination}--m-display-summary__page-menu--Display: none;
  --#{$pagination}--m-display-full__page-menu--Display: var(--#{$pagination}__page-menu--Display--base);
  --#{$pagination}--m-bottom__page-menu--Display: var(--#{$pagination}__page-menu--Display--base);
  --#{$pagination}__page-menu--md--Display: var(--#{$pagination}__page-menu--Display--base);

  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
    --#{$pagination}--m-bottom--BackgroundColor: transparent;
    --#{$pagination}--m-bottom--BoxShadow: none;
    --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
    --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
    --#{$pagination}__nav--Display: inline-flex;
    --#{$pagination}__total-items--Display: none;
  }

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
  }
}

.#{$pagination} {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--#{$pagination}--ColumnGap);
  align-items: center;
  justify-content: flex-end;
  padding-inline-start: var(--#{$pagination}--inset);
  padding-inline-end: var(--#{$pagination}--inset);
  border: 0 solid var(--#{$pagination}--BorderColor);
  border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
  border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);

  .#{$pagination}__page-menu {
    display: var(--#{$pagination}__page-menu--Display);
  }

  &.pf-m-bottom {
    --#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
    --#{$pagination}--m-sticky--InsetBlockStart: auto;
    --#{$pagination}--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--BorderBlockStartWidth);

    position: sticky;
    inset-block-end: var(--#{$pagination}--m-bottom--InsetBlockEnd);
    justify-content: center;
    padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
    padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
    padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
    padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
    background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
    border-radius: var(--#{$pagination}--m-bottom--BorderRadius);
    box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);

    .#{$pagination}__nav-control.pf-m-first,
    .#{$pagination}__nav-control.pf-m-last,
    .#{$pagination}__nav-page-select {
      display: none;
    }

    .#{$pagination}__page-menu {
      position: absolute;
      display: var(--#{$pagination}--m-bottom__page-menu--Display);
    }

    .#{$pagination}__nav {
      display: flex;
      flex-basis: 100%;
      justify-content: space-between;
    }

    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
      --#{$pagination}--m-bottom--MarginBlockStart: 0;
      --#{$pagination}--m-bottom--InsetBlockEnd: auto;
      --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);

      position: relative;
      justify-content: flex-end;
      padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
      padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
      padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
      padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);

      .#{$pagination}__nav-control.pf-m-first,
      .#{$pagination}__nav-control.pf-m-last,
      .#{$pagination}__nav-page-select {
        display: block;
      }

      .#{$pagination}__nav-page-select {
        display: inline-flex;
      }

      .#{$pagination}__page-menu {
        position: relative;
      }

      .#{$pagination}__nav {
        display: inline-flex;
        flex-basis: auto;
      }
    }
  }

  &.pf-m-static {
    --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pagination}--m-bottom--m-static--BackgroundColor);

    position: relative;
    padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
    padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
    padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
    padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
    border: 0;
    border-radius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
    box-shadow: none;
  }

  &.pf-m-sticky {
    --#{$pagination}--m-bottom--InsetBlockEnd: 0;
    --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
    --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);

    inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
    background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
    border-radius: var(--#{$pagination}--m-sticky--BorderRadius);
    box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
  }

  &.pf-m-sticky,
  &.pf-m-sticky-base {
    position: sticky;
    z-index: var(--#{$pagination}--m-sticky--ZIndex);
    padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
    padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
    padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
    padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
  }

  &.pf-m-sticky-base {
    inset-block-start: var(--#{$pagination}--m-sticky-base--InsetBlockStart);
    border-radius: var(--#{$pagination}--m-sticky-base--BorderRadius, 0);

    &.pf-m-bottom {
      --#{$pagination}--m-sticky-base--InsetBlockStart: 0;
      --#{$pagination}--m-bottom--InsetBlockEnd: var(--#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd);
    }

    &::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      background-color: var(--#{$pagination}--m-sticky-stuck--BackgroundColor);
      border-radius: var(--#{$pagination}--m-sticky-stuck--BorderRadius);
      box-shadow: var(--#{$pagination}--m-sticky-stuck--BoxShadow);
      opacity: 0;
      transition-timing-function: var(--#{$pagination}--m-sticky-base--TransitionTimingFunction);
      transition-duration: var(--#{$pagination}--m-sticky-base--TransitionDuration);
      transition-property: opacity;
    }
  }

  &.pf-m-sticky-stuck {
    --#{$pagination}--m-sticky-base--BoxShadow: var(--#{$pagination}--m-sticky-stuck--BoxShadow);
    --#{$pagination}--m-sticky-base--BorderRadius: var(--#{$pagination}--m-sticky-stuck--BorderRadius);
    --#{$pagination}--m-sticky-base--BackgroundColor: var(--#{$pagination}--m-sticky-stuck--BackgroundColor);

    &::before {
      opacity: 1;
    }
  }

  &.pf-m-page-insets {
    --#{$pagination}--inset: var(--#{$pagination}--m-page-insets--inset);
  }
}

// nav
.#{$pagination}__nav {
  display: var(--#{$pagination}__nav--Display);
  column-gap: var(--#{$pagination}__nav--ColumnGap);
  justify-content: flex-end;
}

// nav control
.#{$pagination}__nav-control {
  @include pf-v6-mirror-inline-on-rtl;
}

// nav page element
.#{$pagination}__nav-page-select {
  display: flex;
  column-gap: var(--#{$pagination}__nav-page-select--ColumnGap);
  align-items: center;

  > * {
    font-size: var(--#{$pagination}__nav-page-select--FontSize);
    white-space: nowrap;
  }

  .#{$form-control} {
    width: var(--#{$pagination}__nav-page-select--c-form-control--Width);

    > :is(input) {
      @include pf-v6-remove-num-arrows;
    }
  }
}

// display-summary element for total-items items
.#{$pagination}__total-items {
  display: var(--#{$pagination}__total-items--Display);
}

// stylelint-disable no-duplicate-selectors
.#{$pagination} {
  @each $breakpoint, $breakpoint-value in $pf-v6-c-pagination--breakpoint-map {
    $breakpoint-name: "";

    @if $breakpoint != "base" {
      $breakpoint-name: -on-#{$breakpoint};
    }

    @include pf-v6-apply-breakpoint($breakpoint) {
      &.pf-m-display-summary#{$breakpoint-name} {
        --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
        --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-summary__page-menu--Display);
        --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-summary__total-items--Display);
      }

      &.pf-m-display-full#{$breakpoint-name} {
        --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-full__nav--Display);
        --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-full__page-menu--Display);
        --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
      }

      @each $spacer, $spacer-value in $pf-v6-c-pagination--variable-map {
        &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
          --#{$pagination}--inset: #{$spacer-value};
        }
      }
    }
  }
}
// stylelint-enable
