/*
    Copyright (c) 2001 Envision Technology Partners, Inc. All rights reserved.
*/
/* 
    ReSharper disable InvalidValue 
    This is for the / "Required field indicator" which adds alt text for svgs used in the ::after pseudo-element
*/

/* Validation styles */
:root {
    --error-color: #721c24;
    --error-background-color: #f2dede;
}

/*
Makes the label text bold for an input that is required.
*/
.form-group:has(input[required]) > .form-label, label.required-readonly, legend.required-readonly, .form-group:has(textarea[required]) > .form-label {
    font-weight: bold;
}
    /*
    Adds the red asterisk after a label for an input that is required.
    */
    .form-group:has(input[required]) > .form-label::after {
        content: url(../images/icons/asterisk.svg) / "Required field indicator";
        /*content: " *"; I switched to using the svg because the NVDA screen reader was reading the label and then saying "star"  */
        color: var(--error-color);
        margin-left: 3px;
    }

    label.required-readonly::after {
        content: url(../images/icons/asterisk.svg) / "Required field indicator";
        color: var(--error-color);
        margin-left: 3px;
    }

    legend.required-readonly::after {
        content: url(../images/icons/asterisk.svg) / "Required field indicator";
        color: var(--error-color);
        margin-left: 3px;
    }

    .form-group:has(textarea[required]) > .form-label::after {
        content: url(../images/icons/asterisk.svg) / "Required field indicator";
        color: var(--error-color);
        margin-left: 3px;
    }

.form-group:has(select[required]) > .form-label {
    font-weight: bold;
}

    .form-group:has(select[required]) > .form-label::after {
        content: url(../images/icons/asterisk.svg) / "Required field indicator";
        color: var(--error-color);
        margin-left: 3px;
    }

/* 
Sets color of the input label.
Based on the parent div having the has-error class.
This will be done (adding has-error class) via the JavaScript validation routines.
*/
div.form-group.has-error > label {
    color: var(--error-color);
    position: relative;
}

    /* Since we already used ::after for the asterisk * we will use ::before and push it to the right */
    div.form-group.has-error > label::before {
        color: var(--error-color);
        font-family: "bootstrap-icons";
        content: "\F33A" / "Error inicator";
        position: absolute;
        left: 105%;
    }

.form-group.has-error:has(label.visually-hidden)::before {
    color: var(--error-color);
    font-family: "bootstrap-icons";
    content: "\F33A" / "Error inicator";
    margin-left: 5px; /* Adjust spacing as needed */
    display: block; /* Ensure the pseudo-element is displayed */
    height: 18px;
}


/* 
Sets the border color of an input based on aria-invalid attribute.
This will be done via the JavaScript validation routines.
*/
input[aria-invalid], select[aria-invalid], textarea[aria-invalid] {
    border: solid 2px var(--error-color) !important;
    outline: 1px solid var(--error-color) !important;
}

/*
Sets the color of the validation message.
*/
.field-validation-error {
    color: var(--error-color) !important;
}

/*
This is for any Bootstrap 5 input group add-ons
Sets the border, font and background color to indicate error state
*/
div.form-group.has-error > div > div.input-group-text {
    color: var(--error-color);
    border-color: var(--error-color);
    background-color: var(--error-background-color);
}

/* 
    This may or may not pass AA. 
    This with the text inside the control is AA, 
    but the control against the white background is not.
*/
.form-control[readonly] {
    cursor: not-allowed;
    background-color: var(--bs-gray-300);
    opacity: 1;
}

select[aria-disabled='true'] {
    cursor: not-allowed;
    background-color: var(--bs-gray-300);
    opacity: 1;
    pointer-events: none;
}

/* Style radio buttons and checkboxes and their labels when readonly */
.form-check-input[aria-disabled=true] {
    cursor: not-allowed;
    background-color: var(--bs-gray-500);
    opacity: 1;
    pointer-events: none;
}
.form-check-input[aria-disabled=true] ~ label {
        pointer-events: none;
}
div.form-check:has(input[aria-disabled=true]) {
    cursor: not-allowed;
}


/* Sets the color of the legend for the has-error class */
legend.has-error {
    color: var(--error-color);
    position: relative;
    width: auto !important;
}

/* Sets the error indicator icon next to the legend */
    legend.has-error::before {
        color: var(--error-color);
        font-family: "bootstrap-icons";
        content: "\F33A" / "Error inicator";
        position: absolute;
        left: 105%;
    }

    legend.has-error.col-auto::before {
        left: 95%;
    }