// breakpoint
// sass can't access css variables in :root
$bp-xs: 320px;
$bp-sm: 375px;
$bp-md: 768px;
$bp-lg: 1080px;
$bp-xl: 1280px;
$bp-xxl: 1440px;

// <= 320
@mixin for-mobile-s {
  @media screen and (max-width: $bp-xs) {
    @content;
  }
}

// <= 375
@mixin for-mobile-m {
  @media screen and (max-width: $bp-sm) {
    @content;
  }
}

// 375 ~ 768
@mixin for-mobile-l {
  @media screen and (min-width: $bp-sm) and (width <= calc($bp-md - 1px)) {
    @content;
  }
}

// <= 768
@mixin for-mobile {
  @media (width <= calc($bp-md - 1px)) {
    @content;
  }
}

// <= 1080
@mixin for-mobile-pad {
  @media screen and (width <= calc($bp-lg - 1px)) {
    @content;
  }
}

// 768 ~ 1080
@mixin for-pad {
  @media screen and (min-width: $bp-md) and (width <= calc($bp-lg - 1px)) {
    @content;
  }
}

// >= 768
@mixin for-pad-desktop {
  @media screen and (min-width: $bp-md) {
    @content;
  }
}

// 1080 ~ 1280
@mixin for-desktop-s {
  @media screen and (min-width: $bp-lg) and (max-width: $bp-xl) {
    @content;
  }
}

// 1280 ~ 1440
@mixin for-desktop-m {
  @media screen and (min-width: $bp-xl) and (max-width: $bp-xxl) {
    @content;
  }
}

// >= 1440
@mixin for-desktop-l {
  @media screen and (min-width: $bp-xxl) {
    @content;
  }
}

// >= 1080
@mixin for-desktop {
  @media screen and (min-width: $bp-lg) {
    @content;
  }
}

// font
@mixin font-header1 {
  font-family: Poppins, sans-serif;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
}

@mixin font-header2 {
  font-family: Poppins, sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

@mixin font-header3 {
  font-family: Poppins, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

@mixin font-subheader1 {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

@mixin font-subheader1-bold {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

@mixin font-subheader2 {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

@mixin font-body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

@mixin font-body-bold {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}

@mixin font-label {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

@mixin font-label-bold {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}

@mixin font-footnote {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
