/**
 * Pagination
 *
 * View the [Paginaton package](https://github.com/previousnext/mixtape/tree/master/packages/pagination) on github.
 *
 * Wrapper: section section--m
 *
 * Markup: pagination.twig
 *
 * Style guide: Elements.pagination
 */

@layer elements {
  .pagination {
    --active-color: var(--colour-foreground);
    --inactive-color: var(--colour-foreground-alt);
    --active-underline: underline;

    margin-block: var(--spacing-m);
    margin-inline: 0;
    padding: 0;

    & button {
      all: unset;
      cursor: pointer;
      box-sizing: border-box;

      &:focus {
        outline: var(--outline-width, var(--outline-size))
          var(--outline-style, solid) var(--outline-color, currentcolor);
        outline-offset: var(--outline-offset, var(--outline-size));
      }
    }

    & :is(a, button, [aria-current="page"], [aria-current="step"]) {
      text-decoration-line: none;
      display: block;
      block-size: var(--spacing-l);
      line-height: var(--spacing-l);
      padding-block: 0;
      padding-inline: var(--spacing-xs);
    }

    & :is([aria-current="page"], [aria-current="step"], .is-active) {
      font-weight: var(--font-weight-bold);
      color: var(--active-color);
      text-decoration-line: var(--active-underline);
      text-decoration-thickness: 2px;
      text-decoration-skip-ink: auto;
      text-underline-offset: 0.15em;
    }

    & .icon:not(.icon--only) {
      display: flex;
      align-items: center;
      gap: var(--spacing-xxs);
    }

    & .pagination__items {
      display: flex;
      place-content: center;
      padding-inline-start: 0;
      list-style-type: none;
      text-align: center;

      & :is(button, a) {
        color: var(--inactive-color);

        @media (hover: hover) {

        &:hover {
          color: var(--active-color);
          text-decoration-line: var(--active-underline);
        }
        }
      }
    }

    & .pagination__ellipsis {
      padding-block: 0;
      padding-inline: var(--spacing-xs);
    }

    & :is(.pagination__previous, .pagination__next) .icon:not(.icon--only) {
      font-weight: var(--font-weight-bold);
      color: var(--active-color);
      text-transform: capitalize;

      @media (--small-down) {
        overflow: hidden;
        inline-size: var(--spacing-s);
        position: relative;
        text-indent: 100%;

        &::before {
          position: absolute;
        }
      }
    }

    & .pagination__previous {
      margin-inline-end: auto;

      @media (--small-up) {
        & :is(button, a) {
          padding-inline-start: 0;
        }
      }
    }

    & .pagination__next {
      margin-inline-start: auto;

      @media (--small-up) {
        & :is(button, a) {
          padding-inline-end: 0;

          &::before {
            order: 2;
          }
        }
      }
    }
  }
}

/**
 * Print stylesheet
 */

@media print {
  .pagination {
    display: none;
  }
}