@use "../core/_index.scss" as *;
@use "@progress/kendo-theme-core/scss/components/progressbar/_layout.scss" as *;


@mixin kendo-progressbar--layout() {

    @include kendo-progressbar--layout-base();

    $kendo-progressbar-indeterminate-animation-timing: 2s infinite !default;

    .k-progressbar {
        @include border-radius( k-border-radius(full) );
        overflow: visible;

        .k-progressbar-value {
            border-radius: inherit;
        }

        > .k-progressbar-chunks {
            gap: k-spacing( 1.5 );
        }

        .k-progressbar-chunk {
            @include border-radius( k-border-radius(full) );
        }
    }

    .k-progressbar-horizontal {
        .k-progress-status-wrap {
            align-items: flex-start;
        }
        .k-progress-status {
            transform: translateY(-100%);
        }
    }

    .k-progressbar-vertical {
        .k-progress-status-wrap {
            align-items: flex-end;
        }
        .k-progress-status {
            transform: translateX(100%);
        }
    }

    .k-progressbar-indeterminate {
        overflow: hidden;

        &::before,
        &::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            transform-origin: 0 0;
        }

        &.k-progressbar-horizontal {
            &::before {
                inset-block-start: 0;
                inset-inline-start: -150%;
                animation: kendo-progressbar-primary-indeterminate-horizontal $kendo-progressbar-indeterminate-animation-timing;
            }
            &::after {
                inset-block-start: 0;
                inset-inline-start: -50%;
                animation: kendo-progressbar-secondary-indeterminate-horizontal $kendo-progressbar-indeterminate-animation-timing;
            }
        }

        &.k-progressbar-vertical {
            &::before {
                inset-block-start: -150%;
                inset-inline-start: 0;
                animation: kendo-progressbar-primary-indeterminate-vertical $kendo-progressbar-indeterminate-animation-timing;
            }
            &::after {
                inset-block-start: -50%;
                inset-inline-start: 0;
                animation: kendo-progressbar-secondary-indeterminate-vertical $kendo-progressbar-indeterminate-animation-timing;
            }
        }
    }
}