.wd-nav-vertical.wd-design-with-bg {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  --wd-icon-style-with-bg: brightness(0) invert(1);
  --wd-icon-style-with-bg-hover: brightness(1) invert(0);
}
.wd-nav-vertical.wd-design-with-bg > li > a {
  padding: 12px 20px 12px 40px;
  color: #000;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.wd-nav-vertical.wd-design-with-bg > li > a .wd-nav-img {
  margin-inline-end: 10px;
  max-height: 20px;
  filter: var(--wd-icon-style-with-bg);
  transition: all 0.25s ease;
}
.wd-nav-vertical.wd-design-with-bg > li:is(.wd-opened, :hover) > a {
  background-color: var(--bgcolor-white);
  color: var(--color-gray-800);
}
.wd-nav-vertical.wd-design-with-bg > li:is(.wd-opened, :hover) > a .wd-nav-img {
  filter: var(--wd-icon-style-with-bg-hover);
}
.wd-nav-vertical.wd-design-with-bg > li.menu-item-has-children > a:after {
  color: inherit;
}
[class*="color-scheme-light"] .wd-nav-vertical.wd-design-with-bg {
  --wd-icon-style-with-bg-hover: brightness(0) invert(1);
}