/**
  * @file
  * Webforms and other forms.
  **/

/** General input items **/
.form-control,
.form-select,
.form-checkbox,
.form-radio {
  border: 1px solid var(--black);
}

.form-control:focus,
.form-select:focus,
.form-checkbox:focus,
.form-radio:focus {
  border: 1px solid var(--white);
  box-shadow: 0 0 0 0.2rem var(--laurier-gold);
}

.form-check-input:checked {
  background-color: var(--laurier-blue);
  border-color: var(--laurier-blue);
}

legend {
  font-size: 1rem;
}

/* Add require asterisk to nessesary fields */
.form-required::after {
  content: "";
  vertical-align: super;
  display: inline-block;
  background-image: url(../../images/required.svg);
  background-repeat: no-repeat;
  background-size: 7px 7px;
  width: 7px;
  height: 7px;
  margin: 0 0.3em;
}

/** Webforms general **/
.webform-submission-form .form-control {
  width: 100%;
}

.webform-submission-form .button,
.webform-submission-form .form-control,
.webform-submission-form .form-select {
  margin-bottom: 1em;
}

/* Multistep progress bar color contrast changes. Many of these rules need these exact selectors to take priority over webform defaults. */
.progress-title {
  color: var(--black);
}

.webform-progress-tracker
  .progress-step:not(.is-active)
  .progress-marker::before,
.webform-progress-tracker .progress-step:hover .progress-marker::before,
.webform-progress-tracker .progress-step .progress-marker::after {
  background-color: var(--black);
}

.progress-step.is-active .progress-marker::before,
.webform-progress-tracker
  .progress-step.is-active:hover
  .progress-marker::before {
  background-color: var(--laurier-gold);
  color: var(--black);
  border-style: solid;
  border-color: var(--black);
  border-radius: 4px;
}

.progress-step .progress-marker::before {
  background-color: var(--laurier-gold);
  color: var(--white);
}

/** Multistep form prev and next buttons **/
.webform-submission-form .webform-button--next[type="submit"],
.webform-submission-form .webform-button--previous[type="submit"],
.webform-submission-form .webform-button--submit[type="submit"] {
  margin: 1em 0;
  padding: 10px 10px;
  width: fit-content;
}

/** Changes for the user login, creation, and password reset forms **/
form:is(.user-login-form, .user-register-form, .user-pass) .form-wrapper,
form:is(.user-login-form, .user-register-form, .user-pass) .form-wrapper div {
  margin-top: 1em;
}

form:is(.user-login-form, .user-register-form, .user-pass)
  div[data-drupal-selector="edit-actions"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}

form:is(.user-login-form, .user-register-form, .user-pass)
  .form-submit[type="submit"] {
  width: fit-content;
}

form:is(.user-login-form, .user-register-form, .user-pass) .button.cancel {
  border-radius: 5px;
  border: 1px solid var(--laurier-red);
  background-color: var(--laurier-red);
  color: var(--white);
  text-decoration: none;
}

form:is(.user-login-form, .user-register-form, .user-pass)
  .button.cancel:is(:hover, :focus) {
  background-color: var(--white);
  color: var(--laurier-red);
}