@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.less';

.pro-layout-open-menu {
  color: #fff;

  .@{ant-prefix}-menu-root {
    overflow-y: auto !important;

    &>.@{ant-prefix}-menu-submenu>.@{ant-prefix}-menu-submenu-title,
    &>.@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
      padding-left: 16px !important;
    }

    &>.@{ant-prefix}-menu-submenu {
      .@{ant-prefix}-menu-sub {
        background: #1A202D;
      }

      &>.@{ant-prefix}-menu-sub>.@{ant-prefix}-menu-submenu>.@{ant-prefix}-menu-submenu-title,
      &>.@{ant-prefix}-menu-item-only-child,
      &>.@{ant-prefix}-menu-sub>.@{ant-prefix}-menu-item-only-child {
        padding-left: 16px !important;
      }
    }

    &>.@{ant-prefix}-menu-item-only-child {
      min-height    : 48px;
      padding-top   : 12px;
      padding-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) * var(--zaui-size; 1));
      margin        : 0;
      height        : auto;

      h2 {
        line-height: initial !important;
        height     : auto !important;
        white-space: pre-wrap;
      }
    }

    .@{ant-prefix}-menu-item {
      padding-left: 30px !important;

      &::after {
        display: none;
      }
    }

  }

  .@{ant-prefix}-menu-inline {
    .@{ant-prefix}-menu-submenu-title {
      margin: 0;
    }
  }

  .@{ant-prefix}-menu-item,
  .@{ant-prefix}-menu-submenu-title {
    &:hover {
      background: var(--ant-primary-8, #003eb3);

      h2 {
        color: #fff;
      }

    }
  }


  .@{ant-prefix}-menu.@{ant-prefix}-menu-dark {
    background: #1A202D;
    overflow-x: hidden;

    .@{ant-prefix}-menu-item-only-child {
      &:hover {
        background: var(--ant-primary-8, #003eb3);

        h2 {
          color: #fff;
        }
      }
    }
  }

  .@{ant-prefix}-menu-item-selected {
    background: var(--zaui-brand, #006aff) !important;

    h2 {
      color: #fff !important;
    }
  }

  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline>.@{ant-prefix}-menu-item,
  .@{ant-prefix}-menu-submenu-title {
    white-space: pre-wrap;
    line-height: initial !important;
    height     : auto !important;
    margin     : 0;
    padding: 12px 0;
    min-height : 48px;
  }

  .@{ant-prefix}-menu-title-content {


    div {
      display        : flex;
      align-items    : center;
      justify-content: left;

      .pro-layout-icon {
        flex  : 0 0 20px;
        width : 20px;
        height: 20px;
        color : #CACACA;
      }

      h2 {
        flex-grow    : 1;
        margin-bottom: 0;
        opacity      : 1;
        transition   : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
        display      : inline-block;
        padding-left : 12px;
        color        : #CACACA;
        font-weight  : 400;
        font-size    : var(--zaui-font-size-md, 14px);
      }
    }


  }

  .anticon-caret-down {
    color     : #CACACA;
    transform : rotateZ(0deg);
    top       : auto;
    transition: all 0.1s ease-in;
  }

  .@{ant-prefix}-menu-submenu-open {
    .anticon-caret-down {
      transform: rotateZ(180deg);
      color    : #fff;
    }

    .@{ant-prefix}-menu-submenu-inline {
      .anticon-caret-down {
        transform: rotateZ(0deg);
        color    : #CACACA;
      }

      &.@{ant-prefix}-menu-submenu-open {
        .anticon-caret-down {
          transform: rotateZ(180deg);
          color    : #fff;
        }
      }
    }
  }

  .@{ant-prefix}-menu-submenu:hover>.@{ant-prefix}-menu-submenu-title>.@{ant-prefix}-menu-submenu-expand-icon {
    color: #fff;
  }

  .@{ant-prefix}-menu-submenu-selected {
    &>.@{ant-prefix}-menu-submenu-title {
      .@{ant-prefix}-menu-title-content div {
        .pro-layout-icon {
          color: #fff;
        }

        h2 {
          font-weight: bold;
          color      : #fff;
        }
      }

    }

    .@{ant-prefix}-menu-item-only-child .@{ant-prefix}-menu-title-content div {
      .pro-layout-icon {
        color: #CACACA;
      }

      h2 {
        font-weight: 400;
        color      : #CACACA;
      }
    }

  }
}