.dropdownGroup {
  border: 1px solid var(--color-outline);
  transition: var(--transition-out);
}

.dropdownGroupButton {
  padding: calc(var(--space-xxsmall) - 1px);
}

.dropdownGroupAnchor {
  border: none;
  border-radius: 0;
  position: relative;
}

.dropdownGroupAnchor::before {
  content: '';
  display: block;
  width: 1px;
  background: var(--color-outline-dark);
  position: absolute;
  left: 0;
  top: var(--space-xxxsmall);
  bottom: var(--space-xxxsmall);
}

.dropdownGroupAnchor:hover,
.dropdownGroupAnchor:focus,
.dropdownGroupAnchor:active {
  border-color: var(--color-outline);
  box-shadow: none;
  background: none;
}

.dropdownGroup:hover {
  border-color: var(--color-outline-dark);
  transition: var(--transition-in);
}

.itemActive {
  background: var(--color-highlight);
}

/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
.itemFirst {
  border-top-left-radius: var(--radius-small) !important;
  border-bottom-left-radius: var(--radius-small) !important;
}

.itemLast {
  border-top-right-radius: var(--radius-small) !important;
  border-bottom-right-radius: var(--radius-small) !important;
}

.dropdownItemIcon {
  opacity: 0;
  transition: var(--transition-out);
}

.dropdownItemActive .dropdownItemIcon {
  opacity: 1;
  transition: var(--transition-in);
}