.graphiql-tabs {
  display: flex;
  overflow-y: 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);
  }
}