// https://m3.material.io/components/progress-indicators/specs

.sd-linear_progress_indicator {
    display: inline-block;
    vertical-align: middle;
    height: 4px;
    min-width: 5rem; //! min-width
    width: 100%;
    background: var(--md-sys-color-surface-container-highest);

    &-track {
        height: 4px;
        background: var(--md-sys-color-primary);
    }
    &[data-sd='determinate'] .sd-linear_progress_indicator-track {
        transition: width 200ms linear;
    }
    &[data-sd='undeterminate'] {
        overflow: hidden;
        .sd-linear_progress_indicator-track {
            width: 50%;
            animation: sd-linear_progress_indicator-undeterminate 2.1s
                cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite;
        }
    }
}

// TODO: this is material 2 animation, material you animation requires more work
@keyframes sd-linear_progress_indicator-undeterminate {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(200%);
    }
}

.sd-circular_progress_indicator {
    display: inline-block;
    vertical-align: middle;
    --size: 36px;
    width: var(--size);
    height: var(--size);
    overflow: hidden;
    border-radius: 50%;
    $defaultValue: 75%;
    background: conic-gradient(
        var(--md-sys-color-primary),
        var(--md-sys-color-primary) var(--value, $defaultValue),
        transparent var(--value, $defaultValue)
    );
    --mask: radial-gradient(
        closest-side,
        transparent 78.5%,
        var(--md-sys-color-primary) 82.5%
    );
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);

    &[data-sd='determinate'] .sd-linear_progress_indicator-track {
        transition: all 200ms linear;
    }
    &[data-sd='undeterminate'] {
        animation: sd-circular_progress_indicator-undeterminate 1.05s
            cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite;
    }
}

// TODO: this is not correct animation, but easy to implement
@keyframes sd-circular_progress_indicator-undeterminate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}