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

/// @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', 'theme');

    $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(1px, rem(1px), rem(1px))
    ), $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-header {
                background: var-get($theme, 'step-focus-background');
                color: var-get($theme, 'title-focus-color');

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

                %igx-stepper__step-subtitle {
                    color: var-get($theme, 'subtitle-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');

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

            %igx-stepper__step-subtitle {
                color: var-get($theme, 'subtitle-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;
        min-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(--ig-icon-size, #{rem(18px)});
                height: var(--ig-icon-size, #{rem(18px)});
                font-size: var(--ig-icon-size, #{rem(18px)});
            }
        } @else if $variant == 'indigo' {
            > igx-icon {
                width: var(--ig-icon-size, #{rem(14px)});
                height: var(--ig-icon-size, #{rem(14px)});
                font-size: var(--ig-icon-size, #{rem(14px)});
            }
        } @else {
            > igx-icon {
                width: var(--ig-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                height: var(--ig-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});
                font-size: var(--ig-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');
        color: var-get($theme, 'current-title-color');

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

        %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');

            %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;
        padding-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');
        }
    }

    @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:not(%igx-stepper__step-header--current) {
            background: var-get($theme, 'complete-step-background');

            %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');
            }

            &: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');
                }
            }
        }

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

        &:focus {
            %igx-stepper__step-header:not(%igx-stepper__step-header--current) {
                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-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;
        }
    }
}