@import "./../../../scss/sipsd-animation.scss";
$menu-item-height: 49px;

.sipsd-sidebar-subMenu {
  width: 100%;
  color: #b1b1b1;
  border-bottom: 1px solid #484848;
}

.expanded,
.hover-subMenu {
  background-color: #333;
}

.menu-item-content {
  height: $menu-item-height;
  line-height: $menu-item-height;
  white-space: nowrap;
  text-shadow: none;
  font-size: 15px;
  color: #b1b1b1;
  overflow: hidden;
  cursor: pointer;

  &:hover {
    i {
      color: #00abff;
    }

    span {
      color: #fff;
    }

    .expanded-sign {
      color: #b1b1b1;
    }
  }
}

.menu-item-icon {
  display: block;
  height: 100%;
  text-align: center;
  font-size: 20px;
  float: left;
}

.menu-item-name {
  display: block;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expanded-sign {
  float: right;
  width: 10px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  margin-right: 15px;
}

.rotate90 {
  transform: rotate(180deg);
}

.subMenu-content {
  &.show-subMenu-content {
    /deep/ {
      .sipsd-sidebar-menu-item {
        height: 40px;
        animation-name: sipsd-sidebar-show-menu-item;
        animation-duration: 0.55s;
      }

      .sipsd-sidebar-menu-item,
      .sipsd-sidebar-subMenu {
        .menu-item-content {
          height: 40px;
        }
      }
    }
  }

  &.hide-subMenu-content {
    /deep/ {
      .sipsd-sidebar-menu-item {
        height: 0;
        animation-duration: 0.55s;
        animation-name: sipsd-sidebar-hide-menu-item;
      }

      .sipsd-sidebar-menu-item,
      .sipsd-sidebar-subMenu {
        .menu-item-content {
          height: 0;
        }
      }
    }
  }

  /deep/ {
    .menu-item-content {
      height: 40px;
      line-height: 40px;
      transition: 0.55s height;
    }

    .expanded-sign {
      line-height: 40px;
    }

    .sipsd-sidebar-subMenu {
      border-bottom: 0;
    }

    .sipsd-sidebar-menu-item {
      height: 40px;
      line-height: 40px;
      border-bottom: 0;

      &:hover {
        border-left: 3px solid #00a3ec;

        .menu-item-content {
          margin-left: -3px;
          color: #00abff;

          span {
            color: #fff;
          }
        }
      }
    }
  }
}

@keyframes sipsd-sidebar-show-menu-item {
  0% {
    height: 0;
    opacity: 0;
  }

  100% {
    height: 40px;
    opacity: 1;
  }
}

@keyframes sipsd-sidebar-hide-menu-item {
  0% {
    height: 40px;
    opacity: 1;
  }

  100% {
    height: 0;
    opacity: 0;
  }
}