@use "sass:string";
@use "../../core/jkl";
@use "../../shared/track/track";

$_downcount: jkl-downcount-#{string.unique-id()};

@layer jokul.components {
    .jkl-progress-bar {
        @include track.track;
        @include jkl.reset-outline;

        &:focus-visible {
            @include jkl.focus-outline;
        }

        &__tracker {
            transition-property: width;

            @include jkl.motion("standard", "productive");
        }
    }

    @keyframes #{$_downcount} {
        from {
            width: 100%;
        }

        to {
            width: 0%;
        }
    }
}