DigitalConsumer.ISS/src/styles/common-validation-styles.scss

@import "@/styles/ux-variables-svg-strings.scss";

html {
    .has-error {

        // START HOVER
        &.list-button-horizontal,
        &.list-button,
        &.list-button.list-group,
        &.list-card &.option-label {
            border: 1px solid $red;
            position: relative;
            z-index: 4;

            .button-content {
                border: none;
            }

            &:hover {
                @include box-shadow-hover($red-200);
                z-index: 5;
            }

            input[type="radio"]:focus+.list-button-content {
                box-shadow: 0 0 0 2.5px $red;
            }
        }

        &.list-card {
            border: 1px solid $red;
        }

        &.ui-radio {
            &:hover {

                input[type="radio"],
                input[type="checkbox"] {
                    @include box-shadow-hover($red-200);
                }
            }
        }

        .form-check-input {
            &:focus {
                box-shadow: 0 0 0 2.5px $red;
            }
        }

        // END HOVER

        &.list-button,
        &.list-card {
            color: $red;

            input[type="checkbox"]:focus+label,
            input[type="radio"]:focus+label {
                box-shadow: 0 0 0 2.5px $red;
            }

            input[type="checkbox"]:checked+label {
                box-shadow: 0 0 0 1px $red;
            }

            &:hover {
                border-radius: 0.5rem;
            }
        }

        &.list-button-horizontal {
            color: $red;

            input[type="checkbox"]:focus+label,
            input[type="radio"]:focus+label {
                box-shadow: 0 0 1px $red;
            }
        }

        &.grid-item {
            input[type="radio"] {
                +label {
                    border: 1px solid $red;

                    &:hover {
                        background-color: $blue-100;
                        box-shadow: 0px 0px 0px 4px $red-200;
                    }
                }
            }
        }

        &.ui-radio,
        &.ui-checkbox {

            input[type="checkbox"],
            input[type="radio"],
            input[type="radio"]+label:before,
            input[type="checkbox"]+label:before {
                border: 1px solid $red;
                background-color: initial;
            }

            input[type="checkbox"]:checked+label:before {
                border: 1px solid $blue;
            }
        }

        &.textbox-question,
        &.dropdown-question {
            p {
                color: $red;
            }

            input,
            input.form-control,
            select,
            select.form-select,
            input:focus,
            input.form-control:focus,
            input.form-control:focus-within,
            select:focus,
            select.form-select:focus {
                border-color: $red;
            }

            select,
            select.form-select,
            select:focus,
            select.form-select:focus {
                background-image: url(~@/assets/img/icons/select-error.png);
            }
        }
    }

    .has-success {

        // START HOVER
        &.list-button-horizontal,
        &.list-button,
        &.list-button.list-group,
        &.list-card &.option-label {
            border: 1px solid $success;
            position: relative;
            z-index: 4;

            .button-content {
                border: none;
            }

            &:hover {
                @include box-shadow-hover($green-200);
                z-index: 5;
            }

            input[type="radio"]:focus+.list-button-content {
                box-shadow: 0 0 0 2.5px $success;
            }
        }

        &.list-card {
            border: 1px solid $success;
        }

        &.ui-radio {
            &:hover {

                input[type="radio"],
                input[type="checkbox"] {
                    @include box-shadow-hover($green-200);
                }
            }
        }

        .form-check-input {
            &:focus {
                box-shadow: 0 0 0 2.5px $success;
            }
        }

        // END HOVER

        &.list-button,
        &.list-card {
            color: $success;

            input[type="checkbox"]:focus+label,
            input[type="radio"]:focus+label {
                box-shadow: 0 0 0 2.5px $success;
            }

            input[type="checkbox"]:checked+label {
                box-shadow: 0 0 0 1px $success;
            }

            &:hover {
                border-radius: 0.5rem;
            }
        }

        &.list-button-horizontal {
            color: $success;

            input[type="checkbox"]:focus+label,
            input[type="radio"]:focus+label {
                box-shadow: 0 0 1px $success;
            }
        }

        &.grid-item {
            input[type="radio"] {
                +label {
                    border: 1px solid $success;

                    &:hover {
                        background-color: $blue-100;
                        box-shadow: 0px 0px 0px 4px $green-200;
                    }
                }
            }
        }

        &.ui-radio,
        &.ui-checkbox {

            input[type="checkbox"],
            input[type="radio"],
            input[type="radio"]+label:before,
            input[type="checkbox"]+label:before {
                border: 1px solid $success;
                background-color: initial;
            }

            input[type="checkbox"]:checked+label:before {
                border: 1px solid $blue;
            }
        }

        &.textbox-question,
        &.dropdown-question {
            p {
                color: $success;
            }

            input,
            input.form-control,
            select,
            select.form-select,
            input:focus,
            input.form-control:focus,
            input.form-control:focus-within,
            select:focus,
            select.form-select:focus {
                border-color: $success;
            }

            select,
            select.form-select,
            select:focus,
            select.form-select:focus {
                background-image: url(~@/assets/img/icons/select-success.png);
            }
        }
    }

    //Quote page radio button group
    .package-main {
        .package-wrapper {
            .has-error {
                input[type="radio"] {
                    +.package-label {
                        border: 1px solid $red;
                    }
                }
            }
        }
    }

    //Restore to default style if alert box is present
    .alertError {
        .has-error {

            &.list-button,
            &.list-card {
                border: 1px solid $gray-500;

                input:not(:focus) {
                    +label {
                        border: none;
                        box-shadow: 0 0 0 1px $gray-500;
                        border-radius: 0.5rem;
                    }
                }

                input:checked:focus {
                    +label {
                        border: none;
                        box-shadow: 0 0 0 2.5px $blue;
                        border-radius: 0.5rem;
                    }
                }

                input:checked:not(:focus) {
                    +label {
                        box-shadow: 0 0 0 1px $blue;
                        border-radius: 0.5rem;
                    }
                }

                input:focus {
                    border: 1px solid $gray-500;

                    +label {
                        box-shadow: 0 0 0 2.5px transparent;
                    }
                }

                &:hover {
                    box-shadow: 0 0 0 4px $blue-300;

                    +label {
                        box-shadow: 0 0 0 2.5px transparent;
                        border: 1px solid $blue;
                    }
                }
            }
        }
    }

    .form-test-error {
        color: $red;
        font-size: 1rem;
    }

    .form-test-invalid {
        &.btn.btn-primary {
            cursor: pointer;
            pointer-events: all;
        }
    }
}