.bcBlack {
  background: url(../../../../../images/nav-black.svg);
}
.bcBlackHover {
  background: url(../../../../../images/nav-black-hover.svg);
}
.bcWhite {
  background: url(../../../../../images/nav-white.svg);
}
.bcWhiteHover {
  background: url(../../../../../images/nav-white-hover.svg);
}
// 左右菜单主题公共样式
.leftThemePublic {
  position: absolute;
  top: 50%;
  left: -17px;
  width: 18px;
  height: 94px;
  margin-top: -47px;
  content: '';
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 顶部导航公共样式
.topThemePublic {
  position: absolute;
  top: 21px;
  right: 50%;
  width: 18px;
  height: 94px;
  margin-right: -9px;
  content: '';
  cursor: pointer;
  z-index: 3;
  transform: rotate(90deg);
  transition: transform 1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
// 白色主题公共样式
.whiteThemePublic {
  color: rgba(24, 26, 36, 0.7);
  .bcWhite();
  &:hover {
    .bcWhiteHover();
  }
}
//  黑色主题公共样式
.blackThemePublic {
  color: rgb(255, 255, 255, 0.7);
  .bcBlack();
  &:hover {
    .bcBlackHover();
  }
}

// 左右边 白色主题 黑色主题
.leftThemeWhite {
  .leftThemePublic();
  .whiteThemePublic();
}
.leftThemeBlack {
  .leftThemePublic();
  .blackThemePublic();
}

// 顶部 白色主题 黑色主题
.topThemeWhite {
  .topThemePublic();
  .whiteThemePublic();
}
.topThemeBlack {
  .topThemePublic();
  .blackThemePublic();
}

.changeNavBtnOpenY {
  transform: translateY(-60px) rotate(90deg);
}
.changeNavBtnCloseY {
  transform: translateY(60px) rotate(90deg);
}
