.navigationMenu {
  width: 100%;
}

.navList {
  list-style: none;
  gap: var(--hscl-navigationMenu-gap);
  width: 100%;

  // base styles for all list items
  li {
    position: relative;
    max-width: 250px;

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

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

  // submenu-specific styles
  ul {
    li {
      background-color: var(--hscl-navigationMenu-submenu-backgroundColor, var(--hscl-navigationMenu-backgroundColor, transparent));

      a, span {
        color: var(--hscl-navigationMenu-submenu-color, var(--hscl-navigationMenu-color, currentColor));
        background-color: var(--hscl-navigationMenu-submenu-backgroundColor, var(--hscl-navigationMenu-backgroundColor, transparent));
      }

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

        > a, > span {
          color: var(--hscl-navigationMenu-submenu-color-hover, var(--hscl-navigationMenu-submenu-color, var(--hscl-navigationMenu-color-hover, var(--hscl-navigationMenu-color, currentColor))));
          background-color: var(--hscl-navigationMenu-submenu-backgroundColor-hover, var(--hscl-navigationMenu-submenu-backgroundColor, var(--hscl-navigationMenu-backgroundColor-hover, var(--hscl-navigationMenu-backgroundColor, transparent))));
        }
      }
    }
  }

  // Override padding for top level items
  > li {
    > a, > span {
      padding-inline: 10px;
    }
  }

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

  // Shared styles for all visible submenus
  li:hover > ul,
  li:not([data-submenu-open]):focus-within > ul,
  li[data-submenu-open="true"] > ul,
  ul:has(> li:focus) {
    display: block;
    position: absolute;
    min-width: max-content;
    background-color: #fff;
    padding: 0;

    svg {
      transform: rotate(-90deg);
    }
  }

  // Controlled mode: explicitly hide submenu when state is closed (but allow hover to override)
  li[data-submenu-open="false"]:not(:hover) > ul {
    display: none;
  }

  // Position top-level submenus below parent
  > li > ul {
    top: 100%;
    left: 0;
  }

  // Position nested submenus (level 2+) to the right
  ul ul {
    top: 0;
    left: 100%;
  }
}

