// (C)opyright 2020-11-17 Dirk Holtwick, holtwick.it. All rights reserved.

@require "windy/utils.styl"

// Media

-sm = '(min-width: 640px)'
-md = '(min-width: 768px)'
-lg = '(min-width: 1024px)'
-xl = '(min-width: 1280px)'
-2xl = '(min-width: 1536px)'

-dark = '(prefers-color-scheme: dark)'

// Stacked Layout

$stack
  display flex
  > *
    flex none

hstack()
  @extend $stack
  flex-direction row

vstack()
  @extend $stack
  flex-direction column

stack-x = hstack
stack-y = vstack

center()
  display flex
  align-items center
  justify-content center

vscroll()
  // https://css-tricks.com/popping-hidden-overflow/
  // -webkit-overflow-scrolling: touch !important;
  // !important is required to override -fix overflow:hidden
  position static !important
  overflow auto !important
  overflow-x hidden !important
  overflow-y auto !important

  // This should speed up rendering quite a bit:
  // https://twitter.com/simurai/status/1219504338764091393
  // https://developer.mozilla.org/en-US/docs/Web/CSS/contain
  contain content

grow()
  flex auto
  overflow hidden

stack-item-center = center
stack-item-scroll = vscroll
stack-item-grow = grow

container()
  margin-x 32
  @media lg
    margin-left auto
    margin-right auto
    max-width 960px