/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/steppers_vars";
@import "../mixins";

.dlt-stepper-container {
    padding: 0;
    width: inherit;
    height: inherit;
    margin: 0;

    .dlt-stepper-vertical {
        list-style: none;
        padding: 0;
        margin: 0;
        font-family: $steppers-font-family;
        font-size: $steppers-font-size;
        position: relative;
        height: inherit;
        background: none;
        counter-reset: step;

        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        flex-direction: column;

        li.dlt-step {
            display: flex;
            flex-flow: row wrap;
            // flex: 1 2;
            position: relative;
            align-items: flex-start;
            width: 100%;
            padding-bottom: 40px;
            padding-left: 40px;
            margin: 0;
            transition: height 500ms ease-in-out;
            overflow: hidden;

            &:last-child {
                padding-bottom: 0;
                flex-grow: 0;
            }

            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                content: counter(step);
                counter-increment: step;
                height: $steppers-size;
                width: $steppers-size;
                color: $steppers-color-text-interactive-muted;
                background-color: $steppers-color-background-secondary;
                border: $steppers-border-width $steppers-border-style $steppers-color-input-border;
                -webkit-border-radius: $steppers-border-radii;
                border-radius: $steppers-border-radii;
                text-align: center;
                font-size: $steppers-title-font-size;
                font-weight: $steppers-font-weight;
                z-index: 1;
                line-height: $steppers-step-line-height;
            }

            &:not(:last-child):after {
                content: '';
                position: absolute;
                background: $steppers-color-input-border;
                height: calc(100% - 32px);
                width: 2px;
                left: 15px;
                z-index: 0;
                top: $steppers-size;
            }

            &:last-child:after {
                display: none;
            }

            .dlt-step-title {
                text-overflow: ellipsis;
                display: flex;
                align-content: flex-start;
                cursor: default;
                font-family: $steppers-font-family;
                font-size: $steppers-title-font-size;
                color: $steppers-color-text;
                margin: 0;
                line-height: $steppers-line-height;
                position: relative;
                font-weight: $steppers-font-weight;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;

                &:after {
                    content: attr(aria-label);
                    top: 20px;
                    position: absolute;
                    font-size: $steppers-font-size;
                    font-weight: $steppers-font-weight;
                    color: $steppers-color-text-interactive-muted;
                }

                &:focus {
                    border-bottom: $steppers-border-width $steppers-border-style $steppers-color-primary;
                    outline: none;
                }
            }

            .dlt-step-content {
                display: none;
                position: static;
                margin-top: 40px;
                margin-left: 16px;
                width: 100%;

                .dlt-step-actions {
                    margin-top: 40px;
                    margin-bottom: 0px;
                    height: auto;
                    overflow: hidden;
                }

                h4 {
                    margin-bottom: 24px;
                }

            }

            &.dlt-step-active {

                &:before {
                    background: $steppers-color-background;
                    border-color: $steppers-color-border-active;
                    color: $steppers-color-text-inverse;
                }

                &:after {
                    background: $steppers-color-border-active;
                }

                .dlt-step-title {
                    font-weight: $steppers-title-font-weight;
                }

                .dlt-step-content {
                    display: block;
                }
            }

            &.dlt-step-invalid {

                &:before {
                    content: '!';
                    background: $steppers-color-error-background;
                    border-color: $steppers-color-error;
                    color: $steppers-color-text-inverse;
                    font-size: $steppers-icon-invalid-font-size;
                    font-weight: $steppers-icon-invalid-font-weight;
                }

                &:after {
                    background: $steppers-color-error-background;
                }

                .dlt-step-title {
                    font-weight: $steppers-title-font-weight;
                }

                .dlt-step-content {
                    display: block;
                }
            }

            &.dlt-step-done {

                &:before {
                    content: $steppers-tick-icon;
                    background: $steppers-color-background-secondary;
                    border-color: $steppers-color-border-active;
                    color: $steppers-color-icon-secondary;
                    font-family: "dlt-icons";
                    font-size: $steppers-icon-tick-font-size;
                }

                &:after {
                    background: $steppers-color-border-active;
                }

            }

            &.dlt-step-disabled {

                &:before {
                    opacity: $steppers-opacity-disabled;
                    cursor: not-allowed;
                }

                &:after {
                    background: $steppers-color-text-interactive-muted;
                    opacity: $steppers-opacity-disabled;
                    cursor: not-allowed;
                }

                .dlt-step-title {
                    opacity: $steppers-opacity-disabled;
                    cursor: not-allowed;
                }

            }

        }

    }

    .dlt-stepper-horizontal {
        position: relative;

        .dlt-step-title {
            list-style: none;
            padding: 0;
            margin: 0;
            font-family: $steppers-font-family;
            font-size: $steppers-font-size;
            position: relative;
            height: inherit;
            width: 100%;
            background: none;
            counter-reset: step;

            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            flex-direction: row;

            li.dlt-step {
                display: flex;
                flex-flow: column;
                flex: 1;
                position: relative;
                align-items: flex-start;
                width: 100%;
                padding-left: 0px;
                margin: 0;

                &:last-child {
                    padding-bottom: 0;
                    flex-grow: 0;
                }

                &:before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: '';
                    content: counter(step);
                    counter-increment: step;
                    height: $steppers-size;
                    width: $steppers-size;
                    color: $steppers-color-text-interactive-muted;
                    background-color: $steppers-color-background-secondary;
                    border: $steppers-border-width $steppers-border-style $steppers-color-border-inactive;
                    -webkit-border-radius: 100%;
                    border-radius: 100%;
                    text-align: center;
                    font-size: $steppers-title-font-size;
                    font-weight: $steppers-font-weight;
                    z-index: 1;
                    line-height: $steppers-step-line-height;
                }

                &:not(:last-child):after {
                    content: '';
                    position: absolute;
                    background: $steppers-color-input-border;
                    height: 2px;
                    width: calc(100% - 32px);
                    left: $steppers-size;
                    top: 15px;
                    z-index: 1;
                }

                &:last-child:after {
                    display: none;
                }

                h3 {
                    text-overflow: ellipsis;
                    display: flex;
                    align-content: flex-start;
                    cursor: default;
                    font-family: $steppers-font-family;
                    font-size: $steppers-title-font-size;
                    color: $steppers-color-text;
                    margin: 0;
                    line-height: $steppers-line-height;
                    position: relative;
                    font-weight: $steppers-font-weight;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100%;
                    margin-top: var(--dlt-spacing-5-x, 40px);

                    &:after {
                        content: attr(aria-label);
                        top: 20px;
                        position: absolute;
                        font-size: $steppers-font-size;
                        font-weight: $steppers-font-weight;
                        color: $steppers-color-text-interactive-muted;
                    }

                }

                &.dlt-step-active {

                    h3 {
                        font-weight: $steppers-title-font-weight;
                    }

                    &:before {
                        background: $steppers-color-background;
                        border-color: $steppers-color-border-active;
                        color: $steppers-color-text-inverse;
                    }

                    &:after {
                        background: $steppers-color-background;
                    }

                }

                &.dlt-step-invalid {
                    h3 {
                        font-weight: $steppers-title-font-weight;
                    }

                    &:before {
                        content: '!';
                        background: $steppers-color-error-background;
                        border-color: $steppers-color-error;
                        color: $steppers-color-text-inverse;
                        font-size: $steppers-icon-invalid-font-size;
                        font-weight: $steppers-icon-invalid-font-weight;
                    }

                    &:after {
                        background: $steppers-color-error-background;
                    }

                }

                &.dlt-step-done {

                    &:before {
                        content: $steppers-tick-icon;
                        background: $steppers-color-background-secondary;
                        border-color: $steppers-color-border-active;
                        color: $steppers-color-icon-secondary;
                        font-family: "dlt-icons";
                        font-size: $steppers-icon-tick-font-size;
                    }

                    &:after {
                        background: $steppers-color-border-active;
                    }

                }

                &.dlt-step-disabled {

                    opacity: $steppers-opacity-disabled;
                    cursor: not-allowed;

                    &:before {
                        opacity: $steppers-opacity-disabled;
                        cursor: not-allowed;
                    }

                    &:after {
                        background: $steppers-color-text-interactive-muted;
                        opacity: $steppers-opacity-disabled;
                        cursor: not-allowed;
                    }

                }

            }
        }

        .dlt-step-content {
            list-style: none;
            padding: 0;
            margin: 0;
            font-family: $steppers-font-family;
            font-size: $steppers-font-size;
            position: relative;
            height: inherit;
            width: 100%;
            background: none;
            margin-top: 40px;

            li.dlt-step {
                display: none;
                position: static;
                width: 100%;

                .dlt-step-actions {
                    margin-top: 40px;
                    margin-bottom: 0px;
                    height: auto;
                    overflow: hidden;
                }

                &.dlt-step-active {
                    display: block;
                }
            }
        }
    }
}