////
/// @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} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
///
/// @example scss Change the color of the divider
///   $my-divider-theme: igx-divider-theme($color: orange);
///   // Pass the theme to the igx-divider component mixin
///   @include igx-divider($my-divider-theme);
@function igx-divider-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $color: null
) {
    $name: 'igx-divider';
    $divider-schema: ();

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

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

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

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

    %igx-divider-display {
        display: block;
        height: 1px;
        background: --var($theme, 'color');
    }

    %igx-divider--dashed {
        background: linear-gradient(to right, --var($theme, 'color') 50%, transparent 50%);
        background-size: 10px 1px; /* dash size */
    }

    %igx-divider--vertical {
        display: inline-block;
        width: 1px;
        min-width: 1px;
        height: auto;
    }

    %igx-divider--vertical-dashed {
        background: linear-gradient(to bottom, --var($theme, 'color') 50%, transparent 50%);
        background-size: 1px 10px; /* dash size */
    }
}