@import "./mixins/variables";
@import "./mixins/mixins";

.u-menu-container {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  position: absolute;
  overflow: visible;
  height: 0;
  width: 0;
  visibility: hidden;
  z-index: -1;
  font-family:$preferred_font;
  &.is-visible,
  &.is-animating {
    z-index: 999;
    visibility: visible;
  }
}

.u-menu-outline {
  display: block;
  background: $default-dropdown-bg-color;
  margin: 0;
  padding: 0;
  border: 1px solid $button-border-color ;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0);
  transform-origin: 0 0;
  // @include shadow-2dp();
  border: 1px solid $button-border-color \9;
  will-change: transform;
  transition: transform $menu-expand-duration $animation-curve-default,
      opacity $menu-fade-duration $animation-curve-default;
  z-index: -1;

  .u-menu-container.is-visible & {
    opacity: 1;
    transform: scale(1);
    z-index: 999;
  }

  &.u-menu-bottom-right {
    transform-origin: 100% 0;
  }

  &.u-menu-top-left {
    transform-origin: 0 100%;
  }

  &.u-menu-top-right {
    transform-origin: 100% 100%;
  }
}

.u-menu {
  position: absolute;
  list-style: none;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
  min-width: 87px;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  z-index: -1;

  .u-menu-container.is-visible & {
    opacity: 1;
    z-index: 999;
  }

  &.is-animating {
    transition: opacity $menu-fade-duration $animation-curve-default,
        clip $menu-expand-duration $animation-curve-default;
  }

  &.u-menu-bottom-right {
    left: auto;
    right: 0;
  }

  &.u-menu-top-left {
    top: auto;
    bottom: 0;
  }

  &.u-menu-top-right {
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
  }

  &.u-menu-unaligned {
    top: auto;
    left: auto;
  }
}

.u-menu-item {
  display: block;
  border: none;
  color: $default-item-text-color;
  color: $default-item-text-color-IE8 \9;
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0 15px;
  outline-color: $default-item-outline-color;
  position: relative;
  overflow: hidden;
  @include typo-body-1();
  text-decoration: none;
  cursor: pointer;
  height: 28px;
  line-height: 28px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity $menu-fade-duration $animation-curve-default;
  user-select: none;

  .u-menu-container.is-visible & {
    opacity: 1;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &-full-bleed-divider {
    border-bottom: 1px solid $default-item-divider-color;
  }

  &[disabled], &[data-u-disabled] {
    color: $disabled-item-text-color;
    background-color: transparent;
    cursor: auto;

    &:hover {
      background-color: transparent;
    }

    &:focus {
      background-color: transparent;
    }

    & .mdl-ripple {
      background: transparent;
    }
  }

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

  &:focus {
    outline: none;
    background-color: $default-item-focus-bg-color;
  }

  &:active {
    background-color: $default-item-active-bg-color;
  }
  a{
      line-height: 1.57142857;
      color: $font-color;
      white-space: nowrap;
      text-decoration: none;
      // padding: 6px 40px 6px 15px;
      color: #333;
  }
}


.u-menu__item--ripple-container {
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}

.u-menu-button{
  // width:87px;
}
//分割按钮
.u-right-icon {
    margin-left: 10px;
}

//分割按钮
.u-split {
    height: 24px;
    border: 1px solid $button-border-color ;
    width: 107px;
    .u-button {
        box-shadow: none;
        padding: 0px;
    }
    .u-split-pre {
        border-right: 1px dashed  $button-border-color ;
        width: 80%;
        height: 100%;
    }
    .u-split-sub {
        width: 20%;
        height: 100%;
          button {
            width: 100%;
            height: 100%;
            min-width:0px;
        }
    }
    
}

// 按钮组
.u-button-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    .u-button-group {
        float: left;
    }
    .u-button {
    float: left;
    }
}

.u-menu-wrap{
  position: relative;
}


// 不同色彩的下拉按钮

.u-menu-primary {
  @include menu-styles-variant($menu-primary-bg,$menu-primary-bg-hover);
}

// Modifier: `menu-success`
// -------------------------

.u-menu-success {
  @include menu-styles-variant($menu-success-bg,$menu-success-bg-hover);
}

// Modifier: `menu-info`
// -------------------------

.u-menu-info {
  @include menu-styles-variant($menu-info-bg,$menu-info-bg-hover);
}

// Modifier: `menu-warning`
// -------------------------

.u-menu-warning {
  @include menu-styles-variant($menu-warning-bg,$menu-warning-bg-hover);
}

// Modifier: `menu-danger`
// -------------------------

.u-menu-danger {
  @include menu-styles-variant($menu-danger-bg,$menu-danger-bg-hover);
}

// Modifier: `menu-dark`
// -------------------------

.u-menu-dark {
  @include menu-styles-variant($menu-dark-bg,$menu-dark-bg-hover);
}