@use "functions" as *;
@use "mixins/lists" as *;
@use "mixins/border-radius" as *;
@use "mixins/focus-ring" as *;
@use "mixins/gradients" as *;
@use "mixins/transition" as *;
@use "mixins/tokens" as *;

// mdo-do: Update pagination to support variant themes

// stylelint-disable custom-property-no-missing-var-function
$pagination-tokens: () !default;

// scss-docs-start pagination-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$pagination-tokens: defaults(
  (
    --pagination-min-height: var(--btn-input-min-height),
    --pagination-padding-x: var(--btn-input-padding-x),
    --pagination-padding-y: var(--btn-input-padding-y),
    --pagination-font-size: var(--btn-input-font-size),
    --pagination-color: var(--link-color),
    --pagination-bg: var(--bg-body),
    --pagination-border-width: var(--border-width),
    --pagination-border-color: var(--border-color),
    --pagination-border-radius: var(--btn-input-border-radius),
    --pagination-hover-color: var(--link-hover-color),
    --pagination-hover-bg: var(--bg-1),
    --pagination-hover-border-color: var(--border-color),
    --pagination-focus-color: var(--link-hover-color),
    --pagination-focus-bg: var(--bg-2),
    --pagination-active-color: var(--primary-contrast),
    --pagination-active-bg: var(--primary-bg),
    --pagination-active-border-color: var(--primary-bg),
    --pagination-disabled-color: var(--fg-3),
    --pagination-disabled-bg: var(--bg-2),
    --pagination-disabled-border-color: var(--border-color),
  ),
  $pagination-tokens
);
// scss-docs-end pagination-tokens

// scss-docs-start pagination-sizes
$pagination-sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$pagination-sizes: defaults(
  ("sm", "lg"),
  $pagination-sizes
);
// scss-docs-end pagination-sizes
// stylelint-enable custom-property-no-missing-var-function

@layer components {
  .pagination {
    @include tokens($pagination-tokens);

    display: flex;
    @include list-unstyled();
  }

  .page-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pagination-min-height);
    padding: var(--pagination-padding-y) var(--pagination-padding-x);
    font-size: var(--pagination-font-size);
    color: var(--pagination-color);
    text-decoration: none;
    background-color: var(--pagination-bg);
    border: var(--pagination-border-width) solid var(--pagination-border-color);
    @include transition(color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out);

    &:hover {
      z-index: 2;
      color: var(--pagination-hover-color);
      background-color: var(--pagination-hover-bg);
      border-color: var(--pagination-hover-border-color);
    }

    &:focus-visible {
      z-index: 3;
      color: var(--pagination-focus-color);
      background-color: var(--pagination-focus-bg);
      @include focus-ring(true);
    }

    &.active,
    .active > & {
      z-index: 3;
      color: var(--pagination-active-color);
      @include gradient-bg(var(--pagination-active-bg));
      border-color: var(--pagination-active-border-color);
    }

    &.disabled,
    .disabled > & {
      color: var(--pagination-disabled-color);
      pointer-events: none;
      background-color: var(--pagination-disabled-bg);
      border-color: var(--pagination-disabled-border-color);
    }
  }

  .page-item {
    &:not(:first-child) .page-link {
      margin-inline-start: calc(-1 * var(--pagination-border-width));
    }

    &:first-child {
      .page-link {
        @include border-start-radius(var(--pagination-border-radius));
      }
    }

    &:last-child {
      .page-link {
        @include border-end-radius(var(--pagination-border-radius));
      }
    }
  }

  //
  // Sizing
  //

  // scss-docs-start pagination-sizes-loop
  @each $size, $_ in $pagination-sizes {
    .pagination-#{$size} {
      --pagination-min-height: var(--bs-btn-input-#{$size}-min-height);
      --pagination-padding-y: var(--btn-input-#{$size}-padding-y);
      --pagination-padding-x: var(--btn-input-#{$size}-padding-x);
      --pagination-font-size: var(--btn-input-#{$size}-font-size);
      --pagination-border-radius: var(--btn-input-#{$size}-border-radius);
    }
  }
  // scss-docs-end pagination-sizes-loop
}