.form-item,
.facet-item,
.form-item-webform-terms-of-service {
  position: relative;
  margin-bottom: var(--spacing);
}

fieldset,
.fieldgroup {
  padding: var(--spacing);
  border: var(--border);
  border-color: var(--fieldset-border-color);
}

legend {
  padding: 0 var(--spacing);
  font-weight: bold;
}

label,
.webform-element--title-inline > label {
  display: block;
  margin-bottom: 0;
}

input[disabled] {
  opacity: 0.5;
}

.js input.form-autocomplete {
  background-position: calc(100% - 1rem) center;
}

input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea,
select,
.select2-container--default .select2-search--dropdown .select2-search__field {
  width: 100%;
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  border: var(--border);
  border-color: var(--input-border-color);
  background-color: var(--input-bg-color);
  font-family: var(--text-input-font-family);
  font-size: var(--font-size-medium);
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-black);
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 3px;
}

.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  border-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  margin: 0.5rem;
}

.select2-results__option {
  padding: 0.5rem 1rem;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 13px;
}

/* Buttons */
button,
input[type="submit"] {
  padding:
    var(--button-padding-vertical) var(--button-padding-horizontal)
    var(--button-padding-vertical) var(--button-padding-horizontal);
  cursor: pointer;
  color: var(--button-text-color);
  border: var(--border);
  border-color: var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-bg-color);
  font-family: var(--button-font-family);
  font-size: var(--font-size-medium);
}

button:focus,
button:hover,
input[type="submit"]:focus,
input[type="submit"]:hover {
  text-decoration: underline;
  color: var(--button-text-color-hover);
  background-color: var(--button-bg-color-hover);
}

/*
  Checkboxes

  This checkboxes styling is amended CSS from the gov.uk design system:
    - https://design-system.service.gov.uk/components/checkboxes/

  We are adding a .form-checkboxes class around each of these here to make sure
  this only affects checkboxes created by Drupal. If we don't, the position absolute
  can have very unwanted effects.

  If you need to create custom checkboxes, make sure you have the same class
  wrapping them.
*/

.form-item input[type="checkbox"],
.form-checkboxes input[type="checkbox"],
.facet-item input[type="checkbox"],
.form-item-webform-terms-of-service input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.form-item input[type="checkbox"] + label,
.form-checkboxes input[type="checkbox"] + label,
.facet-item input[type="checkbox"] + label,
.form-item-webform-terms-of-service input[type="checkbox"] + label {
  display: inline-block;
  margin-left: 40px;
  padding: 8px 15px 5px;
  cursor: pointer;
  touch-action: manipulation;
}

.form-item input[type="checkbox"] + label::before,
.form-checkboxes input[type="checkbox"] + label::before,
.facet-item input[type="checkbox"] + label::before,
.form-item-webform-terms-of-service input[type="checkbox"] + label::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  content: "";
  border: 2px solid var(--checkbox-select-outline-color);
  background: transparent;
}
.form-item input[type="checkbox"] + label::after,
.form-checkboxes input[type="checkbox"] + label::after,
.facet-item input[type="checkbox"] + label::after,
.form-item-webform-terms-of-service input[type="checkbox"] + label::after {
  position: absolute;
  top: 11px;
  left: 9px;
  box-sizing: border-box;
  width: 23px;
  height: 12px;
  content: "";
  transform: rotate(-45deg);
  opacity: 0;
  border: solid;
  border-width: 0 0 5px 5px;
  border-top-color: transparent;
  background: transparent;
}

.form-item input[type="checkbox"]:focus + label::before,
.form-checkboxes input[type="checkbox"]:focus + label::before,
.facet-item input[type="checkbox"]:focus + label::before,
.form-item-webform-terms-of-service input[type="checkbox"]:focus + label::before {
  border-width: 4px;
  box-shadow: 0 0 0 3px var(--checkbox-select-focus-color);
}

.form-item input[type="checkbox"]:hover + label,
.form-checkboxes input[type="checkbox"]:hover + label,
.facet-item input[type="checkbox"]:hover + label,
.form-item-webform-terms-of-service input[type="checkbox"]:hover + label,
.form-item input[type="checkbox"]:focus + label,
.form-checkboxes input[type="checkbox"]:focus + label,
.facet-item input[type="checkbox"]:focus + label,
.form-item-webform-terms-of-service input[type="checkbox"]:focus + label {
  text-decoration: underline;
}

