.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: hsla(var(--color-neutral), 1);
  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));
  }
}