/* Typography mixins -------- */

// Display styles
// Display XLarge: Numeric and single word callouts.
@mixin sd-display-xlarge {
    font-size: rem(120);
    font-weight: $sd-font-weight-bold;
    line-height: rem(120);
}
// Display Large/Medium: Header display text.
@mixin sd-display-large {
    font-size: rem(96);
    font-weight: $sd-font-weight-bold;
    line-height: rem(96);
}
@mixin sd-display-medium {
    font-size: rem(80);
    font-weight: $sd-font-weight-bold;
    line-height: rem(88);
}
// Display Small: Header display text. Secondary hierarchy.
@mixin sd-display-small {
    font-size: rem(64);
    font-weight: $sd-font-weight-bold;
    line-height: rem(72);
}

// Title styles
@mixin sd-title-xlarge {
    font-size: rem(48);
    font-weight: $sd-font-weight-bold;
    line-height: rem(56);
}
@mixin sd-title-large {
    font-size: $sd-title-large-text; // 36
    font-weight: $sd-font-weight-bold;
    line-height: rem(40);
}
@mixin sd-title-medium {
    font-size: $sd-x-large-text; // 28
    font-weight: $sd-font-weight-bold;
    line-height: rem(32);
}
@mixin sd-title-small {
    font-size: $sd-large-text; // 24
    font-weight: $sd-font-weight-bold;
    line-height: rem(32);
}
@mixin sd-title-xsmall {
    font-size: $sd-medium-text; // 18
    font-weight: $sd-font-weight-bold;
    line-height: rem(24);
}

// Base styles
@mixin sd-base-xlarge {
    font-size: $sd-jumbo-text; // 32
    font-weight: $sd-font-weight-regular;
    line-height: rem(40);
}
@mixin sd-base-large {
    font-size: $sd-large-text; // 24
    font-weight: $sd-font-weight-regular;
    line-height: rem(32);
}
@mixin sd-base-medium {
    font-size: $sd-base-text; // 16
    font-weight: $sd-font-weight-regular;
    line-height: rem(24);
}
@mixin sd-base-small {
    font-size: $sd-x-small-text; // 14
    font-weight: $sd-font-weight-regular;
    line-height: rem(20);
}
@mixin sd-base-xsmall {
    font-size: $sd-mini-text; // 12
    font-weight: $sd-font-weight-regular;
    line-height: rem(16);
}

// Bold Base styles
@mixin sd-base-xlarge-bold {
    font-size: $sd-jumbo-text; // 32
    font-weight: $sd-font-weight-bold;
    line-height: rem(40);
}
@mixin sd-base-large-bold {
    font-size: $sd-large-text; // 24
    font-weight: $sd-font-weight-bold;
    line-height: rem(32);
}
@mixin sd-base-medium-bold {
    font-size: $sd-base-text; // 16
    font-weight: $sd-font-weight-bold;
    line-height: rem(24);
}
@mixin sd-base-small-bold {
    font-size: $sd-x-small-text; // 14
    font-weight: $sd-font-weight-bold;
    line-height: rem(20);
}
@mixin sd-base-xsmall-bold {
    font-size: $sd-mini-text; // 12
    font-weight: $sd-font-weight-bold;
    line-height: rem(16);
}

// Eyebrow styles
@mixin sd-eyebrow-base {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: $sd-font-weight-bold;
}
@mixin sd-eyebrow-large {
    @include sd-eyebrow-base;
    font-size: $sd-base-text; // 16
    line-height: rem(20);
}
@mixin sd-eyebrow-medium {
    @include sd-eyebrow-base;
    font-size: $sd-mini-text; // 12
    line-height: rem(16);
}
@mixin sd-eyebrow-small {
    @include sd-eyebrow-base;
    font-size: rem(10); // 10
    line-height: rem(16);
}