#command-builder-modal {
  z-index: 300;
}

#command-builder-modal .modal-header {
  margin: 0;
}

#command-builder-modal .modal-body {
  padding: 0;
}

#command-builder-modal .form {
  margin-top: var(--space-md);
}

#command-builder-modal .form-content {
  padding: 0 var(--space-lg);
  overflow-y: auto;
}


.command-categories {
  display: flex;
  overflow-x: auto;
  min-height: max-content;
  border-bottom: 1px solid var(--border);
  flex-grow: 0;
}

.command-category {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  transition: background-color 0.2s ease;
}

.command-category:first-child {
  padding-left: var(--space-lg);
}

.command-category:last-child {
  padding-right: var(--space-lg);
}

.command-category:active {
  background: var(--bg-tertiary);
}

.command-category::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  background: rgba(var(--gradient-start-rgb), 0.2);
  transition: width .2s ease;
}

.command-category.active::after {
  width: 100%;
}

.command-category-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-muted);
  margin-right: .4rem;
} 

.command-category.active .command-category-icon ,
.command-category.active .command-category-name {
  color: var(--text-secondary);
}


.command-category-name {
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin-right: .4rem;
}