@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$progress-bg-color: map-get($denali-grey-colors,"400") !default;
$progress-corner-radius: $border-radius-sm !default;
$progress-sizes-sm-height: 10px !default;
$progress-sizes-default-height: 16px !default;
$progress-sizes-md-height: 20px !default;
$progress-sizes-lg-height: 24px !default;
$progress-bar-spacer: 2px !default;
$progress-bar-bg-color: map-get($denali-brand-colors,"300") !default;

@mixin progress-default {
    .d-progress {
        height: $progress-sizes-default-height;
        width: 100%;
        background: $progress-bg-color;
        border-radius: $progress-corner-radius;
        display: flex;
        overflow: hidden;

        .d-progress--bar {
            height: inherit;
            background: $progress-bar-bg-color;
            margin-left: $progress-bar-spacer;

            &:first-child {
                margin-left: 0px !important;
            }
        }

        // Size
        &__sm {
            height: $progress-sizes-sm-height;
        }

        &__md {
            height: $progress-sizes-md-height;
        }

        &__lg {
            height: $progress-sizes-lg-height;
        }

        // Loading
        &__loading {
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: loadingShimmer;
            animation-timing-function: linear;
            background-image: linear-gradient(to right, $progress-bg-color 0%, lighten($progress-bg-color, 6%) 50%, $progress-bg-color 100%);
            background-size: 50%;
            background-repeat: no-repeat;
            position: relative;
        }
    }

    @keyframes loadingShimmer{
        0%{
            background-position: -100%;
        }
        100%{
            background-position: 200%;
        }
    }
}

@mixin progress-theme {
    .d-progress {
        @if variable-exists("progress-sizes-default-height") {
            height: $progress-sizes-default-height;
        }
        @if variable-exists("progress-bg-color") {
            background: $progress-bg-color;
        }
        @if variable-exists("progress-corner-radius") {
            border-radius: $progress-corner-radius;
        }
        
        .d-progress--bar {
            @if variable-exists("progress-bar-bg-color") {
                background: $progress-bar-bg-color;
            }
            @if variable-exists("progress-bar-spacer") {
                margin-left: $progress-bar-spacer;
            }
        }

        // Size
        &__sm {
            @if variable-exists("progress-sizes-sm-height") {
                height: $progress-sizes-sm-height;
            }
        }

        &__md {
            @if variable-exists("progress-sizes-md-height") {
                height: $progress-sizes-md-height;
            }
        }

        &__lg {
            @if variable-exists("progress-sizes-lg-height") {
                height: $progress-sizes-lg-height;
            }
        }

        // Loading
        &__loading {
            @if variable-exists("progress-bg-color") {
                animation-duration: 1s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-name: loadingShimmer;
                animation-timing-function: linear;
                background-image: linear-gradient(to right, $progress-bg-color 0%, lighten($progress-bg-color, 6%) 50%, $progress-bg-color 100%);
                background-size: 50%;
                background-repeat: no-repeat;
                position: relative;
            }
        }
    }

    @keyframes loadingShimmer{
        0%{
            background-position: -100%;
        }
        100%{
            background-position: 200%;
        }
    }
}