@use '../../styles/variables';
@use 'mixin';

.thy-stepper {
    @include mixin.stepper-size(
        variables.$stepper-header,
        variables.$stepper-padding,
        variables.$stepper-header-padding,
        variables.$stepper-number-size,
        variables.$stepper-selected-icon-bottom
    );
    .thy-stepper-header-container {
        display: flex;
        border-bottom: 1px solid variables.$gray-200;
        align-items: center;
        .thy-stepper-header {
            display: flex;
            align-items: center;
            color: variables.$gray-600;
            position: relative;
            .thy-step-number {
                text-align: center;
                border-radius: 100%;
                text-align: center;
                background-color: variables.$gray-200;
                transition:
                    background-color 0.3s,
                    border-color 0.3s;
            }
            .thy-step-icon {
                display: none;
                font-size: 24px;
                transition:
                    background-color 0.3s,
                    border-color 0.3s;
            }
            .thy-step-label {
                padding: variables.$stepper-label-padding;
            }
            &.thy-stepper-header-active {
                color: variables.$primary;
                .thy-step-number {
                    color: variables.$white;
                    background-color: variables.$primary;
                }
                &:not(.thy-stepper-header-selected):not(:last-child) {
                    .thy-step-number {
                        display: none;
                    }
                    .thy-step-icon {
                        display: block;
                    }
                }
            }
            &.thy-stepper-header-selected {
                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    border-left: 8px solid transparent;
                    border-top: 6px solid transparent;
                    border-right: 8px solid transparent;
                    border-bottom: 6px solid variables.$gray-200;
                }
                &::after {
                    border-bottom-color: variables.$bg-default;
                }
            }
        }
        .thy-stepper-line {
            flex: auto;
            border-top: 1px solid variables.$gray-200;
            margin: variables.$stepper-line-margin;
            min-width: variables.$stepper-line-min-width;
            &.thy-stepper-line-active {
                border-color: variables.$primary;
            }
        }
    }
}
