from(num)
  condition = 'screen and (min-width: %s)' % num
  @media condition
    {block}

to(num)
  condition = 'screen and (max-width: %s)' % ((num - 1))
  @media condition
    {block}

// DEPRECATED
mobile()
  +to($UI.media.mobile)
    {block}

tablet()
  +from($UI.media.tablet)
    {block}

desktop()
  +from($UI.media.desktop)
    {block}

wide()
  +from($UI.media.wide)
    {block}

between(num1, num2)
  condition = 'screen and (min-width: %s) and (max-width: %s)' % (num1 (num2 - 1))
  @media condition
    {block}

betweenHeight(num1, num2)
  condition = 'screen and (min-height: %s) and (max-height: %s)' % (num1 (num2 - 1))
  @media condition
    {block}

portrait()
  @media (orientation: portrait)
    {block}

landscape()
  @media (orientation: landscape)
    {block}

web()
  if __WEB__ is defined
    {block}

android()
  if __ANDROID__ is defined
    {block}

ios()
  if __IOS__ is defined
    {block}

windows()
  if __WINDOWS__ is defined
    {block}

macos()
  if __MACOS__ is defined
    {block}

native()
  unless __WEB__ is defined
    {block}

bleed(left = 2u, right = left)
  padding-left left
  padding-right right
  margin-left (- left)
  margin-right (- right)

radius(key = m)
  border-radius $UI.borderRadius[key]