@graphiql/plugin-code-exporter/src/index.css

This package provides a plugin that integrates the [GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.

.docExplorerWrap {
  height: unset !important;
  min-width: unset !important;
  width: unset !important;
}

.doc-explorer-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
}

.doc-explorer-rhs {
  display: none;
}

.doc-explorer-contents {
  border-top: none !important;
}

.graphiql-code-exporter {
  min-width: unset !important;
  position: relative;
  padding: var(--px-16) 0;
  & > div {
    font-family: var(--font-family) !important;
    padding: 0 !important;
    font-size: var(--font-size-body) !important;
  }
  & > div:first-of-type {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    & > div {
      padding: 0 !important;
    }
    & > div:first-of-type {
      display: flex;
      flex-direction: row;
      gap: var(--px-16);
    }
    & > div:last-of-type {
      & > div:first-of-type {
        color: hsla(var(--color-neutral), var(--alpha-secondary)) !important;
        font-variant: unset !important;
        text-transform: unset !important;
        font-weight: unset !important;
        margin-bottom: var(--px-12);
      }
    }
  }
  & button.toolbar-button {
    height: var(--toolbar-width) !important;
    width: var(--toolbar-width) !important;
    border-radius: var(--border-radius-4) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: unset !important;
    left: unset !important;
    margin-top: unset !important;
    top: var(--px-16);
    right: 0;
    justify-content: center;
    align-items: center;
    background-color: unset !important;
    & svg {
      fill: hsla(var(--color-neutral), var(--alpha-tertiary));
    }
  }
  & > div:last-of-type {
    border-top: none !important;
    display: flex;
    flex: 1;
    margin-top: var(--px-24) !important;
    & > div {
      position: relative;
      min-height: 600px;
      width: 100%;
    }
  }
  & .toolbar-menu.toolbar-button {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    padding: var(--px-8) var(--px-12);
    color: hsl(var(--color-neutral)) !important;
    border-radius: var(--border-radius-4) !important;
    &:hover {
      background-color: hsla(
        var(--color-neutral),
        var(--alpha-background-light)
      ) !important;
    }
  }
  & .toolbar-menu-items {
    background-color: hsl(var(--color-base)) !important;
    border: var(--popover-border);
    border-radius: var(--border-radius-8);
    box-shadow: var(--popover-box-shadow) !important;
    padding: var(--px-4);
    max-width: 250px;
    font-size: inherit;
    display: block;
    white-space: nowrap;
    outline: none;
    position: absolute;
    z-index: 100;
    margin-top: var(--px-8);
    visibility: hidden;
    left: 0;
    &.open {
      visibility: visible;
    }
    & > li {
      cursor: pointer;
      display: block;
      color: inherit;
      font: inherit;
      text-decoration: initial;
      border-radius: var(--border-radius-4);
      margin: var(--px-4);
      overflow: hidden;
      padding: var(--px-6) var(--px-8);
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover {
        color: inherit;
        background-color: hsla(
          var(--color-neutral),
          var(--alpha-background-light)
        );
      }
    }
  }
  & .CodeMirror {
    box-shadow: var(--popover-box-shadow);
    border-radius: calc(var(--border-radius-12));
    padding: var(--px-16);
  }
}