@import '~antd/es/style/themes/default.less';
@primary-color: #1685ff;
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(
  ~`colorPalette('@{primary-color}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
@slider-light: #fff;
@color-black: #fff;
@panda-prefix-cls: ~'@{ant-prefix}';

.@{panda-prefix-cls}-menu-item-children {
  height: 36px;
  background: #fff;
  box-shadow: rgb(240 241 242) 0px 2px 8px;
  position: fixed;
  top: 46px;
  width: 100%;
  z-index: 500;
  svg {
    path,
    rect,
    circle {
      fill: #c4cddb;
      stroke: #c4cddb;
      box-shadow: 0px 1px 2px 0px rgb(6 0 1 / 50%);
    }
  }
  img {
    filter: drop-shadow(10px 0px #c4cddb);
    transform: translateX(-10px);
  }

  & :global {
    .@{ant-prefix}-tabs-tab {
      padding: 7px 0 !important;
      margin: 0 32px 0 0 !important;
      &:hover {
        svg path,
        svg rect,
        svg circle {
          fill: @primary-color!important;
          stroke: @primary-color!important;
        }
        img {
          filter: drop-shadow(10px 0px @primary-color);
        }
        .menu-item-name {
          color: @primary-color;
        }
        .@{ant-prefix}-tabs-tab-btn {
          color: @primary-color;
        }
      }
      .@{ant-prefix}-tabs-tab-btn {
        .@{ant-prefix}-dropdown-trigger {
          div {
            div {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .menu-item {
    float: left;
  }
  & :global(.@{ant-prefix}-tabs-tab) {
    display: flex !important;
  }
  & :global(.@{ant-prefix}-tabs-tab-btn) {
    display: flex;
    position: relative;
    align-items: center;
    color: #737983;
    transform: scale(0.92);
  }
  & :global(.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn) {
    color: @primary-color!important;
  }
  & :global(.@{ant-prefix}-tabs-tab-btn > div > div) {
    display: flex;
  }
  & :global(.@{ant-prefix}-tabs-nav::before) {
    border-bottom: none !important;
  }

  .menu-item-name {
    margin-left: 8px;
    color: #737983;
    // transition: color .3s;
    transition: border-color 0.3s, color 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
    &:hover {
      color: @primary-color;
    }
  }
  & :global {
    .@{ant-prefix}-divider-vertical {
      left: 20px;
      margin: 0 1px !important;
    }
    .@{ant-prefix}-tabs-nav-operations {
      .ant-tabs-nav-more {
        margin-right: 0px !important;
      }
    }
  }
  & :global(.@{ant-prefix}-tabs-ink-bar) {
    background: @primary-color!important;
  }
  & :global(.@{ant-prefix}-tabs-tab-active) {
    color: @primary-color!important;
  }
  & :global(.@{ant-prefix}-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
    color: @primary-color!important;
  }
  & :global {
    .@{ant-prefix}-tabs-tab-active svg path,
    .@{ant-prefix}-tabs-tab-active svg rect,
    .@{ant-prefix}-tabs-tab-active svg circle {
      fill: @primary-color!important;
      stroke: @primary-color!important;
    }
    .@{ant-prefix}-tabs-tab-active img {
      filter: drop-shadow(10px 0px @primary-color);
    }
  }
  & :global(.@{ant-prefix}-tabs-nav-wrap) {
    margin-left: 22px;
  }

  & :global(.@{ant-prefix}-dropdown-trigger) {
    display: flex;
    align-items: center;
  }
  & :global(.@{ant-prefix}-tabs-nav) {
    margin: 0px !important;
  }
}
