/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

//
// PAGINATION
//

@use "../mixins/focus-ring" as *;
@use "../mixins/breakpoints" as *;

// * Pagination Parent (wrapper) component
// -------------------------------------------------------------------

.hds-pagination {
  display: grid;
  grid-template-areas: "info nav selector";
  grid-template-rows: auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 auto;

  @include hds-breakpoint-below("lg") {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  // Apply group layout styles to child components only when used inside pagination wrapper:
  .hds-pagination-info {
    grid-area: info;
    justify-self: flex-start;
    margin-right: var(--token-pagination-child-spacing-horizontal);

    @include hds-breakpoint-below("lg") {
      margin-top: var(--token-pagination-child-spacing-vertical);
      margin-left: var(--token-pagination-child-spacing-horizontal);
    }
  }

  .hds-pagination-nav {
    grid-area: nav;

    @include hds-breakpoint-below("lg") {
      justify-content: center;
      order: -1;
      // Force nav to occupy a full row so other components will wrap:
      width: 100%;
    }
  }

  .hds-pagination-size-selector {
    grid-area: selector;
    justify-self: flex-end;
    margin-left: var(--token-pagination-child-spacing-horizontal);

    @include hds-breakpoint-below("lg") {
      margin-top: var(--token-pagination-child-spacing-vertical);
      margin-right: var(--token-pagination-child-spacing-horizontal);
    }
  }
}

// * Sub-component: Info
// ---------------------------------------
.hds-pagination-info {
  white-space: nowrap;
}

// * Sub-components: Arrow/Number/Ellipsis (aka "navigation controls")
// -------------------------------------------------------------------

.hds-pagination-nav {
  display: flex;
}

.hds-pagination-nav__page-list {
  display: flex;
  margin: 0;
  padding: 0;
}

.hds-pagination-nav__page-item {
  list-style-type: none;
}

// "controls" are "prev/next" (`arrow`) and "page" numbers (`number`)
.hds-pagination-nav__control {
  display: flex;
  align-items: center;
  height: var(--token-pagination-nav-control-height);
  // border width is subtracted from padding:
  padding: 0 calc(var(--token-pagination-nav-control-padding-horizontal) - 1px);
  color: var(--token-color-foreground-primary);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;

  @include hds-focus-ring-with-pseudo-element(
    $top: var(--token-pagination-nav-control-focus-inset),
    $right: var(--token-pagination-nav-control-focus-inset),
    $bottom: var(--token-pagination-nav-control-focus-inset),
    $left: var(--token-pagination-nav-control-focus-inset)
  );

  &:hover,
  &.mock-hover {
    color: var(--token-color-foreground-action-hover);
  }

  &:active,
  &.mock-active {
    color: var(--token-color-foreground-action-active);
  }
}

.hds-pagination-nav__arrow {
  gap: var(--token-pagination-nav-control-icon-spacing);
  // only the "Previous" & "Next" (`Arrow`) controls can be disabled
  // notice: when `@disabled={{true}}` is applied, the code always renders a `<button>` element
  // so no need to add the [disabled] selector here (elsewhere it's done to cover the `a[disabled]` case)
  &:disabled,
  &.mock-disabled {
    color: var(--token-color-foreground-disabled);
    cursor: not-allowed;
  }
}

.hds-pagination-nav__arrow--direction-prev {
  flex-direction: row;
  justify-content: flex-start;
}

.hds-pagination-nav__arrow--direction-next {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.hds-pagination-nav__number--is-selected {
  position: relative;
  color: var(--token-color-foreground-action);

  &:hover {
    color: var(--token-color-foreground-action-hover);
  }

  &:active {
    color: var(--token-color-foreground-action-active);
  }

  // indicator underline
  // notice: in all these calculations we have to take in account that there's a 1px transparent border
  // notice: we use the `::before` for the focus
  &::after {
    position: absolute;
    right: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
    bottom: -1px;
    left: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
    height: var(--token-pagination-nav-indicator-height);
    margin: 0 auto;
    background-color: currentColor;
    border-radius: 2px;
    content: "";
  }
}

.hds-pagination-nav__ellipsis {
  display: flex;
  align-items: center;
  height: var(--token-pagination-nav-control-height);
  padding: 0 var(--token-pagination-nav-control-padding-horizontal);
  color: var(--token-color-foreground-faint);
}

// * Sub-component: SizeSelector
// -------------------------------------------------------------------
.hds-pagination-size-selector {
  display: flex;
  align-items: center;

  > label {
    white-space: nowrap;
  }

  // notice: this is an `Form::Select::Base` component, slightly customized
  > select {
    height: 28px;
    margin-left: 12px;
    padding: 0 24px 0 8px;
    // font styles for this select differ from standard `Form::Select::Base` styles
    font-size: var(--token-typography-body-100-font-size);
    font-family: var(--token-typography-body-100-font-family);
    line-height: var(--token-typography-body-100-line-height);
    background-position: center right 5px;
  }
}