@m-layout-prefix-cls: m-layout;

.@{m-layout-prefix-cls}-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  background: #f7f9fc;
  box-shadow: 1px 0 0 0 #edf1f7;
  transition: all 0.5s;

  &-item {
    display: flex;
    align-items: center;

    i {
      padding-right: 4px;
    }
  }

  &-item,
  &-sub {
    height: auto !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 40px !important;
    color: #324558;
    cursor: pointer;

    i {
      // padding-right: 4px;
      font-size: 16px !important;
    }
  }

  &-item:hover {
    background: #eff2f6;
  }

  .ant-menu {
    background: none;
  }

  .ant-menu-submenu-arrow {
    display: none;
  }

  .ant-menu-item-selected {
    font-weight: 500;
    color: #324558;
    background: #eff2f6 !important;
  }

  .ant-menu-item:hover {
    color: unset;
  }
  .ant-menu-submenu-title:hover {
    color: #324558;
    background: #eff2f6;
  }

  .ant-menu-item:active,
  .ant-menu-submenu-title:active {
    background: none;
  }

  .ant-menu-item,
  .ant-menu-submenu-title,
  .ant-menu-item:not(:last-child) {
    margin: 0;
    i {
      margin-right: unset;
    }
  }

  .ant-menu-inline.ant-menu-root .ant-menu-item,
  .ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
    display: flex;
    align-items: center;
  }

  .ant-menu-light .ant-menu-item-active,
  .ant-menu-light .ant-menu-item:hover,
  .ant-menu-light .ant-menu-submenu-active,
  .ant-menu-light .ant-menu-submenu-title:hover,
  .ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
    color: unset;
  }

  .ant-menu-item .anticon + span,
  .ant-menu-submenu-title .anticon + span {
    margin-left: 0;
  }

  .ant-menu-item::after {
    border-right: unset;
  }

  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: none;
  }

  &-close {
    display: none;
  }

  &-toggle {
    position: absolute;
    top: 50%;
    right: -1px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transform: translateY(-50%);
  }

  &-hidden {
    display: flex;
    justify-content: center;
    height: 100%;
    padding-top: 0.65em;
    cursor: pointer;
    background: #f7f9fd;
    box-shadow: 1px 0 0 0 #e9ecf2;
  }

  &-icon {
    margin-right: 4px !important;
  }

  &-arrow {
    position: absolute;
    top: 50%;
    left: 8px;
    width: 10px;
    margin-top: -4px;
    color: rgba(0, 0, 0, 0.85);
  }

  &-arrow-rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}