.graph-explorer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--ge-radius-sm);
  text-transform: none;
  transition: background-color var(--ge-transition),
    border-color var(--ge-transition), box-shadow var(--ge-transition),
    color var(--ge-transition);

  &:focus-visible {
    outline: none;
    box-shadow: var(--ge-ring);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
  }
}

.graph-explorer-btn-default {
  background-color: var(--ge-surface);
  border-color: var(--ge-border-strong);
  color: var(--ge-text-muted);
  box-shadow: var(--ge-shadow-xs);

  &:hover {
    background-color: var(--ge-surface-3);
    border-color: var(--ge-border-strong);
    color: var(--ge-text);
  }

  &.active {
    background-color: var(--ge-accent-soft);
    border-color: var(--ge-accent-soft-border);
    color: var(--ge-accent-hover);
  }

  &.active:hover {
    background-color: var(--ge-accent-soft);
    border-color: var(--ge-accent);
  }

  &[disabled], &[disabled]:hover, &[disabled].active, &[disabled].active:hover {
    background-color: var(--ge-surface-3);
    color: var(--ge-text-subtle);
  }
}

.graph-explorer-btn-primary {
  color: var(--ge-accent-fg);
  background-color: var(--ge-accent);
  border-color: var(--ge-accent);
  box-shadow: var(--ge-shadow-xs);

  &:hover, &:focus, &:active {
    background-color: var(--ge-accent-hover);
    border-color: var(--ge-accent-hover);
  }

  &.active {
    border-color: var(--ge-accent-hover);
  }

  &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active {
    background-color: var(--ge-accent);
  }
}

.graph-explorer-btn-success {
  background-color: var(--ge-success);
  border-color: var(--ge-success);
  color: #fff;
  box-shadow: var(--ge-shadow-xs);

  &:hover {
    background-color: var(--ge-success-hover);
    border-color: var(--ge-success-hover);
  }
}

.graph-explorer-btn-danger {
  background-color: var(--ge-danger);
  border-color: var(--ge-danger);
  color: #fff;
  box-shadow: var(--ge-shadow-xs);

  &:hover {
    background-color: var(--ge-danger-hover);
    border-color: var(--ge-danger-hover);
  }
}