@use "sass:map";
@use "../../styles/settings/breakpoints" as tokens;

.product-card-list {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-8);

  &__header {
    @include flex(row, nowrap, $whitespace-8, null, space-between);

    grid-column: 2 / 3;

    @include media-down(tablet-s) {
      flex-direction: column;
      gap: $whitespace-6;
    }
  }

  &__button-group {
    @include flex(row, nowrap, $whitespace-6, center);

    @include media-down(tablet-s) {
      justify-content: space-between;
    }
  }

  &__filter-button {
    display: none;

    @include media-down(tablet-l) {
      /* stylelint-disable-next-line defensive-css/require-flex-wrap -- Exception */
      display: flex;
    }
  }

  &__heading {
    font-size: $font-size-7;
    text-transform: uppercase;

    @include media-down(mobile-m) {
      text-align: center;
    }
  }

  &__list {
    @include remove-list-styles;
    @include grid(
      null,
      repeat(auto-fit, 40rem),
      $whitespace-10,
      null,
      start space-evenly
    );

    inline-size: 100%;

    @include media-down(tablet-xs) {
      grid-template-columns: repeat(auto-fit, 30rem);
    }

    @include media-down(mobile-m) {
      grid-template-columns: repeat(auto-fit, 25rem);
    }
  }

  &__paginator {
    @include flex(row, nowrap, $whitespace-4, center, space-between);

    align-self: center;
    inline-size: 100%;
    max-inline-size: 50rem;
  }

  &__page {
    font-size: $font-size-5;
  }
}