// ============================================================================================= //
//                                            MIXINS                                             //
// ============================================================================================= //

@use "sass:list";
@use "sass:map";
@use "@magnesium/core/config";
@use "@magnesium/core";
@use "@magnesium/theme";
@use "@unsass/breakpoint";
@use "@unsass/css";
@use "@unsass/selector";
@use "@unsass/utilities";
@use "./variables";

///
/// Core styles.
///
/// @see {mixin} typography
///
@mixin core-styles {
    $selector: theme.create-name(typography);

    // ------------------------------------------------------------------------- //
    // Main classes
    // ------------------------------------------------------------------------- //

    @include selector.create(#{$selector}) {
        @include base;
    }

    ///
    /// Responsive.
    ///
    @if core.get-responsive-option() {
        @each $key, $value in breakpoint.get-screens() {
            @include breakpoint.up($key) {
                @include selector.create(#{$selector}, $key) {
                    @include base;
                }
            }
        }
    }

    // ------------------------------------------------------------------------- //
    // Styles classes
    // ------------------------------------------------------------------------- //

    @each $style in map.keys(variables.$styles) {
        $selector: theme.create-name(typography--#{$style});

        @include selector.create(#{$selector}) {
            @include typography($style);
        }

        ///
        /// Responsive.
        ///
        @if core.get-responsive-option() {
            @each $key, $value in breakpoint.get-screens() {
                @include breakpoint.up($key) {
                    @include selector.create(#{$selector}, $key) {
                        @include typography($style);
                    }
                }
            }
        }
    }
}

// ------------------------------------------------------------------------- //
// Private mixins
// ------------------------------------------------------------------------- //

// ...

// ------------------------------------------------------------------------- //
// Public mixins
// ------------------------------------------------------------------------- //

///
/// Base.
///
/// @see {mixin} css.declaration
/// @see {function} core.create-var
///
@mixin base {
    @include font-smoothing;

    @each $key, $value in variables.$base {
        @if ($key == "font-family") {
            @include css.declaration($key, core.create-var(#{theme.create-name(typography-font-family)}, $value));
        } @else {
            @include css.declaration($key, $value);
        }
    }
}

///
/// Typography.
///
/// @see {mixin} css.declaration
/// @see {function} core.create-var
/// @see {function} theme.get-color
/// @see {function} theme.exist
///
@mixin typography($style, $exclude-props...) {
    $with-custom-properties: (
        font-family,
        font-size,
        font-weight,
        letter-spacing,
        line-height,
        text-decoration,
        text-transform
    );

    @if not map.has-key(variables.$styles, $style) {
        @error "Invalid style, '#{$style}' doesn't exist. Choose one of #{map.keys(variables.$styles)}.";
    }

    @include font-smoothing;

    @each $key, $value in map.remove(map.get(variables.$styles, $style), $exclude-props...) {
        @if theme.exist($value) {
            $value: core.create-var(theme.create-name(theme-#{$value}), theme.get-color($value));
        }

        @if list.index($with-custom-properties, $key) != null {
            $style-prop: "";

            @if ($key == "font-family") {
                $style-prop: core.create-var(theme.create-name(typography-#{$style}-#{$key}), core.create-var(theme.create-name(typography-#{$key}), $value));
            } @else {
                $style-prop: core.create-var(theme.create-name(typography-#{$style}-#{$key}), $value);
            }

            @include css.declaration($key, $style-prop);
        } @else {
            @include css.declaration($key, $value);
        }
    }
}

///
/// Font smoothing.
///
/// @see {mixin} utilities.font-smoothing
///
@mixin font-smoothing {
    @if variables.$font-smoothing {
        @include utilities.font-smoothing;
    }
}

///
/// Ellipsis.
///
/// @see {mixin} utilities.ellipsis
///
@mixin ellipsis {
    @include utilities.ellipsis;
}

///
/// Ellipsis multiline.
///
/// @see {mixin} utilities.ellipsis-multiline
///
@mixin ellipsis-multiline($line: 2, $orient: vertical) {
    @include utilities.ellipsis-multiline($line, $orient);
}