@use 'variables' as *;

@mixin display-x-large {
  font-family: $font-family-heading;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin display-large {
  font-family: $font-family-heading;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin display-medium {
  font-family: $font-family-heading;
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin display-small {
  font-family: $font-family-heading;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin headline-large {
  font-family: $font-family-heading;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin headline-medium {
  font-family: $font-family-heading;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin headline-small {
  font-family: $font-family-heading;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin title-medium {
  font-family: $font-family-heading;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin title-small {
  font-family: $font-family-heading;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

@mixin label-large {
  font-family: $font-family-body;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}

@mixin label-medium {
  font-family: $font-family-body;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
}

@mixin label-small {
  font-family: $font-family-body;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

@mixin alt-label-large {
  color: $sodra-black-75;
  font-family: $font-family-body;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}

@mixin alt-label-medium {
  color: $sodra-black-75;
  font-family: $font-family-body;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}

@mixin alt-label-small {
  color: $sodra-black-75;
  font-family: $font-family-body;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}

@mixin body-large {
  font-family: $font-family-body;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: $sodra-black-75;
}

@mixin body-medium {
  font-family: $font-family-body;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: $sodra-black-75;
}

@mixin body-small {
  font-family: $font-family-body;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: $sodra-black-75;
}

@mixin alt-body-large {
  font-family: $font-family-heading;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
  color: $sodra-black-75;
}

@mixin alt-body-medium {
  font-family: $font-family-heading;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
  color: $sodra-black-75;
}

@mixin alt-body-small {
  font-family: $font-family-heading;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: $sodra-black-75;
}

@mixin alt-body-x-small {
  font-family: $font-family-heading;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: $sodra-black-75;
}

@mixin responsive-typography($infix: '') {
  #{$typography-prefix}#{$infix}display-x-large {
    @include display-x-large();
  }

  #{$typography-prefix}#{$infix}display-large {
    @include display-large();
  }

  #{$typography-prefix}#{$infix}display-medium {
    @include display-medium();
  }

  #{$typography-prefix}#{$infix}display-small {
    @include display-small();
  }

  #{$typography-prefix}#{$infix}headline-large {
    @include headline-large();
  }

  #{$typography-prefix}#{$infix}headline-medium {
    @include headline-medium();
  }

  #{$typography-prefix}#{$infix}headline-small {
    @include headline-small();
  }

  #{$typography-prefix}#{$infix}title-medium {
    @include title-medium();
  }

  #{$typography-prefix}#{$infix}title-small {
    @include title-small();
  }

  #{$typography-prefix}#{$infix}label-large {
    @include label-large();
  }

  #{$typography-prefix}#{$infix}label-medium {
    @include label-medium();
  }

  #{$typography-prefix}#{$infix}label-small {
    @include label-small();
  }

  #{$typography-prefix}#{$infix}alt-label-large {
    @include alt-label-large();
  }

  #{$typography-prefix}#{$infix}alt-label-medium {
    @include alt-label-medium();
  }

  #{$typography-prefix}#{$infix}alt-label-small {
    @include alt-label-small();
  }

  #{$typography-prefix}#{$infix}body-large {
    @include body-large();
  }

  #{$typography-prefix}#{$infix}body-medium {
    @include body-medium();
  }

  #{$typography-prefix}#{$infix}body-small {
    @include body-small();
  }

  #{$typography-prefix}#{$infix}alt-body-large {
    @include alt-body-large();
  }

  #{$typography-prefix}#{$infix}alt-body-medium {
    @include alt-body-medium();
  }

  #{$typography-prefix}#{$infix}alt-body-small {
    @include alt-body-small();
  }

  #{$typography-prefix}#{$infix}alt-body-x-small {
    @include alt-body-x-small();
  }
}