@mixin ax-menu() {
  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  z-index: $ax6ui-menu-z-index;
  position: fixed;
  left: 0px;
  top: 0px;
  #{$hack_ie67}width: 100px;
  //overflow: hidden;
  opacity: 0.95;
}

@mixin menu-variant($text-color, $border-color, $heading-bg-color, $item-bg, $item-color, $item-hover-bg, $item-hover-color) {
  @include ax-background($item-bg);
  border: $ax6ui-menu-inner-border;
  border-color: $border-color;
  border-radius: $ax6ui-menu-border-radius;
  box-shadow: $ax6ui-menu-box-shadow;
  color: $text-color;

  .ax-menu-heading {
    font-weight: 600;
    padding: $ax6ui-menu-heading-padding;
    border-bottom: 1px solid transparent;
    @include border-top-radius($ax6ui-menu-border-radius - 1);

    color: $text-color;
    @include ax-background($heading-bg-color);
    .badge {
      font-size: 0.8em;
      color: $heading-bg-color;
      @include ax-background($text-color);
    }
  }
  .ax-menu-body {
    padding: $ax6ui-menu-body-padding;
    text-align: center;
    position: relative;
    overflow: hidden;

    $ax-menu-item-height: $ax6ui-menu-item-font-size + 5;
    .ax-menu-item {
      padding: $ax6ui-menu-item-padding;
      text-align: left;
      background: $item-bg;
      color: $item-color;
      cursor: pointer;
      font-size: $ax6ui-menu-item-font-size;

      display: table;
      position: relative;
      border-collapse: separate;
      box-sizing: border-box;
      overflow: hidden;
      //table-layout: fixed;
      width: 100%;
      height: $ax-menu-item-height;

      .ax-menu-item-cell {
        box-sizing: border-box;
        display: table-cell;
        vertical-align: middle;
        white-space: nowrap;
        font-size: $ax6ui-menu-item-font-size;
        line-height: $ax-menu-item-height;
        padding: 0px 0px 0px 0px;

        user-select: none;

        &.ax-menu-item-checkbox {
          overflow: hidden;
          width: $ax6ui-menu-item-checkbox-width;
          text-align: center;
          .item-checkbox-wrap {
            position: relative;
            display: block;
            width: $ax6ui-menu-item-checkbox-width;
            height: $ax-menu-item-height;

            &.useCheckBox {
              &:after {
                content: '';
                width: 10px;
                height: 5px;
                position: absolute;
                top: ($ax-menu-item-height - 10) / 2;
                left: ($ax-menu-item-height - 10) / 2;
                border: 2px solid $item-color;
                border-top: none;
                border-right: none;
                background: transparent;
                opacity: 0.1;
                @include transform(rotate(-50deg));
              }
              &[data-item-checked="true"] {
                &:after {
                  opacity: 1;
                }
              }
            }
          }
        }
        &.ax-menu-item-icon {
          text-align: left;
        }
        &.ax-menu-item-label {
          padding-right: 10px;
        }
        &.ax-menu-item-accelerator {
          text-align: right;
          padding: 0px 7px 0px 0px;
          .item-wrap {
            width: 100%;
            vertical-align: middle;
            @include ellipsis();
            display: block;
          }
        }
        &.ax-menu-item-handle {
          overflow: hidden;
          width: $ax6ui-menu-item-handle-width;
          text-align: center;
        }
      }

      &:hover, &.hover {
        background: $item-hover-bg;
        color: $item-hover-color;
        .ax-menu-item-cell {
          &.ax-menu-item-checkbox {
            .item-checkbox-wrap {
              &:after {
                border-color: $item-hover-color;
              }
            }
          }
        }
      }
    }
    .ax-menu-item-divide {
      border-top: $ax6ui-menu-inner-border;
      border-color: lighten($border-color, 0%);
      margin: $ax6ui-menu-body-padding;
    }
    .ax-menu-item-html {
      padding: $ax6ui-menu-item-html-padding;
      text-align: left;
    }
    .ax-menu-buttons {
      button {
        &:not(:last-child) {
          margin-right: 3px;
        }
      }
    }
  }

  &.direction-top {
    @include ax-border-radius(0, "top");
    @include ax-border-radius($ax6ui-menu-border-radius, "bottom");

    &.with-arrow {
      .ax-menu-arrow {
        @include menu-arrow($ax6ui-menu-arrow-size, $ax6ui-menu-arrow-border-width, $border-color, top);
      }
    }
  }
  &.direction-right {
    @include ax-border-radius(0, "right");
    @include ax-border-radius($ax6ui-menu-border-radius, "left");

    &.with-arrow {
      .ax-menu-arrow {
        @include menu-arrow($ax6ui-menu-arrow-size, $ax6ui-menu-arrow-border-width, $border-color, right);
      }
    }
  }
  &.direction-bottom {
    @include ax-border-radius(0, "bottom");
    @include ax-border-radius($ax6ui-menu-border-radius, "top");

    &.with-arrow {
      .ax-menu-arrow {
        @include menu-arrow($ax6ui-menu-arrow-size, $ax6ui-menu-arrow-border-width, $border-color, bottom);
      }
    }
  }
  &.direction-left {
    @include ax-border-radius(0, "right");
    @include ax-border-radius($ax6ui-menu-border-radius, "right");

    &.with-arrow {
      .ax-menu-arrow {
        @include menu-arrow($ax6ui-menu-arrow-size, $ax6ui-menu-arrow-border-width, $border-color, left);
      }
    }
  }
}