.form-item input[type="checkbox"]:checked + label::after,
.form-checkboxes input[type="checkbox"]:checked + label::after,
.facet-item input[type="checkbox"]:checked + label::after,
.form-item-webform-terms-of-service input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

/* Radio Buttons
  This radio styling is amended CSS from the gov.uk design system:
  - https://design-system.service.gov.uk/components/radios/

  We are adding a .form-radios class around each of these here to make sure
  this only affects radios created by Drupal. If we don't, the position absolute
  can have very unwanted effects.

  If you need to create custom radios, make sure you have the same class
  wrapping them.
*/

.webform-type-radios .form-item,
.webform-type-webform-radios-other .form-item-radios-other--radios {
  position: relative;
  display: block;
  clear: left;
  min-height: 40px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.webform-type-radios .form-item input,
.webform-type-webform-radios-other .form-item-radios-other--radios input {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.webform-type-radios .form-item label,
.webform-type-webform-radios-other .form-item-radios-other--radios label {
  display: inline-block;
  margin-bottom: 0;
  padding: 8px 15px 5px;
  cursor: pointer;
  touch-action: manipulation;
}
.webform-type-radios .form-item [type="radio"] + label::before,
.webform-type-webform-radios-other .form-item [type="radio"] + label::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  content: "";
  border: 2px solid var(--radio-select-outline-color);
  border-radius: 50%;
  background: transparent;
}
.webform-type-radios .form-item [type="radio"] + label::after,
.webform-type-webform-radios-other .form-item [type="radio"] + label::after {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0;
  height: 0;
  content: "";
  opacity: 0;
  border: 10px solid currentColor;
  border-radius: 50%;
  background: currentColor;
}
.webform-type-radios .form-item [type="radio"]:focus + label::before,
.webform-type-webform-radios-other .form-item [type="radio"]:focus + label::before {
  border-width: 4px;
  box-shadow: 0 0 0 4px var(--radio-select-focus-color);
}
.webform-type-radios .form-item input:checked + label::after,
.webform-type-webform-radios-other .form-item input:checked + label::after {
  opacity: 1;
}
.webform-type-radios .form-item:last-child,
.webform-type-radios .form-item:last-of-type {
  margin-bottom: 0;
}

/* Description Field - needs to come before the file upload description items */
.form-item .description {
  padding: 1rem;
  border: var(--form-item-description-border);
  background-color: var(--form-item-description-bg-color);
}
.form-item input + .description {
  border-top: 0;
}
.form-item .description + input {
  border-top: 0;
}

.form-item .description .webform-element-more--content {
  padding: 1rem;
}

/*
  This is just in case we have a description field in a fieldset that contains
  checkboxes or radios. It stops the first item from hitting the bottom of the
  description.
*/
.fieldset-wrapper > .field-prefix + .form-checkboxes,
.fieldset-wrapper > .field-prefix + .form-item-radios {
  margin-top: var(--spacing);
}

/* File Upload */
input[type="file"],
.form-item-managed-file-button .webform-file-button {
  display: inline-block;
  margin: 0;
  padding: 1rem;
  cursor: pointer;
  border: var(--file-upload-border);
  border-color: var(--file-upload-border-color);
  border-left-width: var(--file-upload-border-left-size);
}
input[type="file"]:focus,
input[type="file"]:hover,
.form-item-managed-file-button .webform-file-button:focus,
.form-item-managed-file-button .webform-file-button:focus,
.form-managed-file:focus-within .webform-file-button,
.form-managed-file .webform-file-button:hover {
  text-decoration: underline;
  color: var(--file-upload-text-hover-color);
  background-color: var(--file-upload-bg-hover-color);
  font-weight: bold; /* Because text-decoration doesn't work on input[type]"file"] */
}
.form-item-managed-file .description,
.form-item-managed-file-multiple .description,
.form-item-managed-file-button .description {
  position: relative;
  top: -1px;
  width: auto;
  max-width: 768px;
  border: var(--file-upload-border);
  border-color: var(--file-upload-border-color);
  border-left-width: var(--file-upload-border-left-size);
}
.form-item-managed-file .description br,
.form-item-managed-file-multiple .description br,
.form-item-managed-file-button .description br {
  margin-bottom: var(--spacing);
}

.facets-form fieldset {
  padding: 0;
  border: none;
}

.facets-form .facets-widget > ul,
.facets-form .facets-widget > ul ul {
  list-style: none;
  padding: 0;
}

.facets-form .facets-widget > ul > li + li {
  margin-block-start: var(--spacing-largest);
}

.facets-form .form-actions:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
  align-items: center;
}