.verticalMenu {
  width: 100%;
}

.menuList {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;

  // base styles for all list items
  li {
    position: relative;

    // base styles for all links and spans
    a, span {
      display: block;
      text-decoration: none;
      padding-inline: 10px;
      padding-block: 8px;
      color: var(--hs-verticalMenu-color, currentColor);
      background-color: var(--hs-verticalMenu-backgroundColor, transparent);

      &:hover {
        color: var(--hs-verticalMenu-color-hover, var(--hs-verticalMenu-color, currentColor));
        background-color: var(--hs-verticalMenu-backgroundColor-hover, var(--hs-verticalMenu-backgroundColor, transparent));
      }
    }
  }

  // base styles for all submenu lists
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      a, span {
        color: var(--hs-verticalMenu-submenu-color, var(--hs-verticalMenu-color, currentColor));
        background-color: var(--hs-verticalMenu-submenu-backgroundColor, var(--hs-verticalMenu-backgroundColor, transparent));
        padding-inline-start: calc(10px + (var(--hs-menuItem-level, 1) - 1) * var(--hs-verticalMenu-paddingInlineStart, 0px));

        &:hover {
          color: var(--hs-verticalMenu-submenu-color-hover, var(--hs-verticalMenu-submenu-color, var(--hs-verticalMenu-color-hover, var(--hs-verticalMenu-color, currentColor))));
          background-color: var(--hs-verticalMenu-submenu-backgroundColor-hover, var(--hs-verticalMenu-submenu-backgroundColor, var(--hs-verticalMenu-backgroundColor-hover, var(--hs-verticalMenu-backgroundColor, transparent))));
        }
      }
    }
  }
}
