/*
 * HEOP responsive standards.
 * Keep CSS, JS and viewport tests aligned with these values.
 */

:root {
  --heop-breakpoint-xs: 0px;
  --heop-breakpoint-sm: 480px;
  --heop-breakpoint-md: 768px;
  --heop-breakpoint-lg: 1024px;
  --heop-breakpoint-xl: 1280px;
  --heop-breakpoint-2xl: 1536px;
  --heop-breakpoint-3xl: 1920px;
  --heop-breakpoint-4xl: 2560px;
  --heop-breakpoint-5xl: 3840px;
}

@media (min-width: 480px) {
  :root {
    --heop-current-breakpoint: sm;
  }
}

@media (min-width: 768px) {
  :root {
    --heop-current-breakpoint: md;
  }
}

@media (min-width: 1024px) {
  :root {
    --heop-current-breakpoint: lg;
  }
}

@media (min-width: 1280px) {
  :root {
    --heop-current-breakpoint: xl;
  }
}

@media (min-width: 1536px) {
  :root {
    --heop-current-breakpoint: 2xl;
  }
}

@media (min-width: 1920px) {
  :root {
    --heop-current-breakpoint: 3xl;
  }
}

@media (min-width: 2560px) {
  :root {
    --heop-current-breakpoint: 4xl;
  }
}

@media (min-width: 3840px) {
  :root {
    --heop-current-breakpoint: 5xl;
  }
}

@media (orientation: portrait) {
  :root {
    --heop-orientation: portrait;
  }
}

@media (orientation: landscape) {
  :root {
    --heop-orientation: landscape;
  }
}

@media (hover: hover) {
  :root {
    --heop-hover-capable: 1;
  }
}

@media (pointer: coarse) {
  :root {
    --heop-coarse-pointer: 1;
  }
}

@media (max-height: 700px) {
  :root {
    --heop-height-compact: 1;
  }
}

@media (max-height: 500px) {
  :root {
    --heop-height-cramped: 1;
  }
}