// for WMenu type BAR, type FLYOUT, type COLUMN
.wc-menu-type-column,
.wc_menu_bar {
  .wc_submenucontent {
    height: auto; // override (mobile) default
    min-width: 100%;
    overflow: visible;
    position: absolute;
    top: 100%;
    width: auto;

    > [role] { // override (mobile) default.
      font-size: inherit;
    }
  }

  .wc_closesubmenu {
    display: none;
  }
}

.wc-menu-type-column,
.wc_submenucontent {
  // nested sub-menus. These must appear before the colision detection
  // overrides below.
  .wc_submenucontent {
    left: 100%;
    top: 0;

    &.wc_coleast { // nested collisions
      right: 100%;
    }

    &.wc_colwest {
      right: 100%;
    }
  }
}

// Now for the collision detection...
.wc_submenucontent {
  &.wc_colsth { //south collision
    bottom: 0;
    left: 100%;
    top: auto;

    &.wc_coleast { //collides both south and east
      left: auto;
      right: 100%;
    }
  }

  // viewport edge collisions
  &.wc_coleast {
    left: auto;
    right: 0;

    &.wc_colwest { //collides both east and west
      max-width: 100%;
    }
  }

  &.wc_colwest {
    left: 100%;
    right: auto;
  }
}


// The collapsed bar menu in a header.
[role='banner'] .wc-menu-type-bar[data-wc-menufixed] {
  display: inline-block;
}

// make menu bars horizontal.
.wc_menu_bar > .wc-submenu > .wc-submenu-o {
  .wc-decoratedlabel {
    display: inline-table;
    width: auto;
  }

  .wc-labelbody {
    width: auto;
  }
}

.wc_closesubmenu::before {
  margin-right: $wc-gap-small;
}
