////
/// @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>
////

/// @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-color [null] - The background color used for modal overlays.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
///
/// @example scss Change the background color
///   $my-overlay-theme: igx-overlay-theme($background-color: rgba(yellow, .74));
///   // Pass the theme to the igx-overlay component mixin
///   igx-overlay($my-overlay-theme);
///
@function igx-overlay-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $background-color: null
) {
    $name: 'igx-overlay';
    $overlay-schema: ();

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

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

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

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

    %overlay-display {
        width: 0;
        height: 0;
        box-sizing: content-box;
    }

    %overlay-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: transparent;
        transition: background .25s $ease-in-out-quad;
        pointer-events: none;
        z-index: 10;
        box-sizing: content-box;
    }

    %overlay-wrapper--modal {
        background: --var($theme, 'background-color');
        pointer-events: initial;
    }

    %overlay-wrapper--flex {
        display: flex;
    }

    %overlay-wrapper--flex-container {
        display: flex;
        position: absolute;
    }

    %overlay-content {
        position: absolute;
        pointer-events: all;
        box-sizing: content-box;
    }

    %overlay-content--modal {
        pointer-events: initial;
    }

    %overlay-content--elastic {
        overflow: auto;
    }

    %overlay-content--relative {
        position: relative;
    }

    %igx-toggle--hidden {
        display: none !important;
    }
}