.menuButton {
  display: flex;
  align-items: center;
  padding: var(--spacing-1, 4px);
  border-radius: var(--border-radius-base);
  transition: background-color var(--default-hover-animation-duration)
    var(--default-timing-function);
}

.menuButton svg {
  color: var(--global-foreground, #fff);
}

.menuButton:hover {
  background-color: var(--pane-background-active, #2e3031);
}

.menuButton:focus-visible {
  outline: 1px solid var(--primary-color);
}

.menuButtonWithText {
  display: flex;
  gap: var(--spacing-2, 8px);
  align-items: center;
  align-self: flex-start;
  width: auto;
  min-width: fit-content;
  padding: var(--spacing-2, 8px) var(--spacing-1, 4px);
  font-size: var(--font-size-2, 11px);
  color: var(--global-foreground, #fff);
  border-radius: var(--border-radius-base);
}

.menuButtonWithText:focus-visible {
  outline: 1px solid var(--primary-color);
}