/* The header of the doc explorer */
.graphiql-doc-explorer-header {
  display: flex;
  justify-content: space-between;
  position: relative;

  &:focus-within {
    & .graphiql-doc-explorer-title {
      /* Hide the header when focussing the search input */
      visibility: hidden;
    }

    & .graphiql-doc-explorer-back:not(:focus) {
      /**
        * Make the back link invisible when focussing the search input. Hiding
        * it in any other way makes it impossible to focus the link by pressing
        * Shift-Tab while the input is focussed.
        */
      color: transparent;
    }
  }
}
.graphiql-doc-explorer-header-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The search input in the header of the doc explorer */
.graphiql-doc-explorer-search {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;

  &:focus-within {
    left: 0;
  }

  & [data-reach-combobox-input] {
    height: 24px;
    width: 4ch;
  }

  & [data-reach-combobox-input]:focus {
    width: 100%;
  }
}

/* The back-button in the doc explorer */
a.graphiql-doc-explorer-back {
  align-items: center;
  color: hsla(var(--color-neutral), var(--alpha-secondary));
  display: flex;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &:focus {
    outline: hsla(var(--color-neutral), var(--alpha-secondary)) auto 1px;

    & + .graphiql-doc-explorer-title {
      /* Don't hide the header when focussing the back link */
      visibility: unset;
    }
  }

  & > svg {
    height: var(--px-8);
    margin-right: var(--px-8);
    width: var(--px-8);
  }
}

/* The title of the currently active page in the doc explorer */
.graphiql-doc-explorer-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-h2);
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  &:not(:first-child) {
    font-size: var(--font-size-h3);
    margin-top: var(--px-8);
  }
}

/* The contents of the currently active page in the doc explorer */
.graphiql-doc-explorer-content > * {
  color: hsla(var(--color-neutral), var(--alpha-secondary));
  margin-top: var(--px-20);
}

/* Error message */
.graphiql-doc-explorer-error {
  background-color: hsla(var(--color-error), var(--alpha-background-heavy));
  border: 1px solid hsl(var(--color-error));
  border-radius: var(--border-radius-8);
  color: hsl(var(--color-error));
  padding: var(--px-8) var(--px-12);
}