/* Minimal functional styles for SlashCommand components.
 * Layout and positioning only - no visual design.
 * Import optionally: import '@react-email/editor/styles/slash-command.css';
 */

[data-re-slash-command] {
  max-height: 330px;
  width: 256px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

[data-re-slash-command-scroll] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem;
}

[data-re-slash-command-item] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
}

[data-re-slash-command-item] svg {
  flex-shrink: 0;
}

[data-re-slash-command-category] {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.5rem 0.25rem;
}

[data-re-slash-command-empty] {
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
  text-align: center;
}