///
/// Mixins for consistent sizing and styling of headings and text elements
/// 

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

/// Set consistent sizing for heading 1
/// @param {number} $type-grid - The grid size for the heading to conform to (default: 8px)
/// @output Font size and line height for heading 1 at different breakpoints
@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);
    }
}

/// Set consistent sizing for heading 2
/// @param {number} $type-grid - The grid size for the heading to conform to (default: 8px)
/// @output Font size and line height for heading 2 at different breakpoints
@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);
    }
}

/// Set consistent sizing for heading 3
/// @param {number} $type-grid - The grid size for the heading to conform to (default: 8px)
/// @output Font size and line height for heading 3 at different breakpoints
@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);
    }
}

/// Set consistent sizing for heading 4
/// @param {number} $type-grid - The grid size for the heading to conform to (default: 8px)
/// @output Font size and line height for heading 4 at different breakpoints
@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);
    }
}

/// Set consistent sizing for heading 5
/// @param {number} $type-grid - The grid size for the heading to conform to (default: 8px)
/// @output Font size and line height for heading 5 at different breakpoints
@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);
    }
}

/// Set consistent sizing for tiny text
/// @param {number} $type-grid - The grid size for the text to conform to (default: 8px)
/// @output Font size and line height for tiny text at different breakpoints
@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);
    }
}

/// Set consistent sizing for small text
/// @param {number} $type-grid - The grid size for the text to conform to (default: 8px)
/// @output Font size and line height for small text at different breakpoints
@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);
    }
}

/// Set consistent sizing for small text that remains the same at all breakpoints
/// @param {number} $type-grid - The grid size for the text to conform to
/// @output Font size and line height for small text that remains the same at all breakpoints
@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);
}

/// Set consistent sizing for large text
/// @param {number} $type-grid - The grid size for the text to conform to (default: 8px)
/// @output Font size and line height for large text at different breakpoints
@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);
    }
}

/// Set consistent sizing for body text
/// @param {number} $type-grid - The grid size for the text to conform to (default: 8px)
/// @output Font size and line height for body text at different breakpoints
@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);
    }
}

/// Set consistent sizing for body text that remains the same at all breakpoints
/// @param {number} $type-grid - The grid size for the text to conform to (default: 8px)
/// @output Font size and line height for body text that remains the same at all breakpoints
@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);
}

/// Set consistent styling for heading 1
/// @output Font weight, size, line height, and margin for heading 1
@mixin ds_h1-style {
    font-weight: settings.$bold;
    @include ds_h1-size;
    @include spacing.ds_responsive-margin(4, bottom);
}

/// Set consistent styling for heading 2
/// @output Font weight, size, line height, and margin for heading 2
@mixin ds_h2-style {
    font-weight: settings.$bold;
    @include ds_h2-size;
    @include spacing.ds_responsive-margin(2, bottom);
}

/// Set consistent styling for heading 3
/// @output Font weight, size, line height, and margin for heading 3
@mixin ds_h3-style {
    font-weight: settings.$bold;
    @include ds_h3-size;
    @include spacing.ds_responsive-margin(2, bottom);
}

/// Set consistent styling for heading 4
/// @output Font weight, size, line height, and margin for heading 4
@mixin ds_h4-style {
    font-weight: settings.$bold;
    @include ds_h4-size;
    @include spacing.ds_responsive-margin(2, bottom);
}

/// Set consistent styling for heading 5
/// @output Font weight, size, line height, and margin for heading 5
@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 mixin instead
@mixin h1-size {
    @include ds_h1-size;
}

/// @deprecated - use prefixed mixin instead
@mixin h2-size {
    @include ds_h2-size;
}

/// @deprecated - use prefixed mixin instead
@mixin h3-size {
    @include ds_h3-size;
}

/// @deprecated - use prefixed mixin instead
@mixin h4-size {
    @include ds_h4-size;
}

/// @deprecated - use prefixed mixin instead
@mixin h5-size {
    @include ds_h5-size;
}

/// @deprecated - use prefixed mixin instead
@mixin tiny-size {
    @include ds_tiny-size;
}

/// @deprecated - use prefixed mixin instead
@mixin small-size {
    @include ds_small-size;
}

/// @deprecated - use prefixed mixin instead
@mixin large-size {
    @include ds_large-size;
}