$navbar-dropdown-width: 15em !default;

.c-navbar--dropdown {

  li[class*="children"] {
    position: relative;

    > a:after {
      content: "";
      display: inline-block;

      margin-left: .5em;
      border: 4px solid transparent;
      border-top-width: 5px;
      border-top-color: currentColor;
    }

    &:hover > .sub-menu,
    &:hover > .children {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .sub-menu,
  .children {
    position: absolute;
    top: 100%;
    left: 0;

    width: $navbar-dropdown-width;
    margin: 0;
    border: 0 solid transparent;

    background-clip: padding-box;

    text-align: left;

    opacity: 0;
    pointer-events: none;

    .menu-item {
      width: 100%;
      margin: 0;
    }
  }

  .sub-menu [class*="has-children"] > a:after,
  .children [class*="has_children"] > a:after {
    transform: rotate(-90deg);
  }

  .sub-menu .sub-menu,
  .children .children {
    top: 0;
    left: 100%;
    margin-left: 0;
  }
}

//Theme UX requirements: changed menu labels, menu IDs and added arrows for submenus