/* Form adjustments */

form > .form-item,
.form-wrapper {
  margin-block: 1rem;
}

.form-item:has(.form-control.error),
.form-type-select.has-error,
.form-wrapper.has-error,
.form-item:has(.form-item--error-message),
.captcha:has(.form-item--error-message) {
  outline: 0.25rem solid
    color-mix(in srgb, var(--color-raspberry) 65%, transparent);
  outline-offset: 0.5rem;
  margin-block: 1.5rem;

  .form-item--error-message,
  .invalid-feedback {
    color: var(--color-dk-raspberry);
    font-weight: bold;
  }
}

/* On checkboxes the error shows as an alert */
.form-wrapper.has-error .alert {
  background: transparent;
  color: var(--color-dk-raspberry);
  border: none;
  padding: 0;
}

.form-type-textarea {
  margin-block-end: 2rem;
}

legend {
  font-size: 1rem;
}

form {
  --bs-border-color: var(--color-grey-48);
  label,
  .form-composite legend,
  fieldset legend {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
}

.form-control,
.form-select {
  &:is(:focus, :focus-within, :focus-visible):not(.btn) {
    border-color: var(--color-raspberry);
    outline-offset: 0;
    outline: 2px solid var(--color-raspberry);
  }
}

.form-select {
  width: auto;

  &:is(:focus, :focus-visible) {
    border-color: var(--color-grey-48);
    outline-offset: 0;
    outline-style: solid;
  }
}

.form-check,
.form-check-input,
.form-radio,
.checkbox {
  margin-bottom: 0.35rem;

  label {
    font-weight: normal;
    font-size: 1em;
    margin: 0;
  }

  &:checked {
    background-color: var(--color-dk-raspberry);
  }

  &:is(:focus, :focus-visible) {
    border-color: var(--color-grey-48);
    outline-offset: 0;
    outline-style: solid;
  }
}

.form-actions {
  display: flex;
  gap: 1rem;
  .btn {
    flex: 0 1;
  }
}

.captcha {
  margin-block-start: 2rem;
}

.js-form-item-feed-me {
  display: none;
}