// stylelint-disable custom-property-pattern, csstools/value-no-unknown-custom-properties
// Static spacing values are defined in theme.json custom section
// This file only contains responsive overrides for breakpoints
@use 'breakpoints' as *;

:root {
  // Mid-sized screens
  @media (max-width: ($breakpoint-grid-base + 150px)) {
    --wp--custom--spacing--container-padding-inline: 4rem;
  }

  // When there's no longer room for container to fit with wider white space
  @media (max-width: 700px) {
    --wp--custom--spacing--container-padding-inline: 1.25rem;
  }

  // When navigation transforms to a responsive hamburger menu
  @media (max-width: $breakpoint-nav) {
    --wp--custom--spacing--site-header-padding-block: 1.25rem;
  }

  // Tablet landscape
  @media (max-width: $breakpoint-tablet-landscape) {
    --wp--custom--spacing--grid-gap: 2rem;
  }

  // Tablet
  @media (max-width: $breakpoint-tablet) {
    --wp--custom--spacing--grid-gap: var(--wp--custom--spacing--container-padding-inline);
    --wp--custom--spacing--container-padding-block: 3.125rem;
  }

  // Between tablet and mobile
  @media (max-width: 600px) {
    --wp--custom--spacing--content-padding-block: 3.75rem;
  }

  // Mobile
  @media (max-width: $breakpoint-mobile) {
    --wp--custom--spacing--container-padding-block: 2.5rem;
  }
}