@use 'sass:map';
@use 'sass:math';
@use '../../base' as *;
@use '../../themes/schemas' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $content-foreground [null] - The foreground of the step content.
/// @param {Color} $step-background [null] - The background of the step header.
/// @param {Color} $step-hover-background [null] - The background of the step header on hover.
/// @param {Color} $step-focus-background [null] - The background of the step header on focus.
/// @param {Color} $title-color [null] - The color of the step title.
/// @param {Color} $title-hover-color [null] - The color of the step title on hover.
/// @param {Color} $title-focus-color [null] - The color of the step title on focus.
/// @param {Color} $subtitle-color [null] - The color of the step subtitle.
/// @param {Color} $subtitle-hover-color [null] - The color of the step subtitle on hover.
/// @param {Color} $subtitle-focus-color [null] - The color of the step subtitle on focus.
/// @param {Color} $indicator-color [null] - The text color of the step indicator.
/// @param {Color} $indicator-background [null] - The background color of the step indicator.
/// @param {Color} $indicator-outline [null] - The outline color of the step indicator.
///
/// @param {Color} $invalid-step-background [null] - The background of the invalid step header.
/// @param {Color} $invalid-step-hover-background [null] - The background of the invalid step header on hover.
/// @param {Color} $invalid-step-focus-background [null] - The background of the invalid step header on focus.
/// @param {Color} $invalid-title-color [null] - The color of the invalid step title.
/// @param {Color} $invalid-title-hover-color [null] - The color of the invalid step title on hover.
/// @param {Color} $invalid-title-focus-color [null] - The color of the invalid step title on focus.
/// @param {Color} $invalid-subtitle-color [null] - The color of the invalid step subtitle.
/// @param {Color} $invalid-subtitle-hover-color [null] - The color of the invalid step subtitle on hover.
/// @param {Color} $invalid-subtitle-focus-color [null] - The color of the invalid step subtitle on focus.
/// @param {Color} $invalid-indicator-color [null] - The color of the invalid step indicator.
/// @param {Color} $invalid-indicator-background [null] - The background color of the invalid step indicator.
/// @param {Color} $invalid-indicator-outline [null] - The outline color of the invalid step indicator.
///
/// @param {Color} $current-step-background [null] - The background of the current step header.
/// @param {Color} $current-step-hover-background [null] - The background of the current step header on hover.
/// @param {Color} $current-step-focus-background [null] - The background of the current step header on focus.
/// @param {Color} $current-title-color [null] - The color of the current step title.
/// @param {Color} $current-title-hover-color [null] - The color of the current step title on hover.
/// @param {Color} $current-title-focus-color [null] - The color of the current step title on focus.
/// @param {Color} $current-subtitle-color [null] - The color of the current step subtitle.
/// @param {Color} $current-subtitle-hover-color [null] - The color of the current step subtitle on hover.
/// @param {Color} $current-subtitle-focus-color [null] - The color of the current step subtitle on focus.
/// @param {Color} $current-indicator-color [null] - The color of the current step indicator.
/// @param {Color} $current-indicator-background [null] - The background color of the current step indicator.
/// @param {Color} $current-indicator-outline [null] - The outline color of the current step indicator.
///
/// @param {Color} $complete-step-background [null] - The background of the complete step header.
/// @param {Color} $complete-step-hover-background [null] - The background of the complete step header on hover.
/// @param {Color} $complete-step-focus-background [null] - The background of the complete step header on focus.
/// @param {Color} $complete-title-color [null] - The color of the complete step title.
/// @param {Color} $complete-title-hover-color [null] - The color of the complete step title on hover.
/// @param {Color} $complete-title-focus-color [null] - The color of the complete step title on focus.
/// @param {Color} $complete-subtitle-color [null] - The color of the complete step subtitle.
/// @param {Color} $complete-subtitle-hover-color [null] - The color of the complete step subtitle on hover.
/// @param {Color} $complete-subtitle-focus-color [null] - The color of the complete step subtitle on focus.
/// @param {Color} $complete-indicator-color [null] - The color of the completed step indicator.
/// @param {Color} $complete-indicator-background [null] - The background color of the completed step indicator.
/// @param {Color} $complete-indicator-outline [null] - The outline color of the completed step indicator.
///
/// @param {Color} $disabled-title-color [null] - The title color of the disabled step.
/// @param {Color} $disabled-subtitle-color [null] - The subtitle color of the disabled step.
/// @param {Color} $disabled-indicator-color [null] - The indicator color of the disabled step.
/// @param {Color} $disabled-indicator-background [null] - The indicator background of the disabled step.
/// @param {Color} $disabled-indicator-outline [null] - The indicator outline color of the disabled step.
///
/// @param {Color} $step-separator-color [null] - The separator border-color of between the steps.
/// @param {Color} $complete-step-separator-color [null] - The separator border-color between the completed steps.
///
/// @param {Color} $step-separator-style [null] - The separator border-style of between the steps.
/// @param {Color} $complete-step-separator-style [null] - The separator border-style between the completed steps.
///
/// @param {List} $border-radius-indicator [null] - The border-radius of the step indicator.
/// @param {List} $border-radius-step-header [null] - The border-radius of the step header.
///
/// @requires $light-material-schema
/// @example scss Set custom stepper colors
///   $my-stepper-theme: stepper-theme($step-hover-background: red);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-stepper-theme);
@function stepper-theme(
    $schema: $light-material-schema,

    $content-foreground: null,

    $step-background: null,
    $step-hover-background: null,
    $step-focus-background: null,

    $invalid-step-background: null,
    $invalid-step-hover-background: null,
    $invalid-step-focus-background: null,

    $current-step-background: null,
    $current-step-hover-background: null,
    $current-step-focus-background: null,

    $complete-step-background: null,
    $complete-step-hover-background: null,
    $complete-step-focus-background: null,

    // Incomplete
    $indicator-color: null,
    $indicator-background: null,
    $indicator-outline: null,

    $title-color: null,
    $title-hover-color: null,
    $title-focus-color: null,

    $subtitle-color: null,
    $subtitle-hover-color: null,
    $subtitle-focus-color: null,

    // Invalid
    $invalid-indicator-color: null,
    $invalid-indicator-background: null,
    $invalid-indicator-outline: null,

    $invalid-title-color: null,
    $invalid-title-hover-color: null,
    $invalid-title-focus-color: null,

    $invalid-subtitle-color: null,
    $invalid-subtitle-hover-color: null,
    $invalid-subtitle-focus-color: null,

    // Current
    $current-indicator-color: null,
    $current-indicator-background: null,
    $current-indicator-outline: null,

    $current-title-color: null,
    $current-title-hover-color: null,
    $current-title-focus-color: null,

    $current-subtitle-color: null,
    $current-subtitle-hover-color: null,
    $current-subtitle-focus-color: null,

    // complete
    $complete-indicator-color: null,
    $complete-indicator-background: null,
    $complete-indicator-outline: null,

    $complete-title-color: null,
    $complete-title-hover-color: null,
    $complete-title-focus-color: null,

    $complete-subtitle-color: null,
    $complete-subtitle-hover-color: null,
    $complete-subtitle-focus-color: null,

    // Disabled
    $disabled-indicator-color: null,
    $disabled-indicator-background: null,
    $disabled-indicator-outline: null,
    $disabled-title-color: null,
    $disabled-subtitle-color: null,

    // Separator
    $step-separator-color: null,
    $complete-step-separator-color: null,

    $step-separator-style: null,
    $complete-step-separator-style: null,

    // Border-radius
    $border-radius-indicator: null,
    $border-radius-step-header: null,
) {
    $name: 'igx-stepper';
    $selector: 'igx-stepper';
    $stepper-schema: ();

    @if map.has-key($schema, 'stepper') {
        $stepper-schema: map.get($schema, 'stepper');
    } @else {
        $stepper-schema: $schema;
    }

    $theme: digest-schema($stepper-schema);
    $meta: map.get($theme, '_meta');

    @if not($indicator-background) and $step-background {
        $indicator-background: text-contrast($step-background);
    }

    @if not($indicator-color) and $indicator-background {
        $indicator-color: text-contrast($indicator-background);
    }

    @if not($complete-indicator-color) and $complete-indicator-background {
        $complete-indicator-color: text-contrast($complete-indicator-background);
    }

    @if not($invalid-indicator-color) and $invalid-indicator-background {
        $invalid-indicator-color: text-contrast($invalid-indicator-background);
    }

    @if not($current-indicator-color) and $current-indicator-background {
        $current-indicator-color: text-contrast($current-indicator-background);
    }

    @if not($title-color) and $step-background {
        $title-color: text-contrast($step-background);
    }

    @if not($subtitle-color) and $step-background {
        $subtitle-color: text-contrast($step-background);
    }

    @if not($title-hover-color) and $step-hover-background {
        $title-hover-color: text-contrast($step-hover-background);
    }

    @if not($subtitle-hover-color) and $step-hover-background {
        $subtitle-hover-color: text-contrast($step-hover-background);
    }

    @if not($title-focus-color) and $step-focus-background {
        $title-focus-color: text-contrast($step-focus-background);
    }

    @if not($subtitle-focus-color) and $step-focus-background {
        $subtitle-focus-color: text-contrast($step-focus-background);
    }

    @if not($border-radius-indicator) {
        $border-radius-indicator: map.get($theme, 'border-radius-indicator');
    }

    @if not($border-radius-step-header) {
        $border-radius-step-header: map.get($theme, 'border-radius-step-header');
    }

    @return extend($theme, (
        name: $name,
        selector: $selector,

        content-foreground: $content-foreground,

        // Incomplete
        step-background: $step-background,
        step-hover-background: $step-hover-background,
        step-focus-background: $step-focus-background,
        indicator-color: $indicator-color,
        indicator-background: $indicator-background,
        indicator-outline: $indicator-outline,
        title-color: $title-color,
        title-hover-color: $title-hover-color,
        title-focus-color: $title-focus-color,
        subtitle-color: $subtitle-color,
        subtitle-hover-color: $subtitle-hover-color,
        subtitle-focus-color: $subtitle-focus-color,

        // Invalid
        invalid-step-background: $invalid-step-background,
        invalid-step-hover-background: $invalid-step-hover-background,
        invalid-step-focus-background: $invalid-step-focus-background,
        invalid-indicator-color: $invalid-indicator-color,
        invalid-indicator-background: $invalid-indicator-background,
        invalid-indicator-outline: $invalid-indicator-outline,
        invalid-title-color: $invalid-title-color,
        invalid-title-hover-color: $invalid-title-hover-color,
        invalid-title-focus-color: $invalid-title-focus-color,
        invalid-subtitle-color: $invalid-subtitle-color,
        invalid-subtitle-hover-color: $invalid-subtitle-hover-color,
        invalid-subtitle-focus-color: $invalid-subtitle-focus-color,

        // Current
        current-step-background: $current-step-background,
        current-step-hover-background: $current-step-hover-background,
        current-step-focus-background: $current-step-focus-background,
        current-indicator-color: $current-indicator-color,
        current-indicator-background: $current-indicator-background,
        current-indicator-outline: $current-indicator-outline,
        current-title-color: $current-title-color,
        current-title-hover-color: $current-title-hover-color,
        current-title-focus-color: $current-title-focus-color,
        current-subtitle-color: $current-subtitle-color,
        current-subtitle-hover-color: $current-subtitle-hover-color,
        current-subtitle-focus-color: $current-subtitle-focus-color,

        // Complete
        complete-step-background: $complete-step-background,
        complete-step-hover-background: $complete-step-hover-background,
        complete-step-focus-background: $complete-step-focus-background,
        complete-indicator-color: $complete-indicator-color,
        complete-indicator-background: $complete-indicator-background,
        complete-indicator-outline: $complete-indicator-outline,
        complete-title-color: $complete-title-color,
        complete-title-hover-color: $complete-title-hover-color,
        complete-title-focus-color: $complete-title-focus-color,
        complete-subtitle-color: $complete-subtitle-color,
        complete-subtitle-hover-color: $complete-subtitle-hover-color,
        complete-subtitle-focus-color: $complete-subtitle-focus-color,

        // Disabled
        disabled-indicator-color: $disabled-indicator-color,
        disabled-indicator-background: $disabled-indicator-background,
        disabled-indicator-outline: $disabled-indicator-outline,
        disabled-title-color: $disabled-title-color,
        disabled-subtitle-color: $disabled-subtitle-color,

        // Separator
        step-separator-color: $step-separator-color,
        complete-step-separator-color: $complete-step-separator-color,
        step-separator-style: $step-separator-style,
        complete-step-separator-style: $complete-step-separator-style,

        // Border-radius
        border-radius-indicator: $border-radius-indicator,
        border-radius-step-header: $border-radius-step-header,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin stepper($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'variant');

    $indicator-size: map.get((
        'material': rem(24px),
        'fluent': rem(24px),
        'bootstrap': rem(40px),
        'indigo': rem(24px)
    ), $variant);

    $step-header-padding: rem(8px);

    $step-header-padding-simple: map.get((
        'material': rem(8px),
        'fluent': rem(8px),
        'bootstrap': rem(16px),
        'indigo': rem(8px)
    ), $variant);

    $title-gap: rem(8px);
    $indicator-gap: rem(4px);
    $indicator-padding: rem(2px);
    $v-line-indent: calc(#{$step-header-padding} + (#{$indicator-size} / 2));
    $separator-position: 50%;

    $outline-width: map.get((
        'material': clamp(1px, rem(1px), rem(1px)),
        'fluent': clamp(1px, rem(1px), rem(1px)),
        'bootstrap': clamp(1px, rem(1px), rem(1px)),
        'indigo': clamp(2px, rem(2px), rem(2px))
    ), $variant);

    $separator-size: map.get((
        'material': rem(1px),
        'fluent': rem(1px),
        'bootstrap': rem(8px),
        'indigo': rem(1px)
    ), $variant);

    $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2)));
    $separator-title-bottom: calc((#{$indicator-size} / 2) + #{$step-header-padding} - (#{$separator-size} / 2));

    %stepper-display,
    %igx-stepper__header,
    %igx-stepper__body,
    %igx-stepper__step {
        display: flex;
    }

    %stepper-display {
        flex-direction: column;
        width: 100%;
    }

    %igx-stepper__header {
        white-space: nowrap;
        flex-direction: column;
        width: 100%;
        flex: none;
    }

    %igx-stepper__body {
        color: var-get($theme, 'content-foreground');
        position: relative;
        flex-direction: column;
        flex: 1 1 auto;
    }

    %stepper-display,
    %igx-stepper__body,
    %igx-stepper__step-header,
    %igx-stepper__step-title-wrapper {
        overflow: hidden;
    }

    %igx-stepper__step-title {
        color: var-get($theme, 'title-color');
    }

    %igx-stepper__step-subtitle {
        color: var-get($theme, 'subtitle-color');
    }

    %igx-stepper__step {
        position: relative;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        min-width: rem(100px);

        &:focus {
            outline: none;

            %igx-stepper__step-title {
                color: var-get($theme, 'title-focus-color');
            }

            %igx-stepper__step-subtitle {
                color: var-get($theme, 'subtitle-focus-color');
            }

            %igx-stepper__step-header {
                background: var-get($theme, 'step-focus-background');
                color: var-get($theme, 'title-focus-color');

                @if $variant == 'bootstrap' {
                    box-shadow: inset 0 0 0 $outline-width var-get($theme, 'indicator-outline');
                }
            }

            %igx-stepper__step-header--current {
                background: var-get($theme, 'current-step-focus-background') !important;

                %igx-stepper__step-title {
                    color: var-get($theme, 'current-title-focus-color');
                }

                %igx-stepper__step-subtitle {
                    color: var-get($theme, 'current-subtitle-focus-color');
                }
            }

            %igx-stepper__step-header--invalid {
                background: var-get($theme, 'invalid-step-focus-background');

                %igx-stepper__step-title {
                    color: var-get($theme, 'invalid-title-focus-color');
                }

                %igx-stepper__step-subtitle {
                    color: var-get($theme, 'invalid-subtitle-focus-color');
                }
            }
        }

        &:first-of-type {
            %igx-stepper__step-header {
                &::before {
                    visibility: hidden;
                }
            }
        }

        &:last-of-type {
            %igx-stepper__step-content-wrapper {
                &::before {
                    display: none;
                }
            }

            %igx-stepper__step-header {
                &::after {
                    visibility: hidden;
                }
            }
        }
    }

    %igx-stepper__step-header {
        display: flex;
        padding: $step-header-padding;
        position: relative;
        line-height: normal;
        flex-direction: column;
        align-items: flex-start;
        gap: $title-gap;
        cursor: pointer;
        background: var-get($theme, 'step-background');
        border-radius: var-get($theme, 'border-radius-step-header');

        &:hover {
            background: var-get($theme, 'step-hover-background');
            color: var-get($theme, 'title-hover-color');
        }

        @if $variant != material {
            .igx-ripple__inner {
                display: none;
            }
        }
    }

    %igx-stepper__step-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: rem(12px);
        height: $indicator-size;
        width: $indicator-size;
        white-space: nowrap;
        border-radius: var-get($theme, 'border-radius-indicator');
        color: var-get($theme, 'indicator-color');
        background: var-get($theme, 'indicator-background');
        box-shadow: 0 0 0 $outline-width var-get($theme, 'indicator-outline');

        @if $variant == 'bootstrap' {
            > igx-icon {
                width: var(--igx-icon-size, #{rem(18px)});
                height: var(--igx-icon-size, #{rem(18px)});
                font-size: var(--igx-icon-size, #{rem(18px)});
            }
        } @else if $variant == 'indigo' {
            > igx-icon {
                width: var(--igx-icon-size, #{rem(14px)});
                height: var(--igx-icon-size, #{rem(14px)});
                font-size: var(--igx-icon-size, #{rem(14px)});
            }
        } @else {
            > igx-icon {
                width: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                height: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                font-size: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                color: inherit;
            }
        }

        div > igx-icon,
        div > igx-avatar,
        div > igx-circular-bar {
            max-height: $indicator-size;
            max-width: $indicator-size;
        }
    }

    %igx-stepper__step-header--current {
        background: var-get($theme, 'current-step-background') !important;
        color: var-get($theme, 'current-title-color');

        %igx-stepper__step-indicator {
            color: var-get($theme, 'current-indicator-color') !important;
            background: var-get($theme, 'current-indicator-background') !important;
            box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline') !important;
        }

        %igx-stepper__step-title {
            @if $variant == 'indigo' {
                /* stylelint-disable scss/at-extend-no-missing-placeholder */
                @extend .ig-typography__subtitle-2;
                /* stylelint-enable scss/at-extend-no-missing-placeholder */
            }

            color: var-get($theme, 'current-title-color');
        }

        %igx-stepper__step-subtitle {
            color: var-get($theme, 'current-subtitle-color');
        }

        &:hover {
            background: var-get($theme, 'current-step-hover-background') !important;

            %igx-stepper__step-title {
                color: var-get($theme, 'current-title-hover-color');
            }

            %igx-stepper__step-subtitle {
                color: var-get($theme, 'current-subtitle-hover-color');
            }
        }
    }

    %igx-stepper__step--disabled {
        color: var-get($theme, 'disabled-title-color');
        pointer-events: none;
        cursor: default;

        %igx-stepper__step-indicator {
            color: var-get($theme, 'disabled-indicator-color');
            background: var-get($theme, 'disabled-indicator-background');
            box-shadow: 0 0 0 $outline-width var-get($theme, 'disabled-indicator-outline');
        }

        %igx-stepper__step-title {
            color: var-get($theme, 'disabled-title-color');
        }

        %igx-stepper__step-subtitle {
            color: var-get($theme, 'disabled-subtitle-color');
        }
    }

    %igx-stepper__step-header--invalid {
        background: var-get($theme, 'invalid-step-background');
        color: var-get($theme, 'invalid-title-color');

        %igx-stepper__step-indicator {
            color: var-get($theme, 'invalid-indicator-color');
            background: var-get($theme, 'invalid-indicator-background');
            box-shadow: 0 0 0 $outline-width var-get($theme, 'invalid-indicator-outline');
        }

        %igx-stepper__step-title {
            color: var-get($theme, 'invalid-title-color');
        }

        %igx-stepper__step-subtitle {
            color: var-get($theme, 'invalid-subtitle-color');
        }

        &:hover {
            background: var-get($theme, 'invalid-step-hover-background');

            %igx-stepper__step-title {
                color: var-get($theme, 'invalid-title-hover-color');
            }

            %igx-stepper__step-subtitle {
                color: var-get($theme, 'invalid-subtitle-hover-color');
            }
        }
    }

    %igx-stepper__body-content {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: -1;
    }

    %igx-stepper__step-content-wrapper,
    %igx-stepper__body-content {
        padding: rem(16px);
    }

    %igx-stepper__body-content--active {
        z-index: 1;
        position: relative;
    }

    %igx-stepper__step-content-wrapper {
        margin-inline-start: $v-line-indent;
        position: relative;
        min-height: if($variant == 'indigo', rem(24px), rem(32px));

        &::before {
            content: '';
            position: absolute;
            inset-inline-start: calc(-#{$separator-size} / 2);
            top: calc(-#{$step-header-padding} + #{$title-gap});
            bottom: calc(-#{$step-header-padding} + #{$title-gap});
            width: $separator-size;
            border-inline-start: $separator-size var-get($theme, 'step-separator-style') var-get($theme, 'step-separator-color');
        }
    }

    [aria-selected='true'] {
        %igx-stepper__step-content-wrapper {
            padding-inline-start: $v-line-indent;
        }
    }

    @if $variant == 'indigo' {
        [aria-selected='true'] {
            %igx-stepper__step-content-wrapper {
                padding-block: rem(16px);
                padding-inline-end: rem(16px);
            }
        }

        [aria-selected='false'] {
            %igx-stepper__step-content-wrapper {
                padding-block: 0;
            }
        }
    }

    %igx-stepper__step-title-wrapper {
        white-space: nowrap;
        text-overflow: ellipsis;
        min-width: rem(32px);

        &:empty {
            display: none;
        }

        > * {
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    %igx-stepper__step--start,
    %igx-stepper__step--end {
        %igx-stepper__step-header {
            flex-direction: row;
            align-items: center;
            //gap: $title-gap--horizontal;
        }
    }

    %igx-stepper__step--start,
    %igx-stepper__step--top {
        %igx-stepper__step-title-wrapper {
            order: -1;
        }
    }

    %igx-stepper__step--completed {

        %igx-stepper__step-header {
            background: var-get($theme, 'complete-step-background');

            &:hover {
                background: var-get($theme, 'complete-step-hover-background');
                %igx-stepper__step-title {
                    color: var-get($theme, 'complete-title-hover-color');
                }

                %igx-stepper__step-subtitle {
                    color: var-get($theme, 'complete-subtitle-hover-color');
                }
            }

            &::after {
                border-top-color: var-get($theme, 'complete-step-separator-color') !important;
                border-top-style: var-get($theme, 'complete-step-separator-style') !important;
            }
        }

        %igx-stepper__step-indicator {
            color: var-get($theme, 'complete-indicator-color');
            background: var-get($theme, 'complete-indicator-background');
            box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');
        }

        %igx-stepper__step-title {
            color: var-get($theme, 'complete-title-color');
        }

        %igx-stepper__step-subtitle {
            color: var-get($theme, 'complete-subtitle-color');
        }

        &:focus {
            %igx-stepper__step-header {
                background: var-get($theme, 'complete-step-focus-background');

                %igx-stepper__step-title {
                    color: var-get($theme, 'complete-title-focus-color');
                }

                %igx-stepper__step-subtitle {
                    color: var-get($theme, 'complete-subtitle-focus-color');
                }
            }
        }

        %igx-stepper__step-content-wrapper {
            &::before {
                border-inline-start-style: var-get($theme, 'complete-step-separator-style');
                border-inline-start-color: var-get($theme, 'complete-step-separator-color');
            }
        }
    }

    %igx-stepper__step--completed + %igx-stepper__step {
        &::before {
            border-top-color: var-get($theme, 'complete-step-separator-color') !important;
            border-top-style: var-get($theme, 'complete-step-separator-style') !important;
        }

        %igx-stepper__step-header {
            &::before {
                border-top-color: var-get($theme, 'complete-step-separator-color') !important;
                border-top-style: var-get($theme, 'complete-step-separator-style') !important;
            }
        }
    }

    %igx-stepper__step--simple {
        %igx-stepper__step-indicator {
            min-width: $indicator-size;
            min-height: $indicator-size;
            width: initial;
            height: initial;

            div > igx-icon,
            div > igx-avatar,
            div > igx-circular-bar {
                max-width: initial;
                max-height: initial;
            }
        }
    }

    // HORIZONTAL MODE START
    %igx-stepper--horizontal {
        %igx-stepper__header {
            flex-direction: row;
        }

        %igx-stepper__step {
            overflow: hidden;
            flex-direction: row;
            flex-grow: 1;

            &::before {
                content: '';
                width: auto;
                min-width: if($variant == 'indigo', rem(40px), rem(10px));
                height: $separator-size;
                flex: 1;
                position: relative;
                z-index: -1;
                top: $separator-title-bottom;
                border-top: $separator-size var-get($theme, 'step-separator-style') var-get($theme, 'step-separator-color');
            }

            &:first-of-type {
                flex-grow: 0;
                min-width: fit-content;

                &::before {
                    display: none;
                }
            }
        }

        %igx-stepper__step-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            &::before,
            &::after {
                content: '';
                position: absolute;
                z-index: -1;
                height: $separator-size;
                width: calc(50% - (#{$indicator-size} - #{$indicator-gap}));
                top: $separator-title-bottom;
                flex: 1;
                border-top: $separator-size var-get($theme, 'step-separator-style') var-get($theme, 'step-separator-color');
            }

            &::before {
                inset-inline-start: 0;
            }

            &::after {
                inset-inline-end: 0;
            }
        }

        %igx-stepper__step--simple {
            text-align: center;

            %igx-stepper__step-header {
                align-self: center;
                padding: $step-header-padding-simple;
                height: auto;

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

            &%igx-stepper__step {
                &::before {
                    top: calc(50% - (#{$separator-size} / 2));
                }
            }
        }

        %igx-stepper__step-title-wrapper {
            width: 100%;
        }

        %igx-stepper__step--top {
            %igx-stepper__step-header {
                justify-content: flex-end;

                &::before,
                &::after {
                    top: $separator-title-top;
                }
            }

            &%igx-stepper__step {
                &::before {
                    border-top: $separator-size var-get($theme, 'step-separator-style') var-get($theme, 'step-separator-color');
                    top: $separator-title-top;
                }
            }
        }

        %igx-stepper__step--bottom {
            %igx-stepper__step-header {
                justify-content: flex-start;
            }
        }

        %igx-stepper__step--top,
        %igx-stepper__step--bottom {
            %igx-stepper__step-title-wrapper {
                text-align: center;
            }

            %igx-stepper__step-header {
                flex-direction: column;
            }
        }

        %igx-stepper__step--start {
            %igx-stepper__step-title-wrapper {
                text-align: end;
            }
        }

        %igx-stepper__step--start,
        %igx-stepper__step--end {
            %igx-stepper__step-indicator {
                flex: 1 0 auto;
            }

            %igx-stepper__step-header {
                @if $variant != 'fluent' {
                    padding: calc(#{$step-header-padding} / 2);
                }

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

            &%igx-stepper__step {
                &::before {
                    top: calc(50% - (#{$separator-size} / 2));
                }
            }
        }

        %igx-stepper__step-content {
            flex-grow: 1;

            &:focus {
                outline: none;
            }

            &::before {
                display: none;
            }
        }

        %igx-stepper__step-content-wrapper {
            text-align: center;
        }

        %igx-stepper__body-content {
            display: flex;
        }
    }
    // HORIZONTAL MODE END
}

/// Adds typography styles for the igx-stepper component.
/// Uses the 'body-2' category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(title: 'body-2')] - The categories from the typographic scale used for type styles.
@mixin stepper-typography(
    $categories: (
        title: 'body-2',
        subtitle: 'caption',
        indicator: 'caption',
        body-content: 'body-2'
    )
) {
    $title: map.get($categories, 'title');
    $subtitle: map.get($categories, 'subtitle');
    $indicator: map.get($categories, 'indicator');
    $body-content: map.get($categories, 'body-content');

    %igx-stepper__step-indicator {
        @include type-style($indicator) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    %igx-stepper__step-title {
        @include type-style($title) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    %igx-stepper__step-subtitle {
        @include type-style($subtitle) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    %igx-stepper__step-header--current {
        %igx-stepper__step-title {
            font-weight: 600;
        }
    }

    %igx-stepper__step-content-wrapper,
    %igx-stepper__body-content {
        @include type-style($body-content) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}