@import '../../style/index.less';

@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-layout-sider';

.@{pro-layout-sider-menu-prefix-cls} {
  //border: 1px red dashed;
  position: relative;
  height: auto;
  transition: background-color 0.3s;
  z-index: 9;

  .@{ant-prefix}-layout-sider-children {
    //border: 1px darkgreen dashed;
    display: flex;
    flex-direction: column;

    &:hover {
      ::-webkit-scrollbar {
        display: block;
      }
    }

    .header {
      position: relative;
      margin: 16px 0 0;
      cursor: pointer;

      .logo-container {
        .logo {
          img {
            width: 100%;
          }
        }
      }
    }

    .extra {
      //margin-bottom: 16px;
      //padding: 0 16px;
      //
      //&-no-logo {
      //  margin-top: 16px;
      //}
    }

    .menu {
      position: relative;
      z-index: 10;
      flex: 1;
      overflow: hidden auto;
    }

    .footer {
      flex: 0 0 48px;
      min-width: 48px;
      z-index: 200;
      cursor: pointer;
      height: 48px;
      display: flex;
      align-items: center;
      padding-left: 16px;
    }

    ::-webkit-scrollbar {
      display: none;
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
    }

    /* 滚动条滑块 */

    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
  }

  &.@{ant-prefix}-layout-sider-light {
    .@{ant-prefix}-layout-sider-children {
      ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.025);
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
      }

      ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
      }
    }
  }

  .@{ant-prefix}-menu-inline-collapsed {
    .@{ant-prefix}-menu-item,
    .@{ant-prefix}-menu-submenu-title {
      padding: 0 !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

//.ant-menu-inline-collapsed {width: 48px;}
//.ant-layout-sider-children {width: 210px;margin-top: 48px;}