DigitalConsumer.ISS/src/styles/common-error-styles.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 {
              border: 1px solid $red;
              &:focus {
                  border: 1px solid transparent;
                  box-shadow: 0 0 0 2.5px $red;
              }

              &:hover {
                  box-shadow: 0px 0px 0px 4px $red-200;
                  border-radius: 0.5rem;
                  border: 1px solid $red;
              }
          }
          select,
          select.form-select {
              background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
              background-repeat: no-repeat;
              background-position: right 0.75rem center;
              background-size: 16px 12px;
          }
      }
  }
  //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: 0.875rem;
      font-weight: 500;
  }
  

  .form-test-invalid {
    &.btn.btn-primary {
        color: $gray-600;
        background: $gray-200;
        cursor: pointer;
        pointer-events: all;
        font-weight: $font-weight-normal;
    }
    &.btn.btn-primary:hover,
    &.btn.btn-primary:focus {
        background: $gray-200;
        box-shadow: none;
    }
    &.btn.btn-primary:focus-visible {
        box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700;
    }
}
}