@graphiql/react/src/editor/style/info.css

[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)

/* Popup styles */
.CodeMirror-info {
  background-color: hsl(var(--color-base));
  border: var(--popover-border);
  border-radius: var(--border-radius-8);
  box-shadow: var(--popover-box-shadow);
  color: hsl(var(--color-neutral));
  max-height: 300px;
  max-width: 400px;
  opacity: 0;
  overflow: auto;
  padding: var(--px-12);
  position: fixed;
  transition: opacity 0.15s;
  z-index: 10;

  /* Link styles */
  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline dotted;
    }
  }

  /* Align elements in header */
  & .CodeMirror-info-header {
    display: flex;
    align-items: baseline;
  }

  /* Main elements */
  & .CodeMirror-info-header {
    & > .type-name,
    & > .field-name,
    & > .arg-name,
    & > .directive-name,
    & > .enum-value {
      font-size: var(--font-size-h4);
      font-weight: var(--font-weight-medium);
    }
  }

  /* Type names */
  & .type-name-pill {
    border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
    border-radius: var(--border-radius-4);
    color: hsla(var(--color-neutral), var(--alpha-secondary));
    margin-left: var(--px-6);
    padding: var(--px-4);
  }

  /* Descriptions */
  & .info-description {
    color: hsla(var(--color-neutral), var(--alpha-secondary));
    margin-top: var(--px-12);
    overflow: hidden;
  }
}