@mixin font-face($font-family, $url, $font-weight: normal, $font-style: normal, $extensionOTF: false) {
    @font-face {
        font-family: '#{$font-family}';
        font-weight: $font-weight;
        font-style: $font-style;

        @if $extensionOTF {
            src: url('#{$m-font-path}#{$url}.otf.woff2') format('woff2'),
            url('#{$m-font-path}#{$url}.ttf.woff2') format('woff2'),
            url('#{$m-font-path}#{$url}.otf.woff') format('woff'),
            url('#{$m-font-path}#{$url}.ttf.woff') format('woff');
        }

        @else {
            src: url('#{$m-font-path}#{$url}.ttf.woff2') format('woff2'),
            url('#{$m-font-path}#{$url}.ttf.woff') format('woff');
        }
    }
}

@mixin m-font-size($font-size: 'base') {
    @if $font-size=='base' {
        font-size: 1rem;
    }

    @else {
        $base-font-size: map-get($m-font-size-map, 'base');
        $size: $font-size;

        @if type-of($font-size)=='string' {
            $size: map-get($m-font-size-map, $font-size);
        }

        font-size: calc(#{$size} / #{$base-font-size} * 1rem);
    }

}

@mixin m-commons-title-styles() {
    font-weight: $m-font-weight-heading;
    line-height: $m-line-height-heading;
}

@mixin m-titles-styles() {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .mu-h1,
    .mu-h2,
    .mu-h3,
    .mu-h4,
    .mu-h5,
    .mu-h6 {
        @include m-commons-title-styles();
    }

    h1,
    .mu-h1 {
        margin: $m-margin-h1;

        @include m-font-size('h1');
    }

    h2,
    .mu-h2 {
        margin: $m-margin-h2;

        @include m-font-size('h2');
    }

    h3,
    .mu-h3 {
        margin: $m-margin-h3;

        @include m-font-size('h3');
    }

    h4,
    .mu-h4 {
        margin: $m-margin-h4;

        @include m-font-size('h4');
    }

    h5,
    .mu-h5 {
        margin: $m-margin-h5;

        @include m-font-size('h5');
    }

    h6,
    .mu-h6 {
        margin: $m-margin-h6;

        @include m-font-size('h6');
    }
}

@mixin m-text-styles() {

    p,
    .mu-p {
        margin: $m-margin-paragraph;
    }

    b,
    strong {
        font-weight: $m-font-weight-semi-bold;
    }

    i,
    em {
        font-style: italic;
    }

    small {
        @include m-font-size('sm');
    }

    pre,
    code {
        word-break: break-all;
        word-wrap: break-word;
        font-weight: $m-font-weight-light;
        color: $m-color-text;

        @include m-font-size('sm');
    }
}

@mixin m-word-wrap() {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}