@use "sass:math";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: spacing.space(1);

  @include spacing.space-above;

  &:not(:has(&__list)) {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: spacing.space(2);
  }

  &__prev-next {
    &--prev {
      text-align: left;
    }

    &--next {
      text-align: right;
    }

    &-button {
      text-align: inherit;
      text-wrap: wrap;

      &--prev {
      }

      &--next {
      }

      &-text {
        display: block;
      }

      &-title {
        display: block;
      }

      &-description {
        padding-bottom: spacing.space(0.25);

        display: block;

        line-height: 1.25;
        @include typography.font-size(16);
      }

      &:has(&-description) {
        svg {
          margin-top: 0.35em;

          align-self: flex-start;
        }
      }
    }
  }

  :has(&__prev-next-button-description) &__prev-next-button-title {
    @include typography.main-font-weight-bold;
  }

  &:not(:has(&__list)) &__prev-next {
    flex: 1;

    &-button {
      padding: 0;

      border-width: 0;

      &-title {
        @include typography.main-font-weight-bold;
      }
    }
  }

  &__link {
    min-width: 1.5rem;
    padding-right: spacing.space(0.5);
    padding-left: spacing.space(0.5);
  }

  &__list {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: spacing.space(0.25);

    list-style: none;
  }

  &__item {
    &--ellipses {
      min-width: 2rem;
      padding: spacing.space(0.5);

      text-align: center;
    }

    &--current {
    }
  }

  @include media.on-mobile {
    flex-direction: column;
    gap: spacing.space(0.5);

    &:not(:has(&__list)) {
      align-items: flex-start;
      gap: spacing.space(1);
    }

    &:not(:has(&__list)) &__prev-next {
      &--next {
        text-align: left;
      }

      &-button {
        &--next {
          flex-direction: row;
        }
      }
    }
  }

  @include media.on-tiny {
    &:has(&__list) &__item {
      &:not(:is(:first-child, :last-child, &--current, &--ellipses)) {
        display: none;
      }
    }
  }
}