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

@mixin kendo-wizard--layout() {
    @include kendo-wizard--layout-base();

    .k-wizard {
        .k-wizard-step {
            padding-inline: $kendo-wizard-content-padding-x;
            padding-block: $kendo-wizard-content-padding-y;

            &:focus,
            &.k-focus {
                // TODO: use scss variable for outline width
                outline-width: 2px;
                outline-style: solid;
                outline-offset: -2px;
            }
        }

        .k-wizard-content {
            padding-inline: $kendo-wizard-content-padding-x;
            padding-block: $kendo-wizard-content-padding-y;
        }

        .k-wizard-buttons {
            margin-block-start: $kendo-wizard-buttons-margin-y;
        }
    }

    .k-wizard-vertical {
        .k-wizard-steps {
            margin-inline-start: $kendo-wizard-steps-padding-x;
        }
    }

    .k-wizard-left {
        .k-wizard-steps {
            margin-inline-end: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
            margin-inline-start: 0;
        }
    }
}