@import '@spglobal/ca-mfe-package-utils/dist/styles/global';

.scoring-input-container {

    .section-title {
        width: 50%;
        padding-bottom: 12px;
    }

    .group-title {
        background-color: #F2F2F2;
        border: 1px solid #E3E3E3;
        text-transform: uppercase;
        padding: 3px 0 !important;
        line-height: unset !important;
        margin-bottom: 5px;
    }

    .groups-section {
        gap: 36px;

        .groups {
            flex: 0 50%;
        }

        .valid-input-group {
            border: 1px solid #afafaf !important;
        }
    }

    .non-fin-sections {
        display: flex;
        flex-wrap: wrap;
    }

    .label-container {
        flex: 0 45%;
        label {
            font-weight: normal !important;
        }
    }

    .input-wrapper{
        height: 30px;
        align-content: center;
    }

    .input-container {
        flex: 0 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .existing-value {
            width: 30%;
            text-align: right;
        }
        & > div:nth-child(2) {
            width: 50%;
        }
        :global {
            .ca-input-form-container {
                width: 80% !important;
                &:has(.invalid-input-group){
                    border: 1px solid #b20023 !important;
                }
                .ca-input-form-hasNoError {
                    div[data-input="input-group"] {
                        &:has(.invalid-input-group){
                            border-color: #afafaf !important;
                        }
                    }
                }
            }
            .ca-input-hasError{
                .ca-input-form-container {
                    &:has(.invalid-input-group){
                        border: none !important;
                    }
                }
            }
            .ca-input-suffix {
                margin-top: 4px !important;
            }
        }
    }

    .input-value {
        text-align: right;
    }

    .mandatory-bg {
        background-color: #e4f0fe;
        padding: 0 4px;
    }

    .mandatory-bg + .invalid-input-group {
        border: 1px solid #b20023 !important;
    }

    .opacity {
        opacity: 0.3;
    }

    .color-green {
        color: $prop-color;
    }

    .non-financial-container {
        .label-section {
            width: 180px;
        }
        .input-section {
            display: flex;
            align-items: center;

            .field-value {
                margin-right: 40px;
            }

            :global {
                .ca-input-suffix {
                    margin-top: 4px !important;
                }
            }
        }
    }

    .asterisk {
        color: red;
    }

    :global {
        .non-financials {
            & > div:nth-child(even):has(div .select-edit-icon)::before,
                & > div:nth-child(even):has(div .spg-label)::before{
                content: '';
                width: 1px;
                height: 22px;
                background-color: #000;
                margin-right: 12px;
                margin-bottom: 4px;
            }
        }

        .select-wrapper-default {
            width: auto !important;
            max-width: 80px;
            margin-right: 15px !important;
        }
        .spg-popover {
            display: inline-block !important;
            cursor: pointer;
        }

        .wrapper-title {
            padding: 0 3px 0 0 !important;
        }

        .select-edit-container{
            & > div {
                padding: 2px !important;
            }
        }

        .select-list {
            min-width: 100px !important;
            margin-right: 20px !important;

            & > div:nth-child(2) {
                width: auto !important;
                min-width: 100px;
                border-top: 1px solid #000;
            }
        }

        .invalid-icon {
            visibility: hidden;
        }

        .spg-label {
            font-weight: 400 !important;
        }

        .input-field:has(.ca-input-hasError) .invalid-icon {
            visibility: visible;
        }

        label.spg-label div div{
            display: inline-block;
        }
    }
    .cursor-pointer {
        cursor: pointer;
    }
}

:global {
    .popover-icon-section {
        cursor: pointer;

        & > div {
            display: inline-block;
        }
    }
    .scoring-inputs-popover {
        width: auto !important;
        max-width: 500px !important;
        max-height: 400px !important;
        overflow: hidden;
        margin-bottom: 10px !important;

        & > div {
            width: 100% !important;
            overflow-y: auto;
        }
        .skelton-lines {
            margin-top: 3px;
            height: 38px;
            width: 250px;

            & > div:nth-child(2){
                top: 13px !important;
            }
    
            & > div:nth-child(3){
                top: 26px !important;
            }
        }
    }
    .scoring-inputs-popover.spg-tooltip {
        border-top: 4px solid #000 !important;
        
        .spg-popover__content{
            margin: 10px 8px;
        }
    }
}

.financial-statements-container {
    .gap-20 {
        gap: 20px;
    }

    .gap-40 {
        gap: 40px;
    }

    :global{
        .spg-accordion__content {
            padding: 16px 0 0 0 !important;
        }
    }

    .color-green {
        color: $prop-color;
    }
}