@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-stepper--layout() {

    // Base
    .k-stepper {
        border-width: var( --kendo-stepper-border-width, #{$kendo-stepper-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-size: var( --kendo-stepper-font-size, #{$kendo-stepper-font-size} );
        line-height: var( --kendo-stepper-line-height, #{$kendo-stepper-line-height} );
        font-family: var( --kendo-stepper-font-family, #{$kendo-stepper-font-family} );
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
        // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359
        color: inherit;
        background: none;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }


        // Step list
        .k-step-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            z-index: 1;
        }


        // Step
        .k-step {
            &.k-disabled {
                background: transparent;
            }
        }


        // Step link
        .k-step-link {
            outline: none;
            color: inherit;
            text-decoration: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        // Step indicator
        .k-step-indicator {
            @include border-radius( var( --kendo-stepper-indicator-border-radius, #{$kendo-stepper-indicator-border-radius} ) );
            margin: if( $kendo-stepper-indicator-focus-offset > 0, var( --kendo-stepper-indicator-focus-offset, #{$kendo-stepper-indicator-focus-offset} ), null );
            width: var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} );
            height: var( --kendo-stepper-indicator-height, #{$kendo-stepper-indicator-height} );
            border-width: var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} );
            border-style: solid;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            position: relative;
            z-index: 1;
            overflow: visible;
            transition-property: color, background-color, border-color;
            transition-duration: .4s;
            transition-timing-function: ease-in-out;

            &::before {
                @include border-radius( var( --kendo-stepper-indicator-border-radius, #{$kendo-stepper-indicator-border-radius} ) );
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

            &::after {
                @include border-radius( 100% );
                content: "";
                border-width: var( --kendo-stepper-indicator-focus-border-width, #{$kendo-stepper-indicator-focus-border-width} );
                border-style: solid;
                border-color: inherit;
                pointer-events: none;
                display: none;
                position: absolute;
                inset: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                z-index: 2;
            }
        }

        .k-step.k-focus,
        .k-step-link:focus {
            .k-step-indicator::after {
                display: block;
            }
        }

        .k-step.k-disabled {
            .k-step-indicator {
                border: 0;

                &::after {
                    display: none;
                }
            }
        }


        // Step label
        .k-step-label {
            max-width: clamp(100%, 10em, 100%);
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .k-step-label:only-child {
            @include border-radius( var( --kendo-stepper-label-border-radius, #{$kendo-stepper-label-border-radius} ) );
            padding-inline: var( --kendo-stepper-label-padding-x, #{$kendo-stepper-label-padding-x} );
            padding-block: var( --kendo-stepper-label-padding-y, #{$kendo-stepper-label-padding-y} );
            border-width: 0;
        }
        .k-step-label .k-step-text {
            max-width: calc( 10em - ( var( --kendo-icon-size, 1rem ) + var( --kendo-icon-spacing, .5rem ) ) );
            flex-grow: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .k-step-label .k-icon {
            margin-inline-start: var( --kendo-icon-spacing, .5rem );
        }

        .k-step-current .k-step-label {
            font-weight: var( --kendo-stepper-current-label-font-weight, #{$kendo-stepper-current-label-font-weight} );
        }


        // Optional label
        .k-step-label-optional {
            flex-basis: 100%;
            font-size: var( --kendo-stepper-optional-label-font-size, #{$kendo-stepper-optional-label-font-size} );
            font-style: var( --kendo-stepper-optional-label-font-style, #{$kendo-stepper-optional-label-font-style} );
        }


        .k-step-disabled,
        .k-step.k-disabled {
            pointer-events: none;

            .k-step-link { cursor: default; }

            .k-step-label-optional {
                color: inherit;
            }

            .k-step-label {
                font-weight: normal;
            }
        }


        // Progressbar
        .k-progressbar {
            pointer-events: none;
            z-index: 0;
            overflow: visible;
        }

        .k-progressbar-horizontal {
            grid-row: 1 / -1;
        }

        .k-progressbar-vertical {
            position: absolute;
        }
    }


    // Horizontal
    .k-step-list-horizontal {
        flex-direction: row;
        grid-row: 1;

        .k-step {
            flex: 1 0 auto;
            text-align: center;
        }

        .k-step-link {
            margin: auto;
            max-width: 10em;
            flex-direction: column;
        }

        // Label
        .k-step-label {
            text-align: center;
        }
        .k-step-indicator + .k-step-label {
            margin-top: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px);
        }

        // Progressbar
        & ~ .k-progressbar {
            width: 100%;
            height: var( --kendo-stepper-progressbar-size, #{$kendo-stepper-progressbar-size} );
            top: calc( ((var( --kendo-stepper-indicator-height, #{$kendo-stepper-indicator-height} ) + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
        }
    }

    // Vertical
    .k-step-list-vertical {
        flex-direction: column;

        .k-step {
            min-height: calc( (var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} ) + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px);
        }

        // Label
        .k-step-label {
            justify-content: flex-start;
        }
        .k-step-indicator + .k-step-label {
            margin-inline-start: var( --kendo-stepper-label-margin-x, #{$kendo-stepper-label-margin-x} );
        }


        // Progressbar
        & ~ .k-progressbar {
            width: var( --kendo-stepper-progressbar-size, #{$kendo-stepper-progressbar-size} );
            height: 100%;
            min-height: 20px;
            inset-inline-start: calc( (var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} ) + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
        }

        // Inline content
        .k-step-content {
            height: 0;
            overflow: hidden;
            transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function;
        }

        .k-step-current .k-step-content {
            height: auto;
            overflow: visible;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-inline-start: calc( var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} ) );
            padding-inline: var( --kendo-stepper-inline-content-padding-x, #{$kendo-stepper-inline-content-padding-x} );
            padding-block: var( --kendo-stepper-inline-content-padding-y, #{$kendo-stepper-inline-content-padding-y} );
        }
    }
}