/**
 * @file
 * Visual styles for form components.
 * Covers styles included on webforms and default forms like user login.
 */

/** Form elements by type **/

label:not(.form-check-label),
legend {
  font-size: 1.2em;
}

.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);
}

/* Add require asterisk to required fields */
form .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;
}

/** General buttons **/

form .button {
  width: fit-content;
}

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

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

form div[data-drupal-selector="edit-actions"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

/** Specific form overrides. These could be in their own file and own library, only loaded for those templates, if those forms had a template/hook. **/

form:is(.user-login-form, .user-register-form, .user-pass)
  :is(.form-control, .form-select) {
  width: initial; /** default bootstrap 100% width for these forms look weird **/
  max-width: 100%;
}

form:is(.user-login-form, .user-register-form, .user-pass) .field-wrapper {
  margin-bottom: 0.75em;
}