@mixin menu-arrow($arrow-size, $arrow-border-width, $border-color, $arrow-direction) {

  //@debug( nth($ax6ui-menu-inner-border, 3) );
  $arrow-bg: nth($ax6ui-menu-bg, 1);
  $arrow-border-color: $border-color;

  position: absolute;
  width: 0;
  height: 0;

  @if ($arrow-direction == top) {
    left: 50%;
    top: 0px;
  } @else if ($arrow-direction == right) {
    right: 0px;
    top: 50%;
  } @else if ($arrow-direction == bottom) {
    left: 50%;
    bottom: 0px;
  } @else if ($arrow-direction == left) {
    left: 0px;
    top: 50%;
  }

  &:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;

    @if ($arrow-direction == top) {
      left: - ($arrow-size);
      top: - ($arrow-size * 2);
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-bottom: ($arrow-size * 2) solid $arrow-border-color;
    } @else if ($arrow-direction == right) {
      right: - ($arrow-size * 2);
      top: - ($arrow-size);
      border-top: $arrow-size solid transparent;
      border-bottom: $arrow-size solid transparent;
      border-left: ($arrow-size * 2) solid $arrow-border-color;
    } @else if ($arrow-direction == bottom) {
      left: - ($arrow-size);
      bottom: - ($arrow-size * 2);
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-top: ($arrow-size * 2) solid $arrow-border-color;
    } @else if ($arrow-direction == left) {
      left: - ($arrow-size * 2);
      top: - ($arrow-size);
      border-top: $arrow-size solid transparent;
      border-bottom: $arrow-size solid transparent;
      border-right: ($arrow-size * 2) solid $arrow-border-color;
    }
  }

  &:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;

    @if ($arrow-direction == top) {
      left: - ($arrow-size);
      top: - ($arrow-size * 2) + ($arrow-border-width * 2);
      border-left: ($arrow-size) solid transparent;
      border-right: ($arrow-size) solid transparent;
      border-bottom: ($arrow-size * 2) solid $arrow-bg;
    } @else if ($arrow-direction == right) {
      right: - ($arrow-size * 2) + ($arrow-border-width * 2);
      top: - ($arrow-size);
      border-top: ($arrow-size) solid transparent;
      border-bottom: ($arrow-size) solid transparent;
      border-left: ($arrow-size * 2) solid $arrow-bg;
    } @else if ($arrow-direction == bottom) {
      left: - ($arrow-size);
      bottom: - ($arrow-size * 2) + ($arrow-border-width * 2);
      border-left: ($arrow-size) solid transparent;
      border-right: ($arrow-size) solid transparent;
      border-top: ($arrow-size * 2) solid $arrow-bg;
    } @else if ($arrow-direction == left) {
      left: - ($arrow-size * 2) + ($arrow-border-width * 2);
      top: - ($arrow-size);
      border-top: ($arrow-size) solid transparent;
      border-bottom: ($arrow-size) solid transparent;
      border-right: ($arrow-size * 2) solid $arrow-bg;
    }
  }
}

