@font-face {
  font-weight: normal;
  font-family: PuHuiTi;
  src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),
    /* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: PuHuiTi;
  src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
    /* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  font-display: swap;
}

html {
  direction: initial;

  &.rtl {
    direction: rtl;
  }
}

body {
  overflow-x: hidden;
  color: @site-text-color;
  font-size: @font-size-base;
  font-family: @font-family;
  background: @body-background;
  transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

a {
  transition: color 0.3s ease;
}

.main-wrapper {
  position: relative;
  padding: 40px 0 0;
  background: @component-background;
}

.main-container {
  position: relative;
  min-height: 500px;
  padding: 0 170px 32px 64px;
  background: @component-background;

  .ant-row-rtl & {
    padding: 0 64px 144px 170px;
  }
}

.main-menu {
  z-index: 1;

  &-inner {
    height: 100%;
    max-height: 100vh;
    overflow: hidden;
  }

  &:hover &-inner {
    overflow-y: auto;
  }

  > div,
  > div > div {
    height: 100%;
  }
}

.aside-container {
  min-height: 100%;
  padding-bottom: 48px;
  font-family: Avenir, @font-family, sans-serif;

  &.ant-menu-inline {
    .ant-menu-submenu-title h4,
    > .ant-menu-item,
    .ant-menu-item a {
      overflow: hidden;
      font-size: 14px;
      text-overflow: ellipsis;
    }

    > .ant-menu-item-group > .ant-menu-item-group-title {
      margin-top: 16px;
      margin-bottom: 16px;
      font-size: 13px;

      &::after {
        position: relative;
        top: 12px;
        display: block;
        width: calc(100% - 20px);
        height: 1px;
        background: @border-color-split;
        content: '';
      }
    }

    > .ant-menu-item,
    > .ant-menu-submenu > .ant-menu-submenu-title,
    > .ant-menu-item-group > .ant-menu-item-group-title,
    > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
    &.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
      padding-left: 40px !important;

      .ant-row-rtl & {
        padding-right: 40px !important;
        padding-left: 16px !important;
      }
    }

    // Nest Category > Type > Article
    &.ant-menu-inline {
      .ant-menu-item-group-title {
        padding-left: 60px;

        .ant-row-rtl & {
          padding-right: 60px;
          padding-left: 16px;
        }
      }

      .ant-menu-item-group-list > .ant-menu-item {
        padding-left: 80px !important;

        .ant-row-rtl & {
          padding-right: 80px !important;
          padding-left: 16px !important;
        }
      }
    }

    .ant-menu-item-group:first-child {
      .ant-menu-item-group-title {
        margin-top: 0;
      }
    }
  }

  a[disabled] {
    color: #ccc;
  }

  .menu-item-link-outside {
    position: relative;

    .anticon {
      position: absolute;
      top: 16px;
      right: -10px;
      color: @primary-color;
      font-size: 12px;
      opacity: 0;
      transition: all 0.3s;
    }

    &:hover .anticon {
      opacity: 1;
    }
  }
}

.aside-container .chinese {
  margin-left: 6px;
  font-weight: normal;
  font-size: 12px;
  opacity: 0.67;
}

.outside-link {
  display: inline-block;
}

.outside-link-icon {
  margin-left: 5px;
  color: #aaa;
  font-size: 12px;

  .ant-row-rtl & {
    margin-right: 5px;
    margin-left: 0;
    transform: rotate(180deg);
  }
}

.mobile-menu-trigger {
  position: fixed;
  top: 72px;
  left: 0;
  z-index: 10;
  padding: 2px 6px;
  color: #777;
  font-size: 12px;
  background: #fff;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;

  &:hover {
    color: #333;
  }
}

// reset menu text color
.menu-site {
  .ant-menu-item > a {
    color: @site-text-color;
  }

  .ant-menu-item-selected > a,
  .ant-menu-item > a:hover {
    color: @primary-color;
  }
}

#react-content {
  height: 100%;
  transition: transform 0.3s @ease-in-out-circ;
}

.drawer-content {
  padding: 40px 0;

  &-wrapper {
    background-color: @component-background;
  }
}

.drawer {
  z-index: 1029;
}

#_hj_feedback_container {
  [class$='icon_emotion_path1']::before {
    color: @primary-color !important;
  }
}

.fixed-widgets {
  position: fixed;
  right: 32px;
  bottom: 102px;
  z-index: 2147483640;
  display: flex;
  flex-direction: column;
  cursor: pointer;

  &-tooltip {
    .ant-tooltip-inner {
      min-width: 100px;
    }
  }

  & > div {
    display: block;
  }

  &-active {
    color: @primary-color;
  }

  & &-avatar {
    color: #000;
    background-color: #fff;
    box-shadow: @shadow-2;
    transition: color 0.3s;

    &:hover {
      color: @primary-color;
    }
  }
}

// keep transition consistent to make mode toggle animation be more smooth, include:
// nav bar background
// nav search border
// nav menu background
// wrapper content
// sidemenu background
// sidemenu active background
// content background
// affix toc
#header,
#header #search-box,
#header #nav.ant-menu,
.main-wrapper,
.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu,
.main-wrapper
  > .ant-row
  > .main-menu
  .main-menu-inner
  > .ant-menu.aside-container.ant-menu-inline
  > .ant-menu-item-group
  > .ant-menu-item-group-title::after,
.main-wrapper .main-container,
#demo-toc.toc {
  transition: all 0.3s @ease-in-out-circ;
}

// remove margin-bottom from dark theme (why need margin-bottom in dark theme?)
#header > .ant-row > .ant-col h1 {
  margin-bottom: 0;
}