.verticalMenu {
  width: var(--hscl-verticalMenu-width, 100%);
}

.menuList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hscl-verticalMenu-gap, 0);
  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: var(--hscl-verticalMenu-paddingInline, 10px);
      padding-block: var(--hscl-verticalMenu-paddingBlock, 8px);
      color: var(--hscl-verticalMenu-color, currentColor);
      background-color: var(--hscl-verticalMenu-backgroundColor, transparent);

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

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

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

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