.display-builder.sl-theme-dark {
  /* Some UO Styles adjustments for dark theme */
  .form-check {
    background-color: var(--sl-color-neutral-200) !important;
    .form-check-label {
      color: var(--sl-color-neutral-800) !important;
    }
  }
  div:has(> .ui-styles-source-toolbar-plugin[type="radio"]:checked) {
    background-color: rgb(255, 255, 255, 0.2) !important;
  }
  .ui-styles-source-select-plugin .bg-light {
    background-color: rgb(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  }
}

/* Fixes trying to be as global as possible. The theme can impact our form in a lot owf ways. */
.display-builder .db-form {
  * {
    font-size: var(--sl-button-font-size-medium) !important;
  }

  .shoelace-tabs {
    margin-bottom: 0.5rem;
  }

  .ui-icons-wrapper {
    .ui-icons-select {
      display: inline-block;
      margin-top: 0.5rem;

      .form-item--error-message {
        display: none;
      }

      > div {
        display: contents;
      }
    }
  }

  .ajax-progress-throbber {
    display: none !important;
  }

  .ui-icons-settings-wrapper {
    margin-top: 0.5rem;
  }

  input.form-checkbox.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .db-description-hide {
    [id$="--description"],
    .form-label,
    .description {
      display: none;
    }
    .db-description-toggle {
      margin-top: 0.5rem;
    }
  }

  p {
    margin-bottom: 0.25rem;
  }

  .form-label {
    margin-bottom: var(--admin-toolbar-space-8, 8px);
  }

  label[data-drupal-selector] {
    display: none;
  }

  .form-item {
    margin: var(--admin-toolbar-space-16, 16px) 0;
  }

  details > .form-item {
    margin: var(--admin-toolbar-space-8, 8px);
  }

  /* Hide the last weight field on ui pattern form */
  [id$="-sources-0-weight"] {
    display: none;
  }

  /* Global details styling. */
  details {
    margin-bottom: var(--admin-toolbar-space-8, 8px);
    padding: var(--admin-toolbar-space-4, 4px);
    border: 1px solid var(--sl-input-border-color);
    border-radius: var(--sl-input-border-radius-medium);
    box-shadow: var(--sl-shadow-small);
  }

  summary {
    /* Pin the custom marker to the container */
    position: relative;
    margin: 0.2rem;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    font-size: var(--sl-button-font-size-medium) !important;
    line-height: 1.2rem;
    /* Register summary as an anchor element */
    anchor-name: --summary;

    &:hover {
      color: var(--sl-color-neutral-900);
      background-color: transparent;
      &::before,
      &::after {
        border-block-start-color: var(--sl-color-neutral-1000) !important;
      }
    }
    &::marker {
      content: "";
    }

    &::before,
    &::after {
      /* Anchor the shape to the summary */
      position: absolute;
      right: 8px;
      width: 1rem;
      height: 0;
      margin-block-start: inherit;
      /* Custom marker dimensions */
      content: "";
      transition: inherit;
      transform: inherit;
      text-align: inherit;
      border-block-start: 2px solid var(--sl-color-neutral-600);
      background-image: none;
      line-height: 1.2rem;

      /* Positions the lines */
      inset-block-start: 36%;
      inset-inline-end: 4px;
      position-anchor: --summary;

      /* Some reset to avoid conflict */
      inset-inline-start: inherit;
    }

    /* Rotate just the ::after line to create a "+"" shape */
    &::after {
      transform: rotate(90deg);
      transform-origin: 50%;
    }
  }

  /* Rotate the line when open */
  details[open] > summary::after {
    transform: rotate(0deg);
  }

  /* Table inside a ui patterns form. */
  .table .delta-order {
    max-width: 4rem;
  }
  .table .field-multiple-drag {
    max-width: 1.5rem;
    padding-right: 0.125rem;
    padding-left: 0.125rem;
    .handle {
      width: 24px;
      height: 24px;
      padding: 0;
    }
  }
  .table > caption {
    padding: 0;
  }
  .table td:empty {
    padding: 0;
  }
  .table > :not(caption) > * > * {
    border-bottom-width: 0;
    background-color: transparent;
  }
  .tabledrag-toggle-weight-wrapper button {
    color: var(--sl-color-neutral-600);
  }

  /* Claro fixes
  label[data-drupal-selector] {
    display: none;
  }

  .db-island form {
    zoom: 85%;
  }


  p.description {
    margin: 1rem 0;
  }

  details {
    margin-block: var(--space-xs);
  }

  p {
    margin: 0;
  }

  .claro-details__description {
    margin-block-end: var(--space-xs);
  }

  .form-item {
    margin-block: var(--space-xs);
  }

  .button {
    margin-block: var(--space-xs);
    margin-inline: 0 var(--space-xs);
    padding: var(--space-xs);
    font-size: var(--font-size-xs);
  }

  @media screen and (min-width: 40.0625rem) {
    .claro-details__wrapper {
      margin: 0 var(--space-s);
    }
  }
*/
}
