@layer reset, tokens, base, components, responsive, utilities;

@layer responsive {
  @media (max-width: 639.98px) {
    .search-panel__field {
      min-width: 0;
    }

    .search-panel__body {
      padding-bottom: max(var(--space-5), calc(var(--safe-bottom) + var(--space-3)));
    }

    html:has(.search-panel.is-open) {
      overscroll-behavior: none;
    }

    .search-result {
      transition:
        transform var(--motion-micro) var(--ease-enter),
        opacity var(--motion-micro) linear;
    }

    .search-result:not(.search-result--soon):active {
      transform: scale(0.985);
      opacity: 0.86;
      transition-duration: var(--motion-instant);
      transition-delay: var(--motion-press-delay);
    }

    .search-result:not(.search-result--soon):active .search-result__thumb {
      transform: none;
    }
  }
}