@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";

// @import "../node_modules/bee-animate/src/Animate.scss";
$dropdown-menu-title-color: #909090;
.u-dropdown{
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: $zindex-dropdown;
  display: block;
  font-size: $dropdown-menu-font-size;
  font-weight: normal;
  line-height: 1.5;

  &-hidden {
    display: none;
  }

  &-menu {
    outline: none;
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: $dropdown-margin;
    text-align: left;
    background-color: #fff;
    border-radius: $dropdown-border-radius;
    box-shadow: $dropdown-shadow;
    background-clip: padding-box;
    // border: 1px solid $dropdown-border-color;

    > li {
      margin: 0;
      padding: 0;
    }
    &-submenu{
        position: relative;
        &-title {
          margin: 0;
          position: relative;
          display: block;
          white-space: nowrap;
          padding:$dropdown-menu-item-padding;
          line-height: $dropdown-menu-item-light-height;
          height: $dropdown-menu-item-height;
          overflow: hidden;
          text-overflow: ellipsis;
          &:hover{
            background: $hover-bg-color-base;
          }
        }
        &-vertical > &-title:after{
            transform: rotate(270deg) scale(0.75);
            font-family: "uf";
            font-style: normal;
            vertical-align: baseline;
            text-align: center;
            text-transform: none;
            text-rendering: auto;
            position: absolute;
            transition: transform .3s ease;
            content: "\e609";
            right: 16px;
            top: 0;
            display: inline-block;
            font-size: 8px \9;
            /* transform: scale(0.66667) rotate(0deg); */
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
            zoom: 1;
        }
    }
    &-hidden {
      display: none;
    }

    &:before {
      content: "";
      position: absolute;
      top: -4px;
      left: 0;
      width: 100%;
      height: 4px;
      background: rgb(255, 255, 255);
      background: rgba(255, 255, 255, 0.01);
    }
    &-item-group-title {
        color: $dropdown-menu-title-color;
        font-size: $dropdown-menu-title-font-size;
        line-height: $dropdown-menu-title-line-height;
        padding: $dropdown-menu-title-padding;
    }
    & > &-item {
      position: relative;
      display: block;
      padding:$dropdown-menu-item-padding;
      line-height: $dropdown-menu-item-light-height;
      height: $dropdown-menu-item-height;
      overflow: hidden;
      text-overflow: ellipsis;
      clear: both;
      font-weight: normal;
      //color: #666666;
      white-space: nowrap;




      &:hover, &-active, &-selected {
        background-color: $hover-bg-color-base;
        cursor: pointer;
      }
      // &-active{
      //   color: $brand-primary;
      // }
      &-selected{
        color: $brand-primary;
        background-color: $selected-bg-color-base;
        position: relative;
        &:hover{
          background-color: $selected-bg-color-base;
        }
      }

      &-disabled {
        color: $disabled-color-base;
        cursor: not-allowed;
        //pointer-events: none;

        &:hover {
          color: $disabled-color-base;
          background-color: #fff;
          cursor: not-allowed;
        }
      }

      &:last-child {
        border-bottom-left-radius: $dropdown-border-radius;
        border-bottom-right-radius: $dropdown-border-radius;
      }

      &:first-child {
          margin-top: 5px;
        border-top-left-radius: $dropdown-border-radius;
        border-top-right-radius: $dropdown-border-radius;
      }

      &-divider {
        height: 1px;
        margin: 1px 0;
        overflow: hidden;
        background-color:$dropdown-item-divier-bg-color;
        line-height: 0;
      }
    }

    &-item-group{
        &-list{
            padding: 0;
            & > .u-dropdown-menu-item{
                padding:$dropdown-menu-item-padding;
                line-height: $dropdown-menu-item-light-height;
                height: $dropdown-menu-item-height;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover{
                  background: $hover-bg-color-base;
                }
                &-selected{
                  color: $brand-primary;
                  background: $selected-bg-color-base;
                  &:hover{
                    background: $selected-bg-color-base;
                  }
                }
            }
        }
    }

    &-vertical{
        .u-dropdown-menu{
            top: 0;
            position: absolute;
            min-width: 160px;
            margin-left: 4px;
        }
    }
  }

  @mixin effect() {
    animation-duration: 0.1s;
    animation-fill-mode: both;
    transform-origin: 0 0;
    display: block;
  }

  &-slide-up-enter,&-slide-up-appear {
    @include effect();
    opacity: 0;
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-play-state: paused;
  }

  &-slide-up-leave {
    @include effect();
    opacity: 1;
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    animation-play-state: paused;
  }


}

.u-dropdown-slide-up-enter.u-dropdown-slide-up-enter-active,
.u-dropdown-slide-up-appear.u-dropdown-slide-up-appear-active {
    &.u-dropdown-placement-bottomLeft, &.u-dropdown-placement-bottomCenter, &.u-dropdown-placement-bottomRight{
        animation-name: uDropdownSlideUpIn;
        animation-play-state: running;
    }
}

.u-dropdown-slide-up-enter.u-dropdown-slide-up-enter-active,
.u-dropdown-slide-up-appear.u-dropdown-slide-up-appear-active{
    &.u-dropdown-placement-topLeft, &.u-dropdown-placement-topCenter, &.u-dropdown-placement-topRight{
        animation-name: uDropdownSlideDownIn;
        animation-play-state: running;
    }
}

.u-dropdown-slide-up-leave.u-dropdown-slide-up-leave-active{
    &.u-dropdown-placement-bottomLeft,
    &.u-dropdown-placement-bottomCenter,
    &.u-dropdown-placement-bottomRight {
        animation-name: uDropdownSlideUpOut;
        animation-play-state: running;
    }
}

.u-dropdown-slide-up-leave.u-dropdown-slide-up-leave-active{
    &.u-dropdown-placement-topLeft,
    &.u-dropdown-placement-topCenter,
    &.u-dropdown-placement-topRight {
        animation-name: uDropdownSlideDownOut;
        animation-play-state: running;
    }

}

@keyframes uDropdownSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}
@keyframes uDropdownSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}

@keyframes uDropdownSlideDownIn {
  0% {
    opacity: 0;
    transform-origin: 0% 100%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scaleY(1);
  }
}
@keyframes uDropdownSlideDownOut {
  0% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 100%;
    transform: scaleY(0);
  }
}