@import '@atomic-ui/gdl-tokens/dist/tokens.scss'

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

=between($min-device, $max-device)
  @media screen and (min-width: $min-device) and (max-width: $max-device - 1px)
    @content

=mobile
  @media screen and (max-width: $group-breakpoint-tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $group-breakpoint-tablet), print
    @content

=tablet-only
  @media screen and (min-width: $group-breakpoint-tablet) and (max-width: $group-breakpoint-desktop - 1px)
    @content

=touch
  @media screen and (max-width: $group-breakpoint-desktop - 1px)
    @content

=desktop
  @media screen and (min-width: $group-breakpoint-desktop)
    @content

=desktop-only
  @media screen and (min-width: $group-breakpoint-desktop) and (max-width: $group-breakpoint-high-definition - 1px)
    @content

=high-definition
  @media screen and (min-width: $group-breakpoint-high-definition)
    @content

=high-definition-only
  @media screen and (min-width: $group-breakpoint-high-definition) and (max-width: $group-breakpoint-widescreen - 1px)
    @content

=until-high-definition
  @media screen and (max-width: $group-breakpoint-high-definition - 1px)
    @content

=until-widescreen
  @media screen and (max-width: $group-breakpoint-widescreen - 1px)
    @content

=widescreen
  @media screen and (min-width: $group-breakpoint-widescreen)
    @content

=widescreen-only
  @media screen and (min-width: $group-breakpoint-widescreen) and (max-width: $group-breakpoint-fullhd - 1px)
    @content

=until-fullhd
  @media screen and (max-width: $group-breakpoint-fullhd - 1px)
    @content

=fullhd
  @media screen and (min-width: $group-breakpoint-fullhd)
    @content