.GraphQL {
  @apply flex flex-col;
}

.GraphQL-widget {
  @apply h-full;
}

.GraphQL-controls {
  @apply flex items-center gap-2 p-4;
}

.GraphQL-form {
  @apply w-[25dvw];
}

.GraphQL-options {
  @apply text-sm;
}

.GraphQL-controls-menu {
  @apply ms-auto;
}

.GraphQL-controls-toggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-settings;
}

.GraphQL-controls-list {
  @apply Dropdown;
}

.GraphQL-controls-menu.is-open .GraphQL-controls-list {
  @apply Dropdown-is-open;
}

.GraphQL-controls-list li {
  @apply Dropdown-item;
}

.GraphQL-frame {
  @apply size-full;
}

/* View Schema Popup */
.GraphQL-printed-schema {
  @apply my-4 whitespace-pre-wrap break-words text-sm;
}

/* Share Query Popup */
.GraphQL-copy-container {
  @apply me-2 inline-flex items-center;
}

.GraphQL-copy-confirmation {
  @apply font-bold text-gray-700;
}

.GraphQL-copy {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-copy;

  &[data-copied] {
    @apply before:btu-icon-check;
  }
}

.GraphQL-open {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-external-link;
}

/* Hidden fields */
.GraphQL-hidden {
  @apply hidden;
}
