$base-font-size: 17;

$fw-light: 300; $fw-regular: 400; $fw-medium: 500; $fw-bold: 700; $fw-black: 900;

@mixin antialiasing($type:antialiased) {

/* antialiased, none, subpixel-antialiased*/
@if $type == antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} @else if $type == none {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
} @else {
  -moz-osx-font-smoothing: auto;
}

}

@mixin rubik {

font-family: "Rubik", sans-serif;

}

@mixin noto-sans-tc {

font-family: "Noto Sans TC", sans-serif;

}

@mixin font-size-to-rem($number) {

font-size: ($number * 1rem) / $base-font-size;

}

@mixin line-height-to-rem($number) {

line-height: $number * 1rem / $base-font-size;

}

@mixin h1 {

color: $slate;
font-weight: $fw-medium;
margin: 1.75rem 0 0;
@include font-size-to-rem(33);
@include line-height-to-rem(44);
&.title {
  line-height: normal;
  font-weight: $fw-light;
}
@media screen and (min-width: 40rem) {
  @include font-size-to-rem(62);
  line-height: normal;
  letter-spacing: -0.3px;
  &.title {
    @include font-size-to-rem(50);
    letter-spacing: 0;
  }
}

}

@mixin h2 {

color: $slate;
font-weight: $fw-medium;
margin: 1.25rem 0 0.875rem;
@include font-size-to-rem(40);
line-height: normal;

}

@mixin h3 {

color: $slate;
font-weight: $fw-medium;
margin: 1.25rem 0 0.875rem;
@include font-size-to-rem(30);
@include line-height-to-rem(42);

}

@mixin h4 {

font-weight: $fw-regular;
margin: 1.25rem 0 0.875rem;
@include font-size-to-rem(24);
@include line-height-to-rem(34);

}

@mixin h5 {

margin: 1rem 0 0.875rem;
font-weight: $fw-medium;
@include font-size-to-rem(20);
@include line-height-to-rem(27);

}

@mixin display-1 {

@include font-size-to-rem(33);
@include line-height-to-rem(39);
font-weight: $fw-light;
letter-spacing: 0;

@media screen and (min-width: $mq-medium) {
  @include font-size-to-rem(72);
  @include line-height-to-rem(80.2);
  letter-spacing: -0.12rem;
}

}

@mixin title-5 {

@include font-size-to-rem(20);
@include line-height-to-rem(27);
font-weight: $fw-medium;
&.zh-TW {
  @include line-height-to-rem(30);
  @include antialiasing;
  font-weight: $fw-bold;
  letter-spacing: 0.12rem;
}

}

@mixin body-short {

font-size: 1rem;
font-weight: $fw-regular;
@include line-height-to-rem(24);
&.zh-TW {
  @include font-size-to-rem(18);
  @include line-height-to-rem(30);
  letter-spacing: 0.06rem;
}

}

@mixin small-text {

@include font-size-to-rem(14);
@include line-height-to-rem(18);
font-weight: $fw-regular;

}

@mixin big-description {

@include font-size-to-rem(20);
@include line-height-to-rem(29);
font-weight: $fw-regular;

&.sfgov-translate-lang-zh-TW {
  @include line-height-to-rem(36);
  letter-spacing: 0.12rem;
}

@media screen and (min-width: $mq-medium) {
  @include font-size-to-rem(24);
  @include line-height-to-rem(36);

  &.sfgov-translate-lang-zh-TW {
    @include font-size-to-rem(26);
    @include line-height-to-rem(42);
    letter-spacing: 0.12rem;
  }
}

}