@import '~antd/es/style/themes/default.less';
@dark-menu-catatories-color: rgba(255, 255, 255, 0.65);
@primary-color: #1685ff;
@panda-prefix-cls: ~'@{ant-prefix}-panel-min';
.@{panda-prefix-cls}-mainPane {
  position: absolute;
  &-hidden {
    // display: none;
    flex: 1 1 0%;
    // position: relative;
    z-index: 5;
    background-color: rgb(247, 247, 247);
    // min-width: 490px;
    // max-width: 980px;
    width: 0;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
    transform: translateX(-1240px);
  }
  &-visible {
    display: block;
    flex: 1;
    position: absolute;
    z-index: 610;
    background-color: rgba(0, 21, 41, 0.99);
    min-width: 210px;
    max-width: 210px;
    overflow: hidden;
    height: 100%;
    transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
  }
  &-w110 {
    min-width: 110px;
    max-width: 110px;
  }
  &-w210 {
    min-width: 210px;
    max-width: 210px;
  }
  &-header {
    width: 100%;
    height: 40px;
    line-height: 20px;
    text-align: center;
    padding: 0 0 0 18px;
    display: inline-flex;
    align-items: center;
    &-title {
      color: #fff;
      padding-left: 12px;
    }
    .subheader {
      color: #fff;
      display: flex;
      align-items: center;
      margin-left: 20px;
      :global(.@{ant-prefix}icon-menu) {
        color: #737f97;
        padding-right: 12px;
      }
    }
    .marks {
      position: absolute;
      right: 12px;
      top: 8px;
    }
  }
  &-main {
    // padding: 32px 0px 0px 32px;
    padding: 0px 0px 0px 4px;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    &-left {
      // padding-top: 32px;
      // width: 125px;
      height: 100%;
      overflow: hidden auto;
      box-sizing: border-box;
      .menu-categories {
        &.min-cateorites {
          position: relative;
          top: 48px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .categorie-name {
          border-width: 0px 0px 0px 1px;
          border-top-style: initial;
          border-right-style: initial;
          border-bottom-style: initial;
          border-top-color: initial;
          border-right-color: initial;
          border-bottom-color: initial;
          border-image: initial;
          border-left-style: solid;
          border-left-color: rgb(222, 222, 222);
          display: flex;
          align-items: center;
          &.btn {
            box-sizing: border-box;
            outline: medium;
            background: none;
            cursor: pointer;
            font-family: inherit;
            font-size: inherit;
            text-decoration: none;
            transition: all 0.3s ease-out 0s;
            border: 1px solid transparent;
            vertical-align: middle;
            text-align: left;
            color: #555555;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 12px 12px;
            height: 74px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2px;
            &:hover {
              // border-left: 2px solid @primary-color;
              // span {
              //   color: #fff;
              // }
              span {
                color: #fff;
                transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
              }
            }
            &:hover,
            &:link:hover,
            &:visited:hover {
              color: #273150;
            }
          }
          img {
            width: 22px;
            height: 22px;
          }
          span {
            // margin-left: 12px;
            padding-top: 4px;
            color: @dark-menu-catatories-color;
            opacity: 1;
            transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
          }
          &.active {
            background-color: rgba(0, 0, 0, 0.2);
            // border-left: 2px solid @primary-2;
            transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
            span {
              color: #fff;
            }
          }
        }
      }
    }
    &-menus {
      flex: 1 1 0%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      margin-left: 12px;
      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
      &-recentAll {
        flex: 1 1 0%;
        padding: 0px 32px 32px 0px;
        overflow: auto;
        &-menu-group {
          margin-bottom: 12px;
          columns: 120px 3;
          column-gap: 12px;
          &-items {
            display: inline-block;
            margin-bottom: 20px;
            width: 100%;
            break-inside: avoid;
            .title {
              margin: 0px 0px 8px 0px;
              padding: 0px;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
              font-weight: 600;
              color: #fff;
              transition: all 250ms linear 0s;
            }
            &-menu-item {
              position: relative;
              transition: all 300ms ease 0s;
              display: flex;
              align-items: center;
              img {
                width: 14px;
                height: 14px;
              }
              &-name {
                box-sizing: border-box;
                outline: medium;
                background: none;
                cursor: pointer;
                font-family: inherit;
                font-size: inherit;
                text-decoration: none;
                transition: all 0.3s ease-out 0s;
                border: 1px solid transparent;
                vertical-align: middle;
                text-align: left;
                color: rgba(255, 255, 255, 0.65);
                display: block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0px 12px;
                height: 32px;
                line-height: 30px;
                &.pad {
                  padding: 0px 4px;
                }
                &:link,
                &:visited,
                &:hover {
                  // color: rgb(85, 85, 85);
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}