/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Visual styling for forms in the off-canvas dialog.
 *
 * @internal
 */

#drupal-off-canvas-wrapper {
  --drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
  --drupal-off-canvas-input-background-color: #fff;
  --drupal-off-canvas-input-border: solid 1px transparent;
  --drupal-off-canvas-input-border-radius: 2px;
  --drupal-off-canvas-input-font-size: 0.875rem;
  --drupal-off-canvas-input-text-color: #333;
  --drupal-off-canvas-fieldset-background-color: transparent;
  --drupal-off-canvas-fieldset-border-width: 1px;
  --drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);

  & form {
    padding-block: var(--off-canvas-padding);

    & > *:first-child {
      margin-top: 0;
      padding-top: 0;
    }
  }

  & .ck-content {
    color: var(--drupal-off-canvas-input-text-color);
  }

  & .form-item:where(:not(fieldset)) {
    padding: var(--off-canvas-vertical-spacing-unit) 0;
  }

  & .form-items-inline > * {
    display: inline-block;
  }

  & label {
    display: block;
  }

  & .form-type-boolean {
    padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
  }

  & .description,
  & .form-item__description {
    margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
    font-size: 0.75rem;
  }

  & .form-required::after {
    content: "*";
  }

  & .fieldset,
  & fieldset {
    margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
    padding: var(--off-canvas-vertical-spacing-unit);
    border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
    background-color: var(--drupal-off-canvas-fieldset-background-color);
  }

  & legend, /* Bartik doesn't apply BEM classes, so we use the element. */
  & .fieldset__legend {
    display: contents;
    font-weight: bold;
  }

  & :is(.fieldset, fieldset, .draggable-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
    width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
  }

  & input,
  & textarea {
    font-family: inherit;
  }

  & input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])),
  & select,
  & textarea {
    max-width: 100%;
    padding: var(--drupal-off-canvas-input-padding);
    color: var(--drupal-off-canvas-input-text-color);
    border: var(--drupal-off-canvas-input-border);
    border-radius: var(--drupal-off-canvas-input-border-radius);
    background-color: var(--drupal-off-canvas-input-background-color);
    font-size: var(--drupal-off-canvas-input-font-size);
  }

  & input[type="checkbox"],
  & input[type="radio"] {
    & + label {
      display: inline;
    }
  }

  & input[type="file"] {
    margin-bottom: var(--off-canvas-vertical-spacing-unit);
  }

  & input[type="search"] {
    appearance: none; /* Necessary for Safari. */
  }

  & select {
    appearance: none;
    padding-inline-end: 1.25rem;
    border: var(--drupal-off-canvas-input-border);
    border-radius: var(--drupal-off-canvas-input-border-radius);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right 5px; /* LTR */
    background-size: 0.75rem;

    &:dir(rtl) {
      background-position: center left 5px;
    }

    @media (forced-colors: active) {
      appearance: revert;
      padding-inline-end: 0;
      background: revert;
    }
  }

  /*
   * Autocomplete.
   */
  & .form-autocomplete {
    padding-inline-end: 2.5rem; /* Room for icon. */
    background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right 1px; /* LTR */

    &.ui-autocomplete-loading {
      background-image: url(../../../icons/spinner.gif);
    }

    &:dir(rtl) {
      background-position: center left 1px;
    }
  }

  /* This is the background <ul> for the autocomplete dropdown. */
  & .ui-autocomplete {
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--drupal-off-canvas-input-border);
    background-color: var(--drupal-off-canvas-input-background-color);
    box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */

    & a {
      display: block;
      padding: var(--drupal-off-canvas-input-padding);
      cursor: pointer;
      color: var(--drupal-off-canvas-input-text-color);
      font-size: var(--drupal-off-canvas-input-font-size);

      &:hover {
        background-color: #eee;
      }

      &:focus,
      &.ui-state-active {
        outline: solid 2px currentColor;
        outline-offset: -2px;
      }
    }
  }

  /*
   * Claro injects a "Loading" autocomplete message that affects the positioning
   * of the ui-autocomplete dropdown. We remove this to normalize the markup.
   */
  & .claro-autocomplete__message {
    display: none;
  }
}
