/* Material Components Web overrides.
 * This file loads after cas.css via cas.standard.css.file.
 */

/* Use the native focus ring consistently on login-page button controls. */
.reveal-password:focus-visible,
#submitBtn:focus-visible,
.banner-dismissible .close:focus-visible {
  outline: revert;
  outline-offset: revert;
}

/* Increase vertical spacing between fields in the primary login form. */
#login-form-controls .my-3 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Outlined fields use the MDC notched outline, not the input's native border. */
.mdc-text-field--outlined > .mdc-text-field__input {
  border: none;
}

/* Use MDC's standard resting gray for enabled, unfocused outlines by default. */
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
  .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
  .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
  .mdc-notched-outline__trailing,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
    .mdc-text-field--focused
  ):hover
  .mdc-notched-outline
  .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
    .mdc-text-field--focused
  ):hover
  .mdc-notched-outline
  .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
    .mdc-text-field--focused
  ):hover
  .mdc-notched-outline
  .mdc-notched-outline__trailing {
  border-color: rgba(0, 0, 0, 0.75);
}

/* Use a darker neutral outline while focused by default. */
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
  .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
  .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
  .mdc-notched-outline__trailing {
  border-color: rgba(0, 0, 0, 0.75);
  /* border-color: var(--cas-theme-primary, #be0000); */
}

/* Match invalid outlines and labels to the validation text color. */
.mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-notched-outline__trailing,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(
    .mdc-text-field--focused
  ):hover
  .mdc-notched-outline
  .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(
    .mdc-text-field--focused
  ):hover
  .mdc-notched-outline
  .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(
    .mdc-text-field--focused
  ):hover
  .mdc-notched-outline
  .mdc-notched-outline__trailing,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
  .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
  .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
  .mdc-notched-outline__trailing {
  border-color: var(--cas-theme-primary, #be0000);
}

/* Keep MDC's blur-triggered invalid state visually neutral before submission. */
#fm1:not(.validation-attempted)
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-notched-outline__leading,
#fm1:not(.validation-attempted)
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-notched-outline__notch,
#fm1:not(.validation-attempted)
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-notched-outline__trailing {
  border-color: rgba(0, 0, 0, 0.75);
}

#fm1:not(.validation-attempted) .mdc-floating-label--shake {
  animation: none;
}

/* Keep login labels dark in every state except invalid and floating. */
#usernameSection .mdc-floating-label,
#passwordSection .mdc-floating-label {
  color: rgba(0, 0, 0, 0.75);
}

/* Use the validation color only after submission and while a label floats. */
#fm1.validation-attempted
  #usernameSection
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-floating-label--float-above,
#fm1.validation-attempted
  #passwordSection
  .mdc-text-field--invalid:not(.mdc-text-field--disabled)
  .mdc-floating-label--float-above {
  color: var(--cas-theme-primary, #be0000);
}

.mdc-text-field--focused .mdc-text-field__input {
  caret-color: black;
}

/* Validation messages become prominent after a submission attempt. */
#fm1.validation-attempted
  .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid
  + .mdc-text-field-helper-line
  .mdc-text-field-helper-text--validation-msg {
  color: var(--cas-theme-primary, #be0000);
}

/* Do not reveal required-field messages until the user attempts to sign in. */
#fm1:not(.validation-attempted) #usernameValidationMessage,
#fm1:not(.validation-attempted) #passwordValidationMessage {
  display: none;
}

/* Prefix required-field messages with the triangle used by danger banners. */
#usernameValidationMessage::before,
#passwordValidationMessage::before {
  content: "\F0026";
  display: inline-block;
  margin-right: 0.35rem;
  font-family: "Material Design Icons";
  font-size: 1.3em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: -0.1em;
}