@import "../variables/variables";

:root {
    --progress-bar-expressive-color-1: #e53238;
    --progress-bar-expressive-color-2: #0064d2;
    --progress-bar-expressive-color-3: #f5af02;
    --progress-bar-expressive-color-4: #86b817;
    --progress-bar-expressive-line-border-radius: 2px;
    --progress-bar-expressive-line-count: 12;
    --progress-bar-expressive-line-gap: var(--spacing-50);
    --progress-bar-expressive-line-height: 6px;
    --progress-bar-expressive-line-scale-duration: 3s;
    --progress-bar-expressive-line-scroll-duration: 20s;
    /* Each line has a final width of 10% - 40% of the lines container.
       In each set of four lines, the widths add up to 100%.
       These widths are defined in CSS variables so they can more
       easily be randomized in Javascript, if desired. */
    --progress-bar-expressive-line-width-a1: 25%;
    --progress-bar-expressive-line-width-a2: 15%;
    --progress-bar-expressive-line-width-a3: 40%;
    --progress-bar-expressive-line-width-a4: 20%;
    --progress-bar-expressive-line-width-b1: 17%;
    --progress-bar-expressive-line-width-b2: 21%;
    --progress-bar-expressive-line-width-b3: 30%;
    --progress-bar-expressive-line-width-b4: 32%;
    --progress-bar-expressive-line-width-c1: 39%;
    --progress-bar-expressive-line-width-c2: 29%;
    --progress-bar-expressive-line-width-c3: 20%;
    --progress-bar-expressive-line-width-c4: 12%;
    --progress-bar-expressive-message-animatein-duration: 833ms;
    --progress-bar-expressive-message-animateout-duration: 400ms;

    @media (prefers-color-scheme: dark) {
        --progress-bar-expressive-color-1: #f0343b;
        --progress-bar-expressive-color-2: #0078fc;
        --progress-bar-expressive-color-3: #e8a502;
        --progress-bar-expressive-color-4: #86b817;
    }
}

.progress-bar-expressive {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: end;
    margin: 0 auto;
    max-width: 375px;
    row-gap: var(--spacing-300);
    width: 100%;
}

.progress-bar-expressive--loaded {
    display: none;
}

.progress-bar-expressive__messages {
    color: var(--color-foreground-primary);
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-regular);
    line-height: calc(var(--spacing-50) + var(--spacing-300)); /* 26px */
    margin: 0 var(--spacing-200);
    min-height: 3rem;
    position: relative;
    text-align: center;
}

.progress-bar-expressive__messages--medium {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: var(--spacing-300);
}

.progress-bar-expressive__message {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}

/* current message */
.progress-bar-expressive__message[role="status"] {
    opacity: 1;
}

/* next message */
.progress-bar-expressive__message[aria-hidden="true"] {
    opacity: 0;
}

.progress-bar-expressive__message--in {
    animation: progress-bar-expressive-message-animatein
        var(--progress-bar-expressive-message-animatein-duration)
        cubic-bezier(0.3, 0, 0, 1) both;
}

.progress-bar-expressive__message--out {
    animation: progress-bar-expressive-message-animateout
        var(--progress-bar-expressive-message-animateout-duration)
        cubic-bezier(0.3, 0, 0, 1) both;
}

.progress-bar-expressive__progress[role="progressbar"] {
    border-radius: var(--progress-bar-expressive-line-border-radius);
    margin: 0 var(--spacing-200);
    overflow: hidden;
}

.progress-bar-expressive__lines {
    display: flex;
    overflow: visible;
    /* Account for gaps between lines */
    width: calc(100% - (3 * var(--progress-bar-expressive-line-gap)));
}

.progress-bar-expressive__line {
    /* Default animation behavior: Lines scroll and resize.
       Animate line's width from 0% to its pre-defined width.
       Simultaneously cycle the line's order in its flex container
       to push its siblings forward and achieve an infinite loop.

       Note that Safari < 14 does not support flex order animations.
       In these browsers, the lines do not appear to infinitely
       scroll. Instead, they scale up, reset their size, and repeat. */
    animation:
        progress-bar-expressive-line-reorder
            var(--progress-bar-expressive-line-scale-duration)
            steps(var(--progress-bar-expressive-line-count)) infinite,
        progress-bar-expressive-line-scale-width
            var(--progress-bar-expressive-line-scale-duration) infinite;
    border-radius: var(--progress-bar-expressive-line-border-radius);
    display: inline-block;
    flex-shrink: 0;
    height: var(--progress-bar-expressive-line-height);
    line-height: 0;
    order: 1;
}

/* Set line colors */
.progress-bar-expressive__line:nth-child(4n + 1) {
    background-color: var(--progress-bar-expressive-color-4);
}
.progress-bar-expressive__line:nth-child(4n + 2) {
    background-color: var(--progress-bar-expressive-color-3);
}
.progress-bar-expressive__line:nth-child(4n + 3) {
    background-color: var(--progress-bar-expressive-color-2);
}
.progress-bar-expressive__line:nth-child(4n + 4) {
    background-color: var(--progress-bar-expressive-color-1);
}

