////
/// @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} $track-color [null] - The main track color.
/// @param {Color} $fill-color-default [null] - The track default fill color.
/// @param {Color} $fill-color-danger [null] - The track danger fill color.
/// @param {Color} $fill-color-warning [null] - The track warning fill color.
/// @param {Color} $fill-color-info [null] - The track info fill color.
/// @param {Color} $fill-color-success [null] - The track success fill color.
/// @param {Color} $stripes-color [null] - The track stripes color.
/// @param {Color} $text-color [null] - The track value text color.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
///
/// @example scss Change the stripes color
///   $my-progress-linear-theme: igx-progress-linear-theme(
///     $stripes-color: orange
///   );
///   // Pass the theme to the igx-progress-linear component mixin
///   @include igx-progress-linear($my-progress-linear-theme);
@function igx-progress-linear-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $track-color: null,
    $fill-color-default: null,
    $fill-color-danger: null,
    $fill-color-warning: null,
    $fill-color-info: null,
    $fill-color-success: null,
    $stripes-color: null,
    $text-color: null
) {
    $name: 'igx-linear-bar';
    $linear-bar-schema: ();

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

    $theme: apply-palette($linear-bar-schema, $palette);

    @return extend($theme, (
        name: $name,
        palette: $palette,
        track-color: $track-color,
        fill-color-default: $fill-color-default,
        fill-color-danger: $fill-color-danger,
        fill-color-warning: $fill-color-warning,
        fill-color-info: $fill-color-info,
        fill-color-success: $fill-color-success,
        stripes-color: $stripes-color,
        text-color: $text-color
    ));
}

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

    // @debug $theme;

    $bar-height: 4px;
    $stripe-color: --var($theme, 'stripes-color');
    $value-fs: em(14px, 16px);
    $value-fw: 600;
    $value-margin: 0;
    $animation-direction: if-ltr(normal, reverse);

    %linear-display {
        position: relative;
        display: flex;
        width: 100%;
        flex: 1 1 100%;
        flex-direction: column;
    }

    %linear-bar {
        position: relative;
        width: inherit;
        height: $bar-height;
        background: --var($theme, 'track-color');
        overflow: hidden;
        z-index: 0;
    }

    %linear-indicator {
        width: 100%;
        position: relative;
        height: inherit;
    }

    %linear-indicator--striped {
        background-image: linear-gradient(
            -45deg,
            $stripe-color 25%,
            transparent 25%,
            transparent 50%,
            $stripe-color 50%,
            $stripe-color 75%,
            transparent 75%,
            transparent
        );
        background-size: 40px 40px;
    }

    %linear-indicator--indeterminate {
        @include animation(indeterminate-bar 2s cubic-bezier(0, .085, .68, .53) #{$animation-direction} infinite);

        width: 100% !important;

        &::before {
            position: absolute;
            content: '';
            top: 0;
            left: -200%;
            width: 100%;
            height: inherit;
            background-color: inherit;
            transform-origin: top right;
        }
    }

    %linear-indicator--default {
        background: --var($theme, 'fill-color-default')
    }

    %linear-indicator--danger {
        background-color: --var($theme, 'fill-color-danger');
    }

    %linear-indicator--warning {
        background-color: --var($theme, 'fill-color-warning');
    }

    %linear-indicator--info {
        background-color: --var($theme, 'fill-color-info');
    }

    %linear-indicator--success {
        background-color: --var($theme, 'fill-color-success');
    }


    %linear-value {
        margin: $value-margin;
        color: --var($theme, 'text-color');
        font-size: $value-fs;
        font-weight: $value-fw;
    }

    %linear-value--start {
        align-self: flex-start;
    }

    %linear-value--center {
        align-self: center;
    }

    %linear-value--end {
        align-self: flex-end;
    }

    %linear-value--top {
        order: -1;
    }

    %linear-value--hidden {
        display: none;
    }

    @include keyframes('indeterminate-bar') {
        0% {
            transform: scaleX(0) translateX(-100%);
            transform-origin: left;
        }

        50% {
            transform: scaleX(1) translateX(50%);
            transform-origin: right;
        }

        100% {
            transform: scaleX(0) translateX(200%);
            transform-origin: right;
        }
    }
}

/// @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} $base-circle-color [null] - The base circle fill color.
/// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
/// @param {Color} $text-color [null] - The value text color.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
///
/// @example scss Change the circle progress color
///   $my-progress-circular-theme: igx-progress-circular-theme(
///     $progress-circle-color: purple
///   );
///   // Pass the theme to the igx-progress-circular component mixin
///   @include igx-progress-circular($my-progress-circle-theme);
@function igx-progress-circular-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $base-circle-color: null,
    $progress-circle-color: null,

    $text-color: null
) {
    $name: 'igx-circular-bar';
    $circular-bar-schema: ();


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

    $theme: apply-palette($circular-bar-schema, $palette);

    $progress-circle-color-start: map-get($theme, 'progress-circle-color');
    $progress-circle-color-end: map-get($theme, 'progress-circle-color');

    @if type-of($progress-circle-color) == 'color' {
        $progress-circle-color-start: $progress-circle-color;
        $progress-circle-color-end: $progress-circle-color;
    }

    @if length($progress-circle-color) == 2 {
        $progress-circle-color-start: nth($progress-circle-color, 1);
        $progress-circle-color-end: nth($progress-circle-color, 2);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        base-circle-color: $base-circle-color,
        progress-circle-color-start: $progress-circle-color-start,
        progress-circle-color-end: $progress-circle-color-end,
        text-color: $text-color
    ));
}
/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires rem
/// @requires {mixin} rotate-center
/// @requires --var
@mixin igx-progress-circular($theme) {
    // Include rotate animation
    @include rotate-center();

    @include igx-root-css-vars($theme);

    // @debug $theme;

    $palette: map-get($theme, 'palette');
    $circular-value-fs: rem(32px, 16px);
    $circular-value-fw: 600;
    $animation-direction: if-ltr(normal, reverse);

    %circular-display {
        display: inline-flex;
        flex: 1 1 auto;
        width: rem(32px);
        height: rem(32px);

        svg {
            width: 100%;
            height: 100%;
            min-width: inherit;
            min-height: inherit;
        }
    }

    %circular-display--indeterminate {
        @include animation(rotate-center 3s linear #{$animation-direction} infinite);
        transform-origin: 50% 50%;
    }

    %circular-inner {
        stroke-width: 4;
        fill: transparent;
        stroke: --var($theme, 'base-circle-color');
    }

    %circular-outer {
        fill: transparent;
        stroke-width: 4;
        stroke-dashoffset: 289;
        stroke-dasharray: 289;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

    %circular-outer--indeterminate {
        stroke-dasharray: 289;

        @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) #{$animation-direction} infinite);
    }

    %circular-text {
        font-size: $circular-value-fs;
        font-weight: $circular-value-fw;
        fill: --var($theme, 'text-color');
    }

    %circular-text--hidden {
        visibility: hidden;
    }

    %circular-gradient-start {
        stop-color: --var($theme, 'progress-circle-color-start');
    }

    %circular-gradient-end {
        stop-color: --var($theme, 'progress-circle-color-end');
    }

    @include keyframes('indeterminate-accordion') {
        from {
            stroke-dashoffset: 578;
            stroke-dasharray: 259;
        }

        to {
            stroke-dashoffset: 120;
        }
    }
}