@import '~@spglobal/tokens/dist/web/tokens.css';
@import '../../styles/common.scss';

.progress-tracker-wrapper {
    background: #fff;
    border-radius: 16px;

    .ca-stepper {
        display: flex;
        flex-direction: column;
    }

    .ca-wizzard-wrapper {
        // max-width: 1000px;
        margin: 1rem auto 0;
    }

    .ca-stepper-item {
        display: flex;
        margin: 9px 0;
        align-items: start;
        gap: 8px;
        position: relative;

        &:not(:last-child):after {
            content: "";
            position: absolute;
            width: 2px;
            height: calc(100%);
            background: $non-active-selected-color;
            bottom: -28px;
            left: 15px;
            // z-index: -1;
        }

        @mixin stepper-hover-cursor {
            all: unset;
            cursor: pointer;
        }

        @mixin stepper-hover-pointer {
            all: unset;
            cursor: auto;
        }

        @mixin stepper-circle {
            width: 30px;
            height: 30px;
            min-width: 30px;
            line-height: 32px;
            background: $non-active-selected-color;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            border-width: 0;
            font-size: 18px;
            z-index: 1;
        }

        .stepper-circle-enable {
            @include stepper-hover-cursor;
            @include stepper-circle;
        }

        .stepper-circle-disable {
            @include stepper-hover-pointer;
            @include stepper-circle;
            color: $non-active-selected-color;
        }

        .stepper-text-button {
            @include stepper-hover-cursor;
        }

        .spg-nested-disabled>label>span {
            color: #bfbfbf;
        }

        .spg-nested-disabled>label:before {
            background-color: #f9f9f9 !important;
            border-color: transparent !important;
        }

        .ca-stepper-content {
            &>div:nth-child(1) {
                font-size: 12px;
            }

            .spg-heading-disabled,
            .spg-text-disabled {
                color: $disable-text-color;
            }

            .step-heading-active,
            .step-heading-notSelected,
            .step-text-active,
            .step-text-notSelected {
                cursor: auto;
            }
        }

        &.ca-stepper-item-active {
            .stepper-circle-enable {
                opacity: 1;
                background-color: $active-color;
                cursor: auto;
            }
        }

        &.ca-stepper-item-crossed {
            .stepper-circle-enable {
                background-color: $completed-color;
                opacity: 1;
            }
        }

        .stepper-circle-notSelected {
            background-color: $not-selected-color
        }
    }

    button.hover-stepper-item-crossed:hover {
        div {
            color: $text-hover-color;
        }
    }

    .ca-gauge-visualization {
        margin: 2rem auto 0;

        @mixin score-tag {
            height: 20px;
            color: #fff;
            position: relative;
            text-align: center;
            line-height: 23px;
            font-size: 12px;
            font-weight: bold;
            align-self: center;

        }

        @mixin score-tag-after {
            content: "";
            position: absolute;
            left: 100%;
            top: 0;
            bottom: 0;
            border-style: dashed;
            border-width: 10px;
        }

        .score-desc {
            gap: 4px;
            align-self: center;

            @mixin score-main {
                z-index: 1;
                margin-left: -18px;
            }

            .score-main-oneToHundred {
                @include score-main;
                font-size: 38px;
            }

            .score-main-rawPd {
                @include score-main;
                font-size: 20px;
                padding-top:2px
            }

            .score-main-letterGradeNotch {
                @include score-main;
                font-size: 30px;
            }

            .fade-text {
                color: #CFCFCF;
            }

            .secondary-score-chevron {
                @include score-tag;
                align-self: center;

                &:after {
                    border-left-color: inherit;
                    @include score-tag-after;
                }
            }

            .chevron-letterGradeNotch {
                width: 68px;
            }

            .chevron-rawPd {
                width: 40px;
            }

            .chevron-oneToHundred {
                width: 40px;
                margin-bottom: 4px;
            }
        }

        .scored-items-list {
            gap: 10px;

            @mixin score-item {
                line-height: 26px;
                background: #F1F1F1;
                text-align: center;
                border-radius: 4px;
                font-weight: bold;
            }

            .rgscore-item-letterGradeNotch {
                @include score-item;
                min-width: 50px;
            }

            .rgscore-item-rawPd {
                @include score-item;
                min-width: 86px;
            }

            .rgscore-item-oneToHundred {
                @include score-item;
                min-width: 50px;
            }

            .esg-styled-span {
                cursor: default;
                color: #fff;
                background-color: #9d5700;
                padding: 3px 5px 2px 5px;
                line-height: 1.5;
                border-radius: 3px;               
            }
        }
    }
}
.esg-tooltip {
    width: 180px;

    .esg-header,
    .esg-footer {
        display: flex;
        justify-content: space-between;
    }

    .esg-header {
        margin-bottom: 10px;
    }

    .start-alignment {
        text-align: start;
    }

    .end-alignment {
        text-align: end;

        .margin-alignment {
            margin-top: 15px;
        }
    }

    .esg-bold {
        font-weight: bold;

        .bold-adjustments {
            margin-bottom: 3px;
        }
    }

    .highlighted-text {
        color: #fff;
        background-color: #9d5700;
        padding: 3px 5px 2px 5px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

.riskGauge-section {
    background: #fff;
    border-radius: 16px;

    .link-color {
        color: black;
    }

    .link-disabled{
        color: grey;
        cursor: not-allowed;
        &:hover {
            color: grey;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
    }

    .rgr-alignment {
        justify-content: center;
        height: 25px;
        align-items: center;
    }
}