/* Keep each menu entry's icon color in expanded, collapsed and popup menus. */
.vben-menu > :nth-child(12n + 1) { --menu-icon-rgb: 37 99 235; }
.vben-menu > :nth-child(12n + 2) { --menu-icon-rgb: 13 148 136; }
.vben-menu > :nth-child(12n + 3) { --menu-icon-rgb: 124 58 237; }
.vben-menu > :nth-child(12n + 4) { --menu-icon-rgb: 219 39 119; }
.vben-menu > :nth-child(12n + 5) { --menu-icon-rgb: 8 145 178; }
.vben-menu > :nth-child(12n + 6) { --menu-icon-rgb: 234 88 12; }
.vben-menu > :nth-child(12n + 7) { --menu-icon-rgb: 79 70 229; }
.vben-menu > :nth-child(12n + 8) { --menu-icon-rgb: 22 163 74; }
.vben-menu > :nth-child(12n + 9) { --menu-icon-rgb: 192 38 211; }
.vben-menu > :nth-child(12n + 10) { --menu-icon-rgb: 202 138 4; }
.vben-menu > :nth-child(12n + 11) { --menu-icon-rgb: 225 29 72; }
.vben-menu > :nth-child(12n + 12) { --menu-icon-rgb: 2 132 199; }

.vben-menu .vben-menu__icon {
  box-sizing: border-box;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 6px;
  margin-right: 10px;
  border-radius: 7px;
  color: rgb(var(--menu-icon-rgb, 37 99 235));
  background-color: rgb(var(--menu-icon-rgb, 37 99 235) / 0.11);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.vben-menu .vben-menu-item:hover .vben-menu__icon,
.vben-menu .vben-sub-menu-content:hover > .vben-menu__icon {
  background-color: rgb(var(--menu-icon-rgb, 37 99 235) / 0.18);
  transform: scale(1.05);
}

.vben-menu .vben-menu-item.is-active .vben-menu__icon,
.vben-menu .vben-sub-menu-content.is-active > .vben-menu__icon {
  background-color: rgb(var(--menu-icon-rgb, 37 99 235) / 0.17);
}

.vben-menu.is-collapse .vben-menu__icon {
  margin-right: 0;
}

.dark .vben-menu .vben-menu__icon,
.vben-menu.is-dark .vben-menu__icon {
  color: color-mix(in srgb, rgb(var(--menu-icon-rgb, 37 99 235)) 65%, white);
  background-color: rgb(var(--menu-icon-rgb, 37 99 235) / 0.22);
}

.dark .vben-menu .vben-menu-item:hover .vben-menu__icon,
.dark .vben-menu .vben-sub-menu-content:hover > .vben-menu__icon,
.dark .vben-menu .vben-menu-item.is-active .vben-menu__icon,
.dark .vben-menu .vben-sub-menu-content.is-active > .vben-menu__icon,
.vben-menu.is-dark .vben-menu-item:hover .vben-menu__icon,
.vben-menu.is-dark .vben-sub-menu-content:hover > .vben-menu__icon,
.vben-menu.is-dark .vben-menu-item.is-active .vben-menu__icon,
.vben-menu.is-dark .vben-sub-menu-content.is-active > .vben-menu__icon {
  background-color: rgb(var(--menu-icon-rgb, 37 99 235) / 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .vben-menu .vben-menu__icon {
    transition: none;
  }
}