@use "./_variables.scss" as *;
@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();

    // Base
    .k-progressbar {
        @include border-radius( $kendo-progressbar-border-radius );
        overflow: visible;
    }

    // Status
    .k-progress-status-wrap {
        align-items: flex-start;
        grid-column: 1/-1;
        grid-row: 2/-1;
    }

    .k-progress-status {
        padding-inline: $kendo-progressbar-padding-x;
        padding-block: $kendo-progressbar-padding-y;
    }


    // Horizontal
    .k-progressbar-horizontal {

        .k-progress-status-wrap {
            margin-block-start: $kendo-progressbar-offset-y;
        }
    }


    // Vertical
    .k-progressbar-vertical {

        .k-progress-status-wrap {
            flex-direction: column;
            align-items: flex-start;
            margin-inline-start: $kendo-progressbar-vertical-status-offset;
            grid-row: 1/-1;
            grid-column: -1/1;
        }

        > .k-progressbar-value {

            .k-progress-status {
                display: none;
            }
        }

    }

    // Indeterminate
    .k-progressbar-indeterminate {
        overflow: hidden;

        &::after {
            content: '';
            position: relative;
        }

        &.k-progressbar-horizontal {
            &::after {
                width: 0px;
                min-width: 33%;
            }
        }

        &.k-progressbar-vertical {
            &::after {
                height: 0px;
                min-height: 33%;
                align-self: flex-end;
            }
        }

        .k-reset,
        .k-progress-status {
            display: none;
        }
    }
}