@use "sass:meta" as meta;
@use "../variables" as vars;
@use "../functions" as func;
@use "breakpoints" as breakpoints;

// ----------------------------------------
// responsive-style
// ----------------------------------------
// Sets styles within breakpoints
// ----------------------------------------
@mixin responsive-style($map, $style) {
    @if meta.type-of($map) == 'map' {
        @each $breakpoint, $value in $map {
            @if $breakpoint == "default" {
                @if $style == line-height {
                    & {
                        #{$style}: $value;
                    }
                }

                @else if $style == font-size {
                    #{$style}: func.font-size($value);
                }

                @else {
                    #{$style}: $value;
                }
            }

            @else {
                @include breakpoints.media-breakpoint-up($breakpoint) {
                    @if $style == line-height {
                        #{$style}: $value;
                    }

                    @else if $style == font-size {
                        #{$style}: func.font-size($value);
                    }

                    @else {
                        #{$style}: $value;
                    }
                }
            }
        }
    }

    @else {
        @if $style == line-height {
            #{$style}: $map;
        }

        @else if $style == font-size {
            #{$style}: func.font-size($map);
        }

        @else {
            #{$style}: $map;
        }
    }
}

@mixin h1 {
    letter-spacing: normal;
    font-weight: func.font-weight("bold");
    color: func.color('black');
    text-transform: none;
    word-break: break-word;
    @include responsive-style(vars.$typography-h1-font-size, font-size);
    @include responsive-style(vars.$typography-h1-line-height, line-height);
}

@mixin h2 {
    letter-spacing: normal;
    font-weight: func.font-weight("semibold");
    color: func.color('black');
    text-transform: none;
    @include responsive-style(vars.$typography-h2-font-size, font-size);
    @include responsive-style(vars.$typography-h2-line-height, line-height);
}

@mixin h3 {
    letter-spacing: normal;
    font-weight: func.font-weight("semibold");
    color: func.color('black');
    text-transform: none;
    @include responsive-style(vars.$typography-h3-font-size, font-size);
    @include responsive-style(vars.$typography-h3-line-height, line-height);
}

@mixin h4 {
    letter-spacing: normal;
    font-weight: func.font-weight("semibold");
    color: func.color('black');
    text-transform: none;
    @include responsive-style(vars.$typography-h4-font-size, font-size);
    @include responsive-style(vars.$typography-h4-line-height, line-height);
}

@mixin h5 {
    letter-spacing: normal;
    font-weight: func.font-weight("semibold");
    color: func.color('black');
    text-transform: none;
    @include responsive-style(vars.$typography-h5-font-size, font-size);
    @include responsive-style(vars.$typography-h5-line-height, line-height);
}

@mixin h6 {
    letter-spacing: normal;
    font-weight: func.font-weight("medium");
    color: func.color('black');
    @include responsive-style(vars.$typography-h6-font-size, font-size);
    @include responsive-style(vars.$typography-h6-line-height, line-height);
}

@mixin body-copy-text {
    font-size: func.font-size(vars.$typography-body-text-font-size);
    line-height: func.units(vars.$typography-body-text-line-height, 'rem');
    font-weight: func.font-weight(vars.$typography-body-text-font-weight);
    color: func.color(vars.$typography-body-text-color);
    text-transform: none;
    letter-spacing: vars.$typography-body-text-letter-spacing;
}

@mixin caption {
    font-size: func.font-size(vars.$typography-caption-font-size);
    font-weight: func.font-weight("normal");
    line-height: func.units(vars.$typography-caption-line-height, 'rem');
    color: func.color(vars.$typography-caption-text-color);
    letter-spacing: vars.$typography-caption-letter-spacing;
}

@mixin subheading {
    font-size: func.font-size(vars.$typography-subheading-font-size);
    font-weight: func.font-weight("normal");
    line-height: func.units(vars.$typography-subheading-line-height, 'rem');
    color: func.color(vars.$typography-subheading-text-color);
    letter-spacing: vars.$typography-subheading-letter-spacing;
    margin-top: 0;
    margin-bottom: 0;
}

@mixin form-label-text {
    font-size: func.font-size(vars.$typography-form-label-font-size);
    line-height: func.units(vars.$typography-form-label-line-height, 'rem');
    font-weight: func.font-weight("semibold");
    color: func.color(vars.$typography-form-label-text-color);
    text-transform: none;
}

@mixin small-text {
    font-size: func.font-size(vars.$typography-small-text-font-size);
    line-height: func.units(vars.$typography-small-text-line-height, 'rem');
    font-weight: func.font-weight("normal");
    letter-spacing: vars.$typography-small-text-letter-spacing;
}

@mixin font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@mixin no-font-smoothing {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}