.primary {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--vscode-button-foreground);
  background: var(--vscode-button-background);
  border: 0;
  border-radius: 5px;
}

.secondary {
  min-height: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: var(--vscode-input-foreground);
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-input-border, var(--vscode-sideBar-border));
  border-radius: 6px;
  white-space: nowrap;
  &:hover { background: var(--vscode-list-hoverBackground); }
  &:disabled { opacity: .5; cursor: not-allowed; }
}

.small {
  min-height: 24px;
  height: 24px;
  padding-inline: 7px;
  border-radius: 4px;
}

.iconButton {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 5px;

  &:hover {
    background: var(--vscode-list-hoverBackground);
  }

  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

.danger:hover {
  color: var(--vscode-errorForeground, #f48771);
}

.spin {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}