/* Typography reusable classes -------- */

// Display styles
.sd-display {
    &-xlarge {
        @include sd-display-xlarge;
    }
    &-large {
        @include sd-display-large;
    }
    &-medium {
        @include sd-display-medium;
    }
    &-small {
        @include sd-display-small;
    }
}

// Title styles
.sd-title {
    &-xlarge {
        @include sd-title-xlarge;
    }
    &-large {
        @include sd-title-large;
    }
    &-medium {
        @include sd-title-medium;
    }
    &-small {
        @include sd-title-small;
    }
    &-xsmall {
        @include sd-title-xsmall;
    }
}

// Base styles
.sd-base {
    &-xlarge {
        @include sd-base-xlarge;
        &-bold {
            @include sd-base-xlarge-bold;
        }
    }
    &-large {
        @include sd-base-large;
        &-bold {
            @include sd-base-large-bold;
        }
    }
    &-medium {
        @include sd-base-medium;
        &-bold {
            @include sd-base-medium-bold;
        }
    }
    &-small {
        @include sd-base-small;
        &-bold {
            @include sd-base-small-bold;
        }
    }
    &-xsmall {
        @include sd-base-xsmall;
        &-bold {
            @include sd-base-xsmall-bold;
        }
    }
}

// Eyebrow styles
.sd-eyebrow {
    &-large {
        @include sd-eyebrow-large;
    }
    &-medium {
        @include sd-eyebrow-medium;
    }
    &-small {
        @include sd-eyebrow-small;
    }
}