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

@import "../components/Layout/index.less";
@import "../components/ProCollapse/style/index.less";
@import "../components/ProFooter/style/index.less";
@import "../components/ProHeader/style/index.less";


.pro-layout {
  display       : flex;
  flex-direction: column;
  background    : var(--zaui-base-bg, #ffffff);

  .pro-layout-menu-open {
    .pro-layout-open-menu-lv1 {
      h2 {
        font-weight: bold;
      }
    }
  }

  // light模式
  &.pro-layout-light {


    .pro-layout-menu-open,
    .pro-layout-menu {
      box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
    }

    .pro-layout-open-menu .@{ant-prefix}-menu-title-content div .pro-layout-icon {
      color   : var(--zaui-text, #343434);
      position: relative;
      z-index : 1;
    }

    .pro-layout-menu-fold-list {
      li {
        position: relative;

        &>div {
          position: relative;
          z-index : 1;
        }

        &.active {
          background: transparent;

          div .pro-layout-icon {
            color: #fff;
          }

          &::before {
            content         : '';
            border-radius   : var(--zaui-border-radius, 4px);
            background-color: var(--zaui-brand, #006aff);
            height          : 38px;
            position        : absolute;
            left            : 5px;
            top             : 4px;
            width           : calc(100% - 10px);
            opacity         : 1 !important;
          }
        }

        &:hover {
          background: transparent;

          &::before {
            content         : '';
            border-radius   : var(--zaui-border-radius, 4px);
            background-color: var(--zaui-brand, #006aff);
            height          : 38px;
            position        : absolute;
            left            : 5px;
            top             : 4px;
            width           : calc(100% - 10px);
            opacity         : 0.08;
          }

        }

        div .pro-layout-icon {
          color: var(--zaui-text, #343434);
        }
      }
    }


    .pro-layout-menu-fold-list li.active {
      border-radius: var(--zaui-border-radius, 4px);
    }

    .pro-layout-menu-collapsed {
      position: relative;

      &::before {
        content   : '';
        height    : 1px;
        background: #DEE0E3;
        width     : calc(100% - 16px);
        position  : absolute;
        top       : 0;
        left      : var(--zaui-space-size-sm, 8px);

      }
    }

    .pro-layout-row {
      .pro-layout-arrow {
        border-color: var(--zaui-text, #343434);
      }
    }

    .pro-layout-menu-collapsed {
      background: var(--zaui-base-bg, #fff);
    }

    .@{ant-prefix}-menu-root {
      overflow-x: hidden !important;
    }

    .anticon-caret-down {
      color: #CACACA !important;
    }

    .pro-layout-row .pro-layout-menu {
      background: var(--zaui-base-bg, #ffffff);
    }

    .pro-layout-open-menu .@{ant-prefix}-menu-root>.@{ant-prefix}-menu-submenu .@{ant-prefix}-menu-sub {
      background: var(--zaui-base-bg, #ffffff);
    }

    .pro-layout-open-menu .@{ant-prefix}-menu-title-content div h2 {
      color: var(--zaui-text, #343434);
    }

    .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
    .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover {
      background: transparent;
      position  : relative;

      &:before {
        content         : '';
        border-radius   : var(--zaui-border-radius, 4px);
        background-color: var(--zaui-brand, #006aff);
        opacity         : 0.08;
        height          : 38px;
        position        : absolute;
        left            : var(--zaui-space-size-sm, 8px);
        width           : calc(100% - 16px);
      }
    }

    .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
      &::after {
        display: none;
      }

      background: transparent !important;

      h2 {
        color: var(--zaui-brand, #006aff) !important;
      }
    }
  }

  .pro-layout-row-has-notice {
    .pro-layout-content {
      min-height: calc(100vh - 80px);
    }
  }

  /** 内容区 */
  .pro-layout-content {
    flex       : auto;
    margin-left: 48px;
    padding    : 0 var(--zaui-space-size-lg, 32px);
    transition : all 0.3s ease-in-out;
    z-index    : 1;
    flex       : auto;
    min-height : calc(100vh - 48px);
    margin-top : 48px;

    &.pro-layout-has-notice {
      margin-top: 80px;
      min-height: calc(100vh - 80px);
    }
  }

  .pro-layout-row-pure {
    .pro-layout-content {
      margin: 0 !important;
    }
  }

  .pro-layout-row-top-pure {
    .pro-layout-content {
      margin-top: 0 !important;
    }
  }

  .pro-layout-row-left-pure {
    .pro-layout-content {
      margin-left: 0 !important;
    }
  }

  .pro-layout-header-pure+.pro-layout-row {
    .pro-layout-sider-new-nav {
      top: 0 !important;
    }
  }
}