@import 'mixins/common';

$wc-menu-icon-space: $wc-menu-iconwidth + $wc-gap-small;

// Structural styles common to all menus.
.wc-menuitem,
.wc-submenu {
  width: 100%;

  .wc_menu_bar > & {
    display: inline-block;
    // vertical-align: text-top;
    white-space: nowrap;
    width: auto;
  }
}

.wc-menuitem,
.wc-submenu-o {
  padding: $wc-menu-bar-column-item-pad;
  width: 100%;

  .wc-decoratedlabel {
    display: inline-table; // this is so we can hold an icon on WMenuItem
    width: 100%;
  }

  .wc_dlbl_seg {
    display: table-cell;

    + .wc_dlbl_seg {
      padding-left: $wc-gap-small;
    }
  }

  .wc-labelbody {
    width: 100%;
  }
}

.wc-submenu-o {
  > .wc-decoratedlabel {
    width: calc(100% - #{$wc-menu-icon-space});
  }

  > .fa {
    margin-left: $wc-gap-small;
    text-align: left;
    width: $wc-menu-iconwidth;
  }
}

.wc-menuitem {
  display: block;
  vertical-align: bottom;

  &.wc-icon-before,
  &.wc-icon-after {
    .wc-decoratedlabel {
      width: calc(100% - #{$wc-menu-icon-space});
    }

    &::before {
      width: $wc-menu-iconwidth;
    }
  }
}

[role='separator'] {
  margin: 0;
  padding: 0;

  &[aria-orientation='vertical'] {
    @include border($pos: left);
    border-bottom: 0 none;
    display: inline;
    padding: $wc-menu-bar-vseparator-pad;
    vertical-align: bottom;
  }
}

.wc_submenucontent {
  display: none;
  white-space: nowrap;

  &[aria-expanded='true'] {
    display: block;
  }

  &[aria-busy='true'] {
    min-height: $wc-icon-normal;
  }

  .wc-menu-type-tree & {
    white-space: normal;
  }

  .wc_menu_bar &,
  .wc-menu-type-column & {
    z-index: $wc-z-index-common;

    dialog & {
      z-index: $wc-z-index-common-in-dialog;
    }
  }
}

// closes a submenu, made visible on small screens if responsive design is enabled.
.wc_closesubmenu {
  display: none;
}

// the hamburger icon. This is here to override wc-submenu-o above.
.wc_hbgr {
  padding: $wc-gap-small;
}

// Type BAR, Type COLUMN: quite complex
@import 'wc.menu.bar-column';

// Type FLYOUT is mostly the same as bar-column but is not blocky.
// See _wc.menu.bar-column.scss
.wc-menu-type-flyout {
  display: inline-block;
}

.wc-submenu {
  position: relative;

  .wc-menu-type-tree & {
    position: static;
  }
}


// Type TREE
// TODO: try to work WMenu Type TREE to be more like WTree so we can get rid of this.
.wc-menu-type-tree {
  .wc-menuitem {
    padding: $wc-tree-item-pad;
  }

  .wc-submenu-o {
    padding: $wc-tree-item-pad;

    > .fa {
      margin-left: 0;
    }
  }

  .wc_submenucontent {
    margin-left: $wc-tree-indent;
  }
}

// #############################################################################
// Negative margins!!!
// WARNING
//
// When a WMenu of MenuType.BAR is the first child of a WPanel of Type.CHROME or
// of Type.ACTION (ie a WPanel with exposed title) _or_ is the first child of a
// WPanel child of WSection; **and** that WPanel does not have a Layout applied
// then a negative margin is applied to make the menu "dock" to the header bar.
// The class `.wc-neg-margin` can be used to force this same negative margin on
// WMenus of MenuType.BAR when it is not feasible to have them in WPanel's with
// no Layout in the appropriate circumstance.
//
// WARNING
//
// This makes no attempt to determine the location of the menu, it just uses the
// section padding as a negative margin. This means it will apply wherever it is
// used.
//
// It is intended that this **only** be used when the menu is the first visible
// component in such a section as described above but I am not going to enforce
// that.
//
// WARNING
//
// Well here is the **WARNING**: if you use this willy-nilly your UI _could_
// look really silly!
@if ($wc-section-space-normal > 0) {
  .wc-menu-type-bar.wc-neg-margin {
    // the negative margin must be 0 - the padding of WSection content.
    $neg-margin: -$wc-section-space-normal;
    margin: $neg-margin $neg-margin $wc-section-space-normal;
  }

  @if ($wc-use-respond == 1 and $wc-gap-reduce-when-narrow == 1) {
    @include respond-phonelike {
      .wc-menu-type-bar.wc-neg-margin {
        $neg-margin: -$wc-section-space-reduced;
        margin: $neg-margin $neg-margin $wc-section-space-reduced;
      }
    }
  }
}
// #############################################################################

@import 'wc.menu.color';
@import 'wc.menu.respond';
