/*
  We always want to show help texts. The fact that Wagtail hides
  these until there's a mouse-over is not user-friendly enough.
*/

body.ready .help {
  opacity: unset !important;
}

body.ready .help .icon-help-inverse {
  display: none;
}

.object .object-help {
  padding-top: 10px !important;
  padding-left: 0 !important;
}

.field-content textarea {
  /* need to use !important as there's script from jQuery
  that's overriding the CSS resize property */
  resize: vertical !important;
}

@media screen and (min-width: 50em) {
  body.ready .help {
    min-width: 14em;
  }
  .field-content {
    width: 100% !important;
  }
  .object fieldset {
    max-width: unset !important;
  }
  .object .object-help {
    padding-bottom: 40px;
    margin-left: 10px;
    padding-left: 3em !important;
  }
}

/*
  And make sure the label names are full width instead of 16%...
*/
fieldset ul li div label {
  display: block;
  width: auto;
}

/*
  Fix checkbox placement
*/
#wagtail .wrapper input[type="checkbox"] {
  vertical-align: middle;
}

/* Displaying red asterisk for required fields. */
.required .field > label::after {
  display: inline-block !important;
}

/* Fix select2 dropdown autocomplete input field low contrast color scheme on dark mode */
@media (prefers-color-scheme: dark) {
  #wagtail .select2 .select2-selection {
    color: var(--w-color-text-context);
    background-color: var(--w-color-surface-field);
    border-color: var(--w-color-border-field-default);
    border-radius: 0.3125rem;
  }
  #wagtail .select2-container .select2-results .select2-results__options {
    background-color: var(--w-color-surface-field);
  }
  /* Hover/Focus; Important for accesibility */
  #wagtail .select2 .select2-selection:hover,
  #wagtail .select2 .select2-selection:focus {
    border-color: var(--w-color-border-field-hover);
  }
  /* Options */
  #wagtail .select2-container .select2-results .select2-results__option {
    color: var(--w-color-text-context);
    background-color: var(--w-color-surface-field);
  }
  /* Selected/hover option */
  #wagtail
    .select2-container
    .select2-results
    .select2-results__option--highlighted {
    color: var(--w-color-text-label-menus-active);
    background-color: var(--w-color-surface-button-default);
  }
  /* Input element */
  #wagtail
    .select2-container--default
    .select2-search--inline
    .select2-search__field {
    color: var(--w-color-text-context);
  }
  /* Focus input outline */
  #wagtail
    .select2-container--default
    .select2-search--inline
    .select2-search__field:focus-visible {
    outline: none !important;
  }
}

/* Better spacing for `Add item` buttons */
#wagtail {
  .c-sf-add-button {
    margin-top: -0.5em;
    margin-bottom: 2.5em;
  }
}