: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);
  }
}

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

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

/* Hides the cardinality message for the media library form element */
.media-library-form-element > .fieldset-wrapper > .description {
  display: none;
}

/* Better spacing for toolbar logo (upper left) */
.toolbar .toolbar-bar #toolbar-item-administration-tray .toolbar-logo {
  padding: var(--gin-spacing-xxs) 0 !important;
  height: auto !important;
}

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

.linkit-ui-autocomplete {
  background: var(--gin-bg-app, white) !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,
    .glb-form.views-exposed-form {
      display: flex;
      align-items: flex-end;
      gap: 1rem;
      border: none !important;
    }

    .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;
    }
  }
}


/**
 * Show checkboxes and switches inline.
 */
.glb-form-type--checkbox {
  display: flex;

  .glb-checkbox-toggle {
    flex-shrink: 0;
  }

  .glb-form-item__label {
    margin-left: 0.5rem;
  }
}

/**
 * Fix media library selector.
 */
.media-library-form-element {
  & > .fieldset-wrapper {
    background: var(--gin-bg-app);
    padding: 1.25rem 1rem;
    border-radius: 6px;

    p {
      margin: 0 !important;
    }

    .media-library-open-button {
      margin-bottom: 0 !important;
    }
  }

  .glb-media-library-selection {
    margin: 0;
  }
}

.media-library-form-element-cardinality-1 {
  .glb-media-library-item {
    width: 100% !important;
  }

  .glb-media-library-item--grid::before {
    background: white;
  }

  .media-library-item__preview-wrapper {
    display: flex;

    .glb-media-library-item__preview {
      width: 33.33333%;
      aspect-ratio: 1;
      padding-bottom: 0;
    }
  }
}