@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/intersection-animator";
@use "s360-scss-toolkit";

.view {
  &__pager:has(ul) {
    margin-top: site-config.spacer(0);
  }

  &__more-link {
    margin-top: site-config.spacer(0);
  }

  &__content {
    container-type: inline-size;
  }

  &__row {
    @extend %fadein-slideup-animator;

    container-type: inline-size;

    + #{&} {
      margin-top: var(--view--row--margin-top, #{ site-config.spacer(0) });
    }
  }

  &__footer {
    margin-top: site-config.spacer(0);
  }

  // **************************************************
  // EXPOSED FILTERS

  &:has(.view__filters) {
    --summary--display: inline-block;
    --summary--padding: 0;
    --summary--margin--open: 0 0 #{ site-config.spacer(0) } 0;

    // **************************************************
    // MEDIA QUERIES

    @media (width >= mq.$mq-768) {
      --summary--margin--open: 0;
      --summary--padding: 0 0 #{ site-config.spacer(0) } 0;
      --summary--pointer-events: none;
    }
  }
}