/* Set line widths and animation delays */
.progress-bar-expressive__line:nth-child(1) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) - var(
                        --progress-bar-expressive-line-scale-duration
                    ) /
                    var(--progress-bar-expressive-line-count)
            )
    );
    width: var(--progress-bar-expressive-line-width-a1);
}
.progress-bar-expressive__line:nth-child(2) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            2
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-a2);
}
.progress-bar-expressive__line:nth-child(3) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            3
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-a3);
}
.progress-bar-expressive__line:nth-child(4) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            4
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-a4);
}
.progress-bar-expressive__line:nth-child(5) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            5
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-b1);
}
.progress-bar-expressive__line:nth-child(6) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            6
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-b2);
}
.progress-bar-expressive__line:nth-child(7) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            7
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-b3);
}
.progress-bar-expressive__line:nth-child(8) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            8
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-b4);
}
.progress-bar-expressive__line:nth-child(9) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            9
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-c1);
}
.progress-bar-expressive__line:nth-child(10) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            10
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-c2);
}
.progress-bar-expressive__line:nth-child(11) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            11
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-c3);
}
.progress-bar-expressive__line:nth-child(12) {
    animation-delay: calc(
        -1 *
            (
                var(--progress-bar-expressive-line-scale-duration) -
                    (
                        (
                                var(
                                        --progress-bar-expressive-line-scale-duration
                                    ) /
                                    var(--progress-bar-expressive-line-count)
                            ) *
                            12
                    )
            )
    );
    width: var(--progress-bar-expressive-line-width-c4);
}

/* With reduced motion, there are no animated transitions
   between messages and the lines scroll but do not resize. */
@media (prefers-reduced-motion) {
    /* Remove default message animation */
    .progress-bar-expressive__message--in,
    .progress-bar-expressive__message--out {
        animation: none;
    }

    .progress-bar-expressive__message[aria-hidden="true"] {
        display: none;
    }

    /* Fade in first message */
    .progress-bar-expressive__messages:not(
            .progress-bar-expressive__messages--medium
        )
        .progress-bar-expressive__message--initial[role="status"] {
        animation: progress-bar-expressive-message-fadein
            var(--progress-bar-expressive-message-animatein-duration)
            cubic-bezier(0.3, 0, 0, 1) both;
    }

    /* Scroll the entire line container */
    .progress-bar-expressive__lines {
        animation: progress-bar-expressive-reduced-motion-line-scroll
            var(--progress-bar-expressive-line-scroll-duration) linear infinite;
        overflow: visible;
    }

    /* Remove default line animation */
    .progress-bar-expressive__line {
        animation: none;
        animation-delay: none;
        margin-right: var(--progress-bar-expressive-line-gap);
    }

    /* Reset line colors */
    .progress-bar-expressive__line:nth-child(4n + 1) {
        background-color: var(--progress-bar-expressive-color-1);
    }
    .progress-bar-expressive__line:nth-child(4n + 2) {
        background-color: var(--progress-bar-expressive-color-2);
    }
    .progress-bar-expressive__line:nth-child(4n + 3) {
        background-color: var(--progress-bar-expressive-color-3);
    }
    .progress-bar-expressive__line:nth-child(4n + 4) {
        background-color: var(--progress-bar-expressive-color-4);
    }

    /* To achieve a seamless loop, the last set of line widths */
    /* need to match the first set of line widths */
    .progress-bar-expressive__line:nth-child(9) {
        width: var(--progress-bar-expressive-line-width-a1);
    }

    .progress-bar-expressive__line:nth-child(10) {
        width: var(--progress-bar-expressive-line-width-a2);
    }

    .progress-bar-expressive__line:nth-child(11) {
        width: var(--progress-bar-expressive-line-width-a3);
    }

    .progress-bar-expressive__line:nth-child(12) {
        width: var(--progress-bar-expressive-line-width-a4);
    }
}

@keyframes progress-bar-expressive-message-animateout {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--font-size-24) * -1));
    }
}

@keyframes progress-bar-expressive-message-animatein {
    0% {
        opacity: 0;
        transform: translateY(var(--font-size-24));
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progress-bar-expressive-message-fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes progress-bar-expressive-line-reorder {
    0% {
        order: 0;
    }
    100% {
        order: var(--progress-bar-expressive-line-count);
    }
}

@keyframes progress-bar-expressive-line-scale-width {
    0% {
        margin-right: 0;
        width: 0;
    }

    12.5% {
        margin-right: var(--progress-bar-expressive-line-gap);
    }

    50%,
    100% {
        margin-right: var(--progress-bar-expressive-line-gap);
    }
}

@keyframes progress-bar-expressive-reduced-motion-line-scroll {
    0% {
        transform: translateX(
            calc(-200% - 8 * var(--progress-bar-expressive-line-gap))
        );
    }

    100% {
        transform: translateX(0);
    }
}
