.subTrigger {
  display: flex;
  cursor: default;
  user-select: none;
  align-items: center;
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-4);
  outline: none;
}

.subTrigger:hover {
  background: var(--color-neutral-4);
  color: var(--color-neutral-12);
}

.subTrigger:focus,
.subTrigger[data-state="open"] {
  background: var(--color-neutral-4);
  color: var(--color-neutral-12);
}

.chevron {
  margin-left: auto;
  aspect-ratio: 1;
  width: 20px;
}

.content {
  z-index: 5;
  min-width: 8rem;
  overflow: hidden;
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--color-neutral-6);
  background: var(--color-neutral-3);
  color: var(--color-neutral-11);
  box-shadow: var(--shadow-3);
}

.item {
  position: relative;
  display: flex;
  cursor: default;
  user-select: none;
  align-items: center;
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-4);
  gap: var(--space-4);
}

.item:focus {
  background: var(--color-neutral-4);
  color: var(--color-neutral-12);
}

.item[data-disabled] {
  pointer-events: none;
  opacity: 0.5;
}

.checkbox {
  position: relative;
  display: flex;
  cursor: default;
  user-select: none;
  align-items: center;
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-4);
  padding-left: var(--space-9);
  outline: none;
}

.checkbox:focus {
  background: var(--color-neutral-4);
  color: var(--color-neutral-12);
}

.indicator {
  position: absolute;
  left: var(--space-4);
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
}

.icon {
  aspect-ratio: 1;
  width: 20px;
}

.circleIcon {
  aspect-ratio: 1;
  width: 12px;
  fill: currentColor;
}

.label {
  padding: 0 var(--space-4);
  font-weight: 500;
}

.separator {
  margin: var(--space-1);
  height: var(--border-size-1);
  background: var(--color-neutral-6);
}

.shortcut {
  margin-left: auto;
  font-size: var(--font-size-0);
  letter-spacing: var(--font-letterspacing-4);
  color: var(--color-neutral-10);
}