///
/// Heading size mixins
///

@use "../../settings";
@use "../functions";
@use "../media-query";
@use "../spacing";

@mixin ds_h1-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$h1-size);
    line-height: functions.line-height-on-grid(settings.$h1-size, 1.3, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$h1-size--medium);
        line-height: functions.line-height-on-grid(settings.$h1-size--medium, 1.3, $grid: $type-grid);
    }
}

@mixin ds_h2-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$h2-size);
    line-height: functions.line-height-on-grid(settings.$h2-size, 1.3, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$h2-size--medium);
        line-height: functions.line-height-on-grid(settings.$h2-size--medium, 1.3, $grid: $type-grid);
    }
}

@mixin ds_h3-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$h3-size);
    line-height: functions.line-height-on-grid(settings.$h3-size, 1.3, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$h3-size--medium);
        line-height: functions.line-height-on-grid(settings.$h3-size--medium, $grid: $type-grid);
    }
}

@mixin ds_h4-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$h4-size);
    line-height: functions.line-height-on-grid(settings.$h4-size, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$h4-size--medium);
        line-height: functions.line-height-on-grid(settings.$h4-size--medium, $grid: $type-grid);
    }
}

@mixin ds_h5-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$h5-size);
    line-height: functions.line-height-on-grid(settings.$h5-size, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$h5-size--medium);
        line-height: functions.line-height-on-grid(settings.$h5-size--medium, $grid: $type-grid);
    }
}

@mixin ds_tiny-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$tiny-size);
    line-height: functions.line-height-on-grid(settings.$tiny-size, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$tiny-size--medium);
        line-height: functions.line-height-on-grid(settings.$tiny-size--medium, $grid: $type-grid);
    }
}

@mixin ds_small-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$small-size);
    line-height: functions.line-height-on-grid(settings.$small-size, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$small-size--medium);
        line-height: functions.line-height-on-grid(settings.$small-size--medium, $grid: $type-grid);
    }
}

@mixin ds_small-size--fixed($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$small-size--fixed);
    line-height: functions.line-height-on-grid(settings.$small-size--fixed, $grid: $type-grid);
}

@mixin ds_large-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$large-size);
    line-height: functions.line-height-on-grid(settings.$large-size, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$large-size--medium);
        line-height: functions.line-height-on-grid(settings.$large-size--medium, $grid: $type-grid);
    }
}

@mixin ds_root-size($type-grid: 8px) {
    font-size: functions.px-to-rem(settings.$root-font-size);
    line-height: functions.line-height-on-grid(settings.$root-font-size, $grid: $type-grid);

    @include media-query.ds_media-query(medium) {
        font-size: functions.px-to-rem(settings.$root-font-size--medium);
        line-height: functions.line-height-on-grid(settings.$root-font-size--medium, $grid: $type-grid);
    }
}

@mixin ds_root-size--fixed($type-grid: 8px) {
    font-size: px-to-rem($root-font-size--fixed);
    line-height: line-height-on-grid($root-font-size--fixed, $grid: $type-grid);
}


///
/// Heading style mixins
///
@mixin ds_h1-style {
    font-weight: settings.$bold;
    @include ds_h1-size;
    @include spacing.ds_responsive-margin(4, bottom);
}

@mixin ds_h2-style {
    font-weight: settings.$bold;
    @include ds_h2-size;
    @include spacing.ds_responsive-margin(2, bottom);
}

@mixin ds_h3-style {
    font-weight: settings.$bold;
    @include ds_h3-size;
    @include spacing.ds_responsive-margin(2, bottom);
}

@mixin ds_h4-style {
    font-weight: settings.$bold;
    @include ds_h4-size;
    @include spacing.ds_responsive-margin(2, bottom);
}

@mixin ds_h5-style {
    font-weight: settings.$bold;
    @include ds_h5-size;
    @include spacing.ds_responsive-margin(1, bottom);
}




/// legacy non-prefixed names
/// DEPRECATED - use prefixed mixins instead
@mixin h1-size {
    @include ds_h1-size;
}

@mixin h2-size {
    @include ds_h2-size;
}

@mixin h3-size {
    @include ds_h3-size;
}

@mixin h4-size {
    @include ds_h4-size;
}

@mixin h5-size {
    @include ds_h5-size;
}

@mixin tiny-size {
    @include ds_tiny-size;
}

@mixin small-size {
    @include ds_small-size;
}

@mixin large-size {
    @include ds_large-size;
}