@import 'commons';
$m-loading-speed-indeterminate: 2s;
$m-circle-transition-speed: cubic-bezier(0.25, 0.8, 0.25, 1);

@include indeterminate();
@include indeterminate-short();
@include m-progress-spinner-rotate();
@include m-progress-spinner-initial-rotate();

.m-progress {
    &:not(.m--is-circle) {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: block;
        background: $m-color-grey-light;

        &.m--is-monochrome {
            background: $m-color-grey-lighter;
        }

        &.m--is-determinate {
            &.m--is-enter-active .m-progress__bar {
                width: 0 !important;
            }

            .m-progress__bar {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                transition: width $m-transition-duration linear;
                will-change: width;
            }

            &.m--is-completed .m-progress__bar {
                background: $m-color-success;
            }

            &.m--is-in-progress .m-progress__bar {
                background: $m-color-ul-yellow;
            }

            &.m--is-error .m-progress__bar {
                background: $m-color-error;
            }

            &.m--is-monochrome .m-progress__bar {
                background: $m-color-grey;
            }
        }

        &.m--is-indeterminate {
            .m-progress__bar {
                background: $m-color-ul-yellow;

                &::before {
                    content: '';
                    position: absolute;
                    background-color: inherit;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    border-radius: $m-border-radius;
                    will-change: left, right;
                    animation: indeterminate $m-loading-speed-indeterminate cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
                }

                &::after {
                    content: '';
                    position: absolute;
                    background-color: inherit;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    border-radius: $m-border-radius;
                    will-change: left, right;
                    animation: indeterminate-short $m-loading-speed-indeterminate cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
                    -webkit-animation-delay: 1.15s;
                    animation-delay: 1.15s;
                }
            }

            &.m--is-monochrome .m-progress__bar {
                background: $m-color-grey-lighter;

                &::before,
                &::after {
                    background-color: $m-color-grey;
                }
            }
        }
    }

    &.m--is-circle {
        display: inline-flex;
        position: relative;

        &.m--is-indeterminate {
            .m-progress__wrap {
                animation: m-progress-spinner-rotate 2s linear infinite;

                .m-progress__circle {
                    stroke: $m-color-ul-yellow;
                    animation: 4s infinite $m-circle-transition-speed;
                }
            }

            &.m--is-monochrome .m-progress__wrap {
                .m-progress__circle {
                    stroke: $m-color-grey;
                }
            }
        }

        &.m--is-determinate {
            &.m--is-enter-active {
                transition-duration: 2s;

                .m-progress__draw {
                    animation: m-progress-spinner-initial-rotate 1.98s $m-circle-transition-speed forwards;
                }

                .m-progress__slot {
                    transition: opacity $m-transition-duration-lg;
                }
            }

            &.m--is-enter {
                .m-progress__slot {
                    opacity: 0;
                }
            }

            .m-progress__draw {
                transition: none;
            }

            &.m--is-completed {
                .m-progress__circle {
                    stroke: $m-color-success;
                }
            }

            &.m--is-in-progress {
                .m-progress__circle {
                    stroke: $m-color-ul-yellow;
                }
            }

            &.m--is-error {
                .m-progress__circle {
                    stroke: $m-color-error;
                }
            }

            &.m--is-monochrome {
                .m-progress__circle {
                    stroke: $m-color-grey;
                }
            }
        }

        .m-progress__wrap {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .m-progress__draw {
            overflow: visible;
            transform: scale(1) rotate(-90deg);
            transform-origin: center;
            transition: 0.4s $m-circle-transition-speed;
            will-change: opacity, transform;
        }

        .m-progress__circle {
            fill: none;
            transform-origin: center;
            transition: stroke-dashoffset 0.25s $m-circle-transition-speed;
            will-change: stroke-dashoffset, stroke-dasharray, stroke-width, animation-name, r;
        }

        .m-progress__background {
            fill: none;
            stroke: $m-color-grey-lighter;
            transform-origin: center;
            transition: stroke-dashoffset 0.25s $m-circle-transition-speed;
        }

        .m-progress__slot {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}