/**
 * @file
 * Visual styles for webforms.
 */

/** General input items **/

/** Remove the fieldset's margin so margin can be on each field instead **/
.webform-submission-form .fieldset-wrapper {
  margin-bottom: 0;
}

.webform-submission-form fieldset.webform-composite-hidden-title {
  margin-top: 0;
  margin-bottom: 0;
}

/** Flexboxes **/

.webform-submission-form .webform-flex--container {
  margin: 0;
}

.webform-submission-form .webform-flexbox {
  gap: 1em;
}

/** Needed to override a default **/
@media (min-width: 768px) {
  .webform-flexbox,
  .webform-flexbox .webform-flexbox {
    margin: 0;
  }
}

/** Most field types are covered by field-wrapper, but checkboxes and radios have their own structure **/
.webform-submission-form .field-wrapper,
.webform-submission-form .checkboxes--wrapper,
.webform-submission-form .radios--wrapper,
.webform-submission-form > .form-check {
  margin-bottom: 0.75em;
}

/* Button styles for selecting from multiple options */

.webform-options-display-buttons .webform-options-display-buttons-wrapper {
  border: 3px solid var(--grey);
  border-radius: 3px;
}

.webform-options-display-buttons
  .webform-options-display-buttons-wrapper:is(:hover, :focus-within) {
  border-color: var(--laurier-gold);
  color: var(--black);
}

.webform-options-display-buttons
  .webform-options-display-buttons-wrapper
  .radio,
.webform-options-display-buttons
  .webform-options-display-buttons-wrapper
  .form-check {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0;
}

.webform-options-display-buttons .form-check-label {
  padding: 10px;
  width: 100%;
  text-align: center;
}

.webform-options-display-buttons
  .webform-options-display-buttons-wrapper:has(.form-check-input:checked) {
  border-color: var(--laurier-blue);
  color: var(--black);
}