@use 'functions' as *;

@mixin size-font($ms, $ds) {
    font-size: mobile-vw($ms);

    &.vh {
        font-size: mobile-vh($ms);
    }

    @include desktop {
        font-size: desktop-vw($ds);

        &.vh {
            font-size: desktop-vh($ds);
        }
    }
}

// Super
@mixin s1 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(240px, 240px);
}
@mixin s2 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(50px, 160px);
}
@mixin s3 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(60px, 140px);
}
@mixin s4 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.046em;
    @include size-font(115px, 115px);
}

// Header
@mixin h1 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(46px, 85px);
}
@mixin h2 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(32px, 60px);
}
@mixin h3 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(32px, 40px);
}
@mixin h4 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(18px, 30px);
}
@mixin h5 {
    font-family: var(--font-druk);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(18px, 20px);
}
@mixin h6 {
    font-family: var(--font-druk);
    font-weight: 700;
    line-height: 1.1;
    text-transform: none;
    letter-spacing: -0.01em;
    @include size-font(18px, 18px);
}

// Emphasis
@mixin em1 {
    font-family: var(--font-gt);
    font-weight: 400;
    font-style: italic;
    line-height: 0.8;
    letter-spacing: -0.06em;
    text-transform: none;
    @include size-font(48px, 80px);
}
@mixin em2 {
    font-family: var(--font-gt);
    font-weight: 400;
    font-style: italic;
    line-height: 0.96;
    letter-spacing: -0.01em;
    text-transform: none;
    @include size-font(36px, 61px);
}
@mixin em3 {
    font-family: var(--font-gt);
    font-weight: 400;
    font-style: italic;
    line-height: 0.8;
    text-transform: none;
    @include size-font(22px, 41px);
}

// Quote
@mixin q1 {
    font-family: var(--font-gt);
    font-weight: 400;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
    @include size-font(22px, 35px);
}

// Paragraph
@mixin p-l {
    font-family: var(--font-arial);
    font-weight: 700;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    @include size-font(32px, 45px);
}
@mixin p {
    font-family: var(--font-arial);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    @include size-font(16px, 21px);
}
@mixin p-s {
    font-family: var(--font-arial);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    @include size-font(14px, 18px);
}
@mixin p-xs {
    font-family: var(--font-arial);
    font-weight: 700;
    line-height: 0.94;
    text-transform: uppercase;
    @include size-font(14px, 16px);
}
@mixin p-xxs {
    font-family: var(--font-arial);
    font-weight: 700;
    line-height: 0.94;
    text-transform: uppercase;
    @include size-font(12px, 14px);
}