:root {
  --drupal-displace-offset-top: var(--gin-toolbar-secondary-height);
}

.glb-sidebar {
  bottom: 0;
}

.gin--navigation .gin-secondary-toolbar--frontend {
  z-index: 106 !important;
}

.glb-fieldset__legend {
  margin: -1rem 0 0 1rem;

  & .glb-fieldset__label {
    padding: 0 0.5rem;
    background: var(--gin-bg-layer);
  }
}

.gin--edit-form td > .form-item {
  display: block;
}

.field-multiple-table {
  th h4 {
    margin: 0;
  }

  td > .form-item {
    display: block;
  }
}

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
}

.glb-form-item button.link {
  color: var(--gin-color-primary) !important;
  padding: 3px 0 !important;
  border-bottom: 1px dashed currentColor !important;
  border-radius: 0 !important;
  margin-bottom: 3px !important;
}

.field-multiple-table .tabledrag-handle .handle {
  display: none;
}

/* Fix toolbar bug in Gin */
.region-sticky__items {
  width: 100% !important;
}

/* Make the media library in layout builder more accessible */

.media-library-wrapper {
  position: relative;

  #media-library-add-form-wrapper {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 1;
    max-width: 33.33333%;

    .form-wrapper,
    .glb-form-wrapper {
      gap: 1rem;
    }
  }

  .media-library-menu + .media-library-content #media-library-add-form-wrapper {
    top: 70px !important;
  }

  .form-item-upload,
  .form-item--upload,
  .form-item-url,
  .form-item--url {
    label {
      padding-bottom: 0 !important;
    }

    .description,
    .form-item__description {
      opacity: 0;
      pointer-events: none;
    }

    &:hover .description,
    &:hover .form-item__description {
      opacity: 1;
    }

    input {
      padding: calc(0.625rem - 1px) calc(0.75rem - 1px) !important;
    }
  }

  .form-item-upload,
  .form-item-url {
    margin: 0 !important;
  }

  /* Slightly different classnames, which are used in non-layout builder admin theme. */
  .form-item--upload,
  .form-item--url {
    margin: 1rem !important;
  }

  /* Yes, this is a double class, to make sure Gin LB styles are overridden with !important. */
  .glb-views-exposed-form.glb-views-exposed-form,
  #views-exposed-form-media-library-widget {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    gap: 1rem;
    align-items: flex-end;

    .form--inline {
      display: flex;
      align-items: flex-end;
      gap: 1rem;
    }

    .form-item,
    .glb-form-item,
    .views-displays .form-item,
    .views-displays .glb-form-item,
    .button,
    .glb-button,
    .views-exposed-form__item--actions {
      margin: 0 !important;
      margin-bottom: 0 !important;
    }
  }
}