//
// Copyright 2023 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// [Modified by Sandlada & Kai Orion]
//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use '../../../tokens';

// note, transition settings match MDC
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L79
$_determinate-duration: 250ms;
$_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L218
$_indeterminate-duration: 2s;

@mixin styles() {
    $tokens: tokens.md-comp-linear-progress-values();

    & {
        @each $token, $value in $tokens {
            --_#{$token}: #{$value};
        }

        border-radius: var(--_track-shape);
        display: flex;
        position: relative;
        // note, this matches the `meter` element and is just done so
        // there's a default width.
        min-width: 80px;
        height: var(--_track-height);
        content-visibility: auto;
        contain: strict;
        direction: ltr;
        overflow: hidden;
        align-items: center;
    }

    & .dots,
    & .inactive-track,
    & .bar,
    & .bar-inner {
        position: absolute;
    }

    & .bar {
        animation: none;
        // position is offset for indeterminate animation, so we lock the inline size here.
        width: 100%;
        height: var(--_active-indicator-height);
        transform-origin: left center;
        transition: transform $_determinate-duration $_determinate-easing;
    }

    & .secondary-bar {
        display: none;
    }

    & .bar-inner {
        inset: 0;
        animation: none;
        background: var(--_active-indicator-color);
    }

    & .inactive-track {
        background: var(--_track-color);
        inset: 0;
        transition: transform $_determinate-duration $_determinate-easing;
        transform-origin: left center;
    }

    & .dots {
        inset: 0;
        animation: linear infinite $_determinate-duration;
        animation-name: buffering;
        // The color of the buffer dots, which are masked out of this background
        // color.
        background-color: var(--_track-color);
        background-repeat: repeat-x;
        // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
        // This svg creates a black circle on a transparent background which is used
        // to mask out the animated buffering dots. This technique allows for dot
        // color customization via the background-color property, and mask-image
        // displays when forced-colors are active.
        $svg: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";
        // required for full support with Chrome, Edge, and Opera.
        -webkit-mask-image: url($svg);
        mask-image: url($svg);
        z-index: -1; // Place behind tracks for Safari
    }

    // dots are hidden when indeterminate or when there is no visible buffer to
    // prevent infinite invisible animation.
    & .dots[hidden] {
        display: none;
    }

    // indeterminate
    &.indeterminate .bar {
        transition: none;
    }

    // note, the numbers here come directly from the mdc implementation.
    // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
    &.indeterminate .primary-bar {
        inset-inline-start: -145.167%;
    }

    &.indeterminate .secondary-bar {
        inset-inline-start: -54.8889%;
        // this is display none by default.
        display: block;
    }

    &.indeterminate .primary-bar {
        animation: linear infinite $_indeterminate-duration;
        animation-name: primary-indeterminate-translate;
    }

    &.indeterminate .primary-bar > .bar-inner {
        animation: linear infinite $_indeterminate-duration primary-indeterminate-scale;
    }

    &.indeterminate.four-color .primary-bar > .bar-inner {
        animation-name: primary-indeterminate-scale, four-color;
        animation-duration: $_indeterminate-duration, calc($_indeterminate-duration * 2);
    }

    &.indeterminate .secondary-bar {
        animation: linear infinite $_indeterminate-duration;
        animation-name: secondary-indeterminate-translate;
    }

    &.indeterminate .secondary-bar > .bar-inner {
        animation: linear infinite $_indeterminate-duration secondary-indeterminate-scale;
    }

    &.indeterminate.four-color .secondary-bar > .bar-inner {
        animation-name: secondary-indeterminate-scale, four-color;
        animation-duration: $_indeterminate-duration, calc($_indeterminate-duration * 2);
    }

    &:dir(rtl) {
        transform: scale(-1);
    }

    @keyframes primary-indeterminate-scale {
        0% {
            transform: scaleX(0.08);
        }

        36.65% {
            animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
            transform: scaleX(0.08);
        }

        69.15% {
            animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
            transform: scaleX(0.661479);
        }

        100% {
            transform: scaleX(0.08);
        }
    }

    @keyframes secondary-indeterminate-scale {
        0% {
            animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
            transform: scaleX(0.08);
        }

        19.15% {
            animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);
            transform: scaleX(0.457104);
        }

        44.15% {
            animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
            transform: scaleX(0.72796);
        }

        100% {
            transform: scaleX(0.08);
        }
    }

    @keyframes buffering {
        0% {
            $_dot-size: calc(var(--_track-height) / 2);
            // the amount to animate is aligned with the default track background
            $_dot-background-width: calc($_dot-size * 5);
            transform: translateX(#{$_dot-background-width});
        }
    }

    // note, the numbers here come directly from the mdc implementation.
    // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
    // keyframes
    @keyframes primary-indeterminate-translate {
        0% {
            transform: translateX(0px);
        }

        20% {
            animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
            transform: translateX(0px);
        }

        59.15% {
            animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
            transform: translateX(83.6714%);
        }

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

    @keyframes secondary-indeterminate-translate {
        0% {
            animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
            transform: translateX(0px);
        }

        25% {
            animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
            transform: translateX(37.6519%);
        }

        48.35% {
            animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
            transform: translateX(84.3862%);
        }

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

    @keyframes four-color {
        0% {
            background: var(--_four-color-active-indicator-one-color);
        }

        15% {
            background: var(--_four-color-active-indicator-one-color);
        }

        25% {
            background: var(--_four-color-active-indicator-two-color);
        }

        40% {
            background: var(--_four-color-active-indicator-two-color);
        }

        50% {
            background: var(--_four-color-active-indicator-three-color);
        }

        65% {
            background: var(--_four-color-active-indicator-three-color);
        }

        75% {
            background: var(--_four-color-active-indicator-four-color);
        }

        90% {
            background: var(--_four-color-active-indicator-four-color);
        }

        100% {
            background: var(--_four-color-active-indicator-one-color);
        }
    }

    @media (forced-colors: active) {
        & {
            outline: 1px solid CanvasText;
        }

        & .bar-inner,
        & .dots {
            background-color: CanvasText;
        }

        // TODO(b/296262544): fix dots not being CanvasText. This need a refactor,
        // since background gradiants are not displayed in HCM.
    }
}