@graphiql/react/src/ui/tabs.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)

.graphiql-tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: var(--px-12);

  & > :not(:first-child) {
    margin-left: var(--px-12);
  }
}

.graphiql-tab {
  align-items: stretch;
  border-radius: var(--border-radius-8);
  color: hsla(var(--color-neutral), var(--alpha-secondary));
  display: flex;

  & > button.graphiql-tab-close {
    visibility: hidden;
  }
  &.graphiql-tab-active > button.graphiql-tab-close,
  &:hover > button.graphiql-tab-close,
  &:focus-within > button.graphiql-tab-close {
    visibility: unset;
  }

  &.graphiql-tab-active {
    background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
    color: hsla(var(--color-neutral), 1);
  }
}

button.graphiql-tab-button {
  padding: var(--px-4) 0 var(--px-4) var(--px-8);
}

button.graphiql-tab-close {
  align-items: center;
  display: flex;
  padding: var(--px-4) var(--px-8);

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