@graphiql/react/src/ui/button.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-un-styled,
button.graphiql-un-styled {
  all: unset;
  border-radius: var(--border-radius-4);
  cursor: pointer;

  &:hover {
    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
  }

  &:active {
    background-color: hsla(
      var(--color-neutral),
      var(--alpha-background-medium)
    );
  }

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

.graphiql-button,
button.graphiql-button {
  background-color: hsla(var(--color-neutral), var(--alpha-background-light));
  border: none;
  border-radius: var(--border-radius-4);
  color: hsl(var(--color-neutral));
  cursor: pointer;
  font-size: var(--font-size-body);
  padding: var(--px-8) var(--px-12);

  &:hover,
  &:active {
    background-color: hsla(
      var(--color-neutral),
      var(--alpha-background-medium)
    );
  }

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

  &.graphiql-button-success {
    background-color: hsla(var(--color-success), var(--alpha-background-heavy));
  }
  &.graphiql-button-error {
    background-color: hsla(var(--color-error), var(--alpha-background-heavy));
  }
}