// media queries
=xfhd
  @media only screen and (max-width: "2240px")
    @content
=fhd
  @media only screen and (max-width: "1920px")
    @content
=w
  @media only screen and (max-width: "1419px")
    @content
=x
  @media only screen and (max-width: "1339px")
    @content
=d
  @media only screen and (max-width: "1159px")
    @content
=t
  @media only screen and (max-width: "1023px")
    @content
=m
  @media only screen and (max-width: "767px")
    @content
=a
  @media only screen and (max-width: "639px")
    @content
=s
  @media only screen and (max-width: "474px")
    @content

// fonts
=poppins
  font-family: 'Poppins', sans-serif

=sf-pro-display
  font-family: 'SFProDisplay-Bold'

//mixin to simplify new font definitions
=font-face($family, $path, $svg, $weight: normal, $style: normal)
  @font-face
    font-family: $family
    src: url('#{$path}.eot')
    src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff2') format('woff2'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')
    font-weight: $weight
    font-style: $style

+font-face('FontAwesome', '../fonts/fa-regular-400', 'fa-regular-400')

+font-face('FontAwesomeBrands', '../fonts/fa-brands-400', 'fa-brands-400')

+font-face('FontAwesomeSolid', '../fonts/fa-solid-900', 'fa-solid-900')
  
// colors
$white: #ffffff
$red: #FF592C
$purple: #9757D7
$purple-light: #CDB4DB
$pink: #EF466F
$green: #45B26B
$blue: #3772FF
$asphalt: #E4D7CF
$yellow: #FFD166

$neutrals1: #141416
$neutrals1b: #1E2027
$neutrals2: #23262F
$neutrals3: #353945
$neutrals4: #777E90
$neutrals5: #B1B5C3
$neutrals6: #E6E8EC
$neutrals7: #F4F5F6
$neutrals8: #FCFCFD

$error: #9f3a38
$errorbg: #FFF6F6

// typography
=form-header
  +sf-pro-display
  font-size: 46px
  line-height: 64px
  letter-spacing: -.02em
  font-weight: 700
  +m
    font-size: 36px
    line-height: 36px

=body-1
  font-size: 24px
  line-height: (32/24)
  letter-spacing: -.01em

=body-2
  font-size: 24px
  line-height: (32/24)
  font-weight: 600

=form-error
  font-size: 16px
  line-height: 24px
  font-weight: 400
  color: $pink
  border: 2px solid $pink
  background: none
  display: flex
  flex-wrap: wrap
  text-align: left
  align-items: center
  border-radius: 12px
  padding: 8px 14px
  min-height: 48px
  width: 100%

=dropdown-label
  font-size: 16px
  line-height: 24px
  font-weight: 600

=input-label
  font-size: 16px
  line-height: 24px
  font-weight: 700
  margin-bottom: 15px

=footnote
  font-size: 16px
  line-height: 24px
  font-weight: 500
  color: $neutrals4

=footlink
  font-size: 16px
  line-height: 24px
  font-weight: 700
  color: $neutrals4
  text-decoration: underline

=caption-1
  font-size: 14px
  line-height: (24/14)

=caption-2
  font-size: 12px
  line-height: (20/12)

=hairline-1
  line-height: 1
  font-weight: 700
  text-transform: uppercase

=hairline-2
  font-size: 12px
  line-height: 1
  font-weight: 700
  text-transform: uppercase

=label
  +poppins
  border-radius: 4px
  padding: 5px 8px
  width: auto
  min-width: 0
  font-size: 12px
  line-height: 1
  font-weight: 700
  text-transform: uppercase

=button-1
  +sf-pro-display
  font-size: 16px
  font-weight: 700
  line-height: 1
  text-decoration: none

=button-2
  +sf-pro-display
  font-size: 14px
  line-height: (16/14)
  font-weight: 700
  text-decoration: none

=compact-header-button
  +poppins
  font-size: 16px
  line-height: 1.5
  font-weight: 500
  text-decoration: none
  
//triangle
=arr($width, $height, $bg, $direction)
  width: 0px
  height: 0px
  border-style: solid
  @if $direction == t
    border-width: 0 $width / 2 + px $height + px $width / 2 + px
    border-color: transparent transparent $bg transparent
  @if $direction == r
    border-width: $height / 2 + px 0 $height / 2 + px $width + px
    border-color: transparent transparent transparent $bg
  @if $direction == b
    border-width: $height + px $width / 2 + px 0 $width / 2 + px
    border-color: $bg transparent transparent transparent
  @if $direction == l
    border-width: $height / 2 + px $width + px $height / 2 + px 0
    border-color: transparent $bg transparent transparent
  @if $direction == tl
    border-width: $height + px $width + px 0 0
    border-color: $bg transparent transparent transparent
  @if $direction == tr
    border-width: 0 $width + px $height + px 0
    border-color: transparent $bg transparent transparent
  @if $direction == br
    border-width: 0 0 $height + px $width + px
    border-color: transparent transparent $bg transparent
  @if $direction == bl
    border-width: $width + px 0 0 $height + px
    border-color: transparent transparent transparent $bg
// example
// +arr(500,50, #000, l)
// +arr(500,50, #000, bl)

// placeholder
=placeholder
  &::placeholder
    @content

// media query width
=r($width)
  @media only screen and (max-width: $width+ "px")
    @content

=rmin($width)
  @media only screen and (min-width: $width+ "px")
    @content

// theme
=dark
  @at-root :global(.dark-mode) &
    @content

=dark-body
  @at-root .dark-mode
    @content

=dark-common
  @at-root .dark-mode &
    @content

  // misc
=simple-center
  display: grid
  align-content: center
  justify-content: center