////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// If only background color is specified,
/// the text-color will be assigned automatically to a contrasting color.
///
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $background [null] - The background color used for the toast.
/// @param {Color} $text-color [null] - The text-color used for the toast.
///
/// @param {border-radius} $border-radius [null] - The border radius used for the toast component.
///
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires text-contrast
/// @requires extend
/// @requires round-borders
///
/// @example scss Set a custom background color
///   $my-toast-theme: igx-toast-theme($background: green);
///   // Pass the theme to the igx-toast component mixin
///   @include igx-toast($my-toast-theme);
@function igx-toast-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $border-radius: null,
    $background: null,
    $text-color: null
) {
    $name: 'igx-toast';
    $toast-schema: ();

    @if map-has-key($schema, $name) {
        $toast-schema: map-get($schema, $name);
    } @else {
        $toast-schema: $schema;
    }

    $theme: apply-palette($toast-schema, $palette);

    $border-radius: round-borders(
        if($border-radius, $border-radius, map-get($toast-schema, 'border-radius')), 0, 26px
    );

    @if not($text-color) and $background {
        $text-color: text-contrast($background);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        background: $background,
        border-radius: $border-radius,
        text-color: $text-color
    ));
}

/// Toast Component
/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires rem
/// @requires --var
@mixin igx-toast($theme) {
    @include igx-root-css-vars($theme);

    $toast-width: 52px;
    $toast-padding: rem(16px) rem(24px);
    $toast-margin: rem(42px) auto;

    %igx-toast-display {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        margin: $toast-margin;
        padding: $toast-padding;
        min-width: $toast-width;
        color: --var($theme, 'text-color');
        background: --var($theme, 'background');
        border-radius: --var($theme, 'border-radius');
        opacity: 0;
        z-index: 999999;
    }

    %igx-toast--top {
        top: 0;
    }

    %igx-toast--middle {
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    %igx-toast--bottom {
        bottom: 0;
    }
}

/// Adds typography styles for the igx-toast component.
/// Uses the 'body-2'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
/// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} igx-type-style
@mixin igx-toast-typography($type-scale, $categories: (text: 'body-2')) {
    $text: map-get($categories, 'text');

    %igx-toast-display {
        @include igx-type-style($type-scale, $text) {
            margin: 0;
        }
    }
}