@import '../styles/themes/themes.less';
@import '../styles/mixins/mixins.less';

.collapse {
  width: @menu-collapse-width;
}

.open {
  background: @submenu-bg-color;
}

.@{bk-prefix}-menu {
  display: flex;
  flex-direction: column;
  width: @menu-width;
  background-color: @menu-bg-color;
  transition: width .3s ease-out;

  &.is-collapse {
    .collapse();
  }

  &-submenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: center;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    transition: width .3s ease-out;

    &.is-opened {
      .open();
    }

    &:hover {
      color: @menu-active-color;
      cursor: pointer;
    }

    .submenu-header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;

      &.is-collapse {
        color: @menu-active-color;
        background: @menu-active-bg-color;
      }

      &-icon {
        display: flex;
        flex: 0 0 @menu-collapse-width;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 18px;

        .menu-icon {
          .icon-size(16px, 16px);
          color: #b0bdd5;
        }
      }

      &-content {
        display: flex;
        flex: 1;
        align-items: center;
        height: 100%;
        color: #acb9d1
      }

      &-collapse {
        .icon-size(16px, 16px);
        margin-right: 16px;
        color: #acb9d1;
        transition: transform .3s ease-out;
        transform: rotate(-90deg);

        &.is-collapse {
          transform: rotate(0deg);
        }
      }
    }

    .submenu-list {
      display: flex;
      flex: 1;
      flex-direction: column;
      width: 100%;
      padding: 0;
      margin: 0;

      /* stylelint-disable-next-line declaration-no-important */
      transition-property: all !important;
    }
  }

  &-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 2px 0;
    overflow: hidden;
    font-size: 14px;
    color: @menu-color;
    text-overflow: clip;
    white-space: nowrap;
    transition: width .3s ease-in-out;

    &:hover {
      color: @menu-active-color;
      cursor: pointer;
      background-color:  #31394F;;
    }

    &.is-active {
      color: @menu-active-color;
      background: @menu-active-bg-color;
    }

    &.is-disabled {
      color: @menu-group-color;
      cursor: not-allowed;
      
      &:hover {
        color: @menu-group-color;
        cursor: not-allowed;
        background: none;
      }
      
      .default-icon {
        opacity: 0.4;
      }
    }

    .item-icon {
      display: flex;
      flex: 0 0 @menu-collapse-width;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 18px;

      .default-icon {
        display: inline-block;
        width: 3px;
        height: 3px;
        background: @menu-group-color;
        background-color: @menu-active-color;
        border-radius: 50%;
      }
    }

    .item-content {
      display: flex;
      flex: 1;
      align-items: center;
      height: 100%;
    }
  }

  &-group {
    display: flex;
    flex-direction: column;

    .group-name {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      height: 40px;
      margin: 0 18px;
      overflow: hidden;
      font-size: 12px;
      line-height: 16px;
      color: @menu-group-color;
      text-overflow: clip;
      white-space: nowrap;
    }

    .group-wrap {
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0;
    }
  }

  .collapse-transition {
    transition: all .3s ease-in-out;
  }
}