@mixin ax-menubar() {
  box-sizing: border-box;
  height: 100%;
  position: relative;
  .ax-menu-body {
    display: table;
    height: 100%;
    border-collapse: separate;
    box-sizing: border-box;

    .ax-menu-item {
      display: table-cell;
      height: 100%;
      vertical-align: middle;
      white-space: nowrap;
      box-sizing: border-box;
      padding: $ax6menubar-item-padding;
      cursor: pointer;
      font-size: $ax6ui-menu-item-font-size;

      .ax-menu-item-cell {
        white-space: nowrap;
        user-select: none;
      }
    }
  }
}

@mixin menubar-variant($text-color, $border-color, $heading-bg-color, $item-bg, $item-color, $item-hover-bg, $item-hover-color) {
  .ax-menu-body {
    .ax-menu-item {
      color: $item-color;
      .ax-menu-item-cell {

      }
      &:hover, &.hover {
        background: $item-hover-bg;
        color: $item-hover-color;
      }
    }
  }
}

@include keyframes(ax-menu) {
  0% {
    opacity: 0.0;
    //@include transform(scale(1));
  }
  1% {
    opacity: 0.0;
    //@include transform(scale(0.3));
  }
  100% {
    opacity: 0.95;
    //@include transform(scale(1));
  }
}

@include keyframes(ax-menu-destroy) {
  from {
    @include transform(scale(1));
    opacity: 1.0;
  }
  to {
    @include transform(scale(0.5));
    opacity: 0.0;
  }
}

// mixins --------------------------------------------- end

[data-ax6ui-menu] {
  @include ax-menu();

  @include perspective(1000px);
  @include transform-style(preserve-3d);

  @include animation(ax-menu $ax6ui-menu-easing-time-open $ease-out-back);
  @include transform(translateZ(0));
  @include transform-origin(center top);
  /* flip type
  @include backface-visibility(visible);
  @include transform(translateY(0%) rotateX(0deg));
  */

  @include menu-variant($ax6ui-menu-default-text, $ax6ui-menu-default-border-color, $ax6ui-menu-default-heading-bg,
      $ax6ui-menu-default-item-bg, $ax6ui-menu-default-item-text, $ax6ui-menu-default-item-hover-bg, $ax6ui-menu-default-item-hover-text);

  &.destroy {
    @include animation(ax-menu-destroy $ax6ui-menu-easing-time-close $ease-in-back forwards);
  }
  &.direction-top {
    @include transform-origin(center top);
  }
  &.direction-right {
    @include transform-origin(right center);
  }
  &.direction-bottom {
    @include transform-origin(center bottom);

  }
  &.direction-left {
    @include transform-origin(left center);
  }
}

[data-ax6ui-menubar] {
  @include ax-menubar();
  @include menubar-variant($ax6ui-menu-default-text, $ax6ui-menu-default-border-color, $ax6ui-menu-default-heading-bg,
      $ax6ui-menu-default-item-bg, $ax6ui-menu-default-item-text, $ax6ui-menu-default-item-hover-bg, $ax6ui-menu-default-item-hover-text);
}