@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;

@mixin msk-stepper-legacy {
    .msk-stepper {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        font-family: v.$msk--global-font-family;
        padding: 24px;

        &.msk-stepper-horizontal {
            .stepper-step-container {
                &:first-child {
                    align-items: flex-start;
                    text-align: left;

                    .stepper-step {
                        align-items: flex-start;
                    }
                }

                &:nth-child(2) {
                    .stepper-connector-container {
                        left: calc(-90%);
                    }
                }

                &:last-child {
                    align-items: flex-end;
                    text-align: right;

                    .stepper-step {
                        align-items: flex-end;
                    }

                    .stepper-connector-container {
                        right: calc(10%);
                    }
                }
            }
        }

        .stepper-step-container {
            flex: 1;
            padding-left: 8px;
            padding-right: 8px;
            position: relative;

            .stepper-step {
                align-items: center;
                display: flex;
                flex-direction: column;
            }

            .step-button {
                align-items: center;
                background-color: c.$msk--white-0;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                display: flex;
                font-size: 16px;
                gap: 10px;
                justify-content: center;
                margin: 0;
                padding: 0;
                z-index: 2;

                &.active {
                    background: c.$msk--white-0;
                    box-shadow: 0 0 0 2px c.$msk--purple-80,
                        0 0 0 2px c.$msk--white-0;
                    padding: 1px;

                    .step-button-content {
                        border: 4px solid c.$msk--purple-60;
                        display: flex;
                        justify-content: center;
                        padding: 7px;
                    }
                }

                .step-button-content {
                    border: 4px solid c.$msk--cool-gray-20;
                    border-radius: 8px;
                    color: c.$msk--cool-gray-70;
                    font-family: v.$msk--global-font-family;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 500;
                    gap: 10px;
                    line-height: 16px;
                    margin: 0;
                    min-width: 38px;
                    padding: 8px;
                    text-align: center;
                    text-shadow: 1px 1px 0 0 c.$msk--warm-gray-10;

                    * {
                        font-size: 18px;
                    }

                    .step-button-text {
                        align-items: center;
                        display: flex;
                        filter: drop-shadow(1px 1px 0 c.$msk--warm-gray-10);
                        height: 18px;
                        justify-content: center;
                        width: 18px;
                    }

                    &.active {
                        border: 4px solid c.$msk--purple-60;
                        color: c.$msk--cool-gray-70;
                    }

                    &.completed {
                        background-color: c.$msk--purple-60;
                        border: 4px solid c.$msk--purple-60;
                        color: c.$msk--white-0;

                        * {
                            color: c.$msk--white-0;
                        }

                        .step-button-text {
                            filter: drop-shadow(1px 1px 0 c.$msk--purple-90);
                        }
                    }
                }
            }

            .stepper-connector-container {
                left: calc(-50% + 2em - 13px);
                position: absolute;

                // right: calc(50% + 2em - 11px);
                right: calc(50% + 2em - 13px);
                top: calc(1em + 2.5px);

                // z-index: 3;

                &:has(.active) {
                    // z-index: 1;
                }

                .stepper-connector {
                    border-color: c.$msk--cool-gray-20;
                    border-top-style: solid;
                    border-top-width: 5px;
                    display: block;

                    &.completed {
                        border-color: c.$msk--purple-60;
                    }

                    &.active {
                        border-color: c.$msk--purple-60;
                    }
                }
            }

            .label-container {
                &.active {
                    .label {
                        font-weight: 500;
                    }
                }
            }
        }

        &.msk-stepper-small {
            .stepper-step {
                .step-button {
                    border: none;
                    border-radius: 7px;
                    gap: 5px;
                    min-height: 27px;

                    &.active {
                        box-shadow: 0 0 0 1px c.$msk--purple-80;

                        .step-button-content {
                            border: 2px solid c.$msk--purple-60;
                        }
                    }

                    .step-button-content {
                        border: 2px solid c.$msk--cool-gray-20;
                        border-radius: 6px;
                        font-size: 16px;
                        line-height: 12px;
                        max-width: 27px;
                        min-width: 23px;
                        padding: 4px;

                        * {
                            font-size: 14px;
                        }

                        .step-button-text {
                            height: 14px;
                            width: 14px;
                        }

                        &.active {
                            border: 2px solid c.$msk--purple-60;
                        }

                        &.completed {
                            border: 2px solid c.$msk--purple-60;

                            * {
                                color: c.$msk--white-0;
                            }
                        }
                    }
                }

                .label {
                    font-size: 14px;
                }
            }

            .stepper-connector-container {
                left: calc(-50% + 2em - 21px);
                right: calc(50% + 2em - 21px);
                top: calc(13px);

                .stepper-connector {
                    border-top-width: 2px;
                }
            }
        }

        &.msk-stepper-vertical {
            flex-direction: column;

            .stepper-step-container {
                display: flex;
                flex-direction: column;
            }

            .stepper-step {
                flex-direction: row;
                gap: 8px;
                max-height: 50px;
                position: relative;

                .step-button {
                    min-height: auto;
                    padding: 0;

                    &.active {
                        padding: 1px;

                        .step-button-content {
                            padding: 8px;
                        }
                    }
                }

                .label-container {
                    margin-left: 5px;
                }
            }

            .stepper-connector-container {
                display: flex;
                justify-content: center;
                margin-top: -13px;
                max-width: 40px;
                min-height: 100px;
                position: initial;
                right: 0;

                .stepper-connector {
                    background-color: c.$msk--cool-gray-20;
                    border: none;
                    height: 100%;
                    position: absolute;
                    width: 5px;

                    &.completed {
                        background-color: c.$msk--purple-60;
                    }

                    &.active {
                        background-color: c.$msk--purple-60;
                    }
                }
            }

            &.msk-stepper-small {
                .stepper-step {
                    .step-button {
                        &.active {
                            .step-button-content {
                                padding: 4px;
                            }
                        }
                    }
                }

                .stepper-connector-container {
                    max-width: 25px;
                    min-height: 50px;
                }

                .stepper-connector {
                    width: 2px;
                }
            }
        }
    }
}

@mixin msk-stepper {
    $msk--stepper-inactive-color: tk.$msk--color-bg-track;
    $msk--stepper-active-color: tk.$msk--color-bg-progress-filled;

    // level 1
    .msk-stepper-container {
        // level 2
        .msk-stepper {
            display: flex;
            justify-content: space-between;
            position: relative;

            &::before {
                background-color: $msk--stepper-inactive-color;
                content: '';
                position: absolute;
                z-index: 0;
            }

            .msk-stepper--progress-bar {
                background-color: $msk--stepper-active-color;
                position: absolute;
                z-index: 1;
            }

            // level 4
            .stepper-step {
                display: flex;

                // level 5
                // actual button
                .step-button {
                    align-items: center;
                    background-color: tk.$msk--color-bg;
                    border-color: tk.$msk--color-border-progress;
                    border-radius: m.msk-rem(8px);
                    border-style: solid;
                    border-width: m.msk-rem(4px);
                    color: tk.$msk--color-content-progress;
                    display: flex;
                    font-weight: 500;
                    justify-content: center;
                    z-index: 2;

                    .msk-icon {
                        color: tk.$msk--color-content-progress;
                    }

                    &.completed {
                        background-color: $msk--stepper-active-color;
                        border-color: $msk--stepper-active-color;
                        color: c.$msk--white-0;

                        .msk-icon {
                            color: c.$msk--white-0;
                        }
                    }

                    &.active {
                        border-color: $msk--stepper-active-color;
                        box-shadow: 0 0 0 m.msk-rem(2px) c.$msk--white-0,
                            0 0 0 m.msk-rem(4px) $msk--stepper-active-color;
                    }

                    .step-button-content {
                        // text and icon container
                        .step-button-text {
                            line-height: 1;
                            text-align: center;
                        }
                        &.completed {
                            color: tk.$msk--color-content-progress-complete;
                        }
                    }
                }

                // bottom label
                .label-container {
                    &.active {
                        .label {
                            font-weight: 500;
                        }
                    }
                }
            }

            &.msk-stepper-small {
                .step-button {
                    height: m.msk-rem(24px);
                    width: m.msk-rem(24px);
                }
            }

            &.msk-stepper-default {
                // actual button
                .step-button {
                    height: m.msk-rem(32px);
                    width: m.msk-rem(32px);
                }
            }

            &.msk-stepper-horizontal {
                &::before {
                    height: 4px;
                    left: 0;
                    right: 0;
                    top: 14px;
                }

                .msk-stepper--progress-bar {
                    height: 4px;
                    left: 0;
                    top: 14px;
                }

                &.msk-stepper-small {
                    &::before {
                        top: 10px;
                    }

                    .msk-stepper--progress-bar {
                        top: 10px;
                    }
                }

                // level 3
                .stepper-step-container {
                    .label-container {
                        padding: 0;
                        position: absolute;
                        bottom: -3px;
                        transform: translateY(100%);
                        line-height: 1.3;
                        color: tk.$msk--color-content-progress;
                    }
                    &:not(:first-child):not(:nth-last-child(2))
                        .label-container {
                        @media (min-width: 768px) {
                            left: -50px;
                            right: -50px;
                            text-align: center;
                        }
                    }

                    &:first-child {
                        .stepper-step {
                            align-items: flex-start;
                        }

                        .label-container {
                            padding: 0;

                            @media (min-width: 768px) {
                                right: -100px;
                                left: 1px;
                                text-align: left;
                            }
                        }
                    }

                    // second to last child
                    &:nth-last-child(2) {
                        .stepper-step {
                            align-items: flex-end;
                        }

                        .label-container {
                            padding: 0;
                            @media (min-width: 768px) {
                                left: -100px;
                                right: 0px;
                                text-align: right;
                            }
                        }
                    }
                }

                // level 4
                .stepper-step {
                    align-items: center;
                    flex-direction: column;
                    position: relative;
                }
            }

            &.msk-stepper-vertical {
                align-items: flex-start;
                flex-direction: column;

                &::before {
                    bottom: 0;
                    left: 14px;
                    top: 0;
                    width: 4px;
                }

                .msk-stepper--progress-bar {
                    left: 14px;
                    top: 0;
                    width: 4px;
                }

                &.msk-stepper-small {
                    &::before {
                        left: 10px;
                    }

                    .msk-stepper--progress-bar {
                        left: 10px;
                    }
                }

                // level 3
                .stepper-step-container {
                    .label-container {
                        align-items: center;
                        display: flex;
                        padding-left: 0.5rem;
                    }
                }
            }
        }
    }
}