// 每个主题特有的设置
.theme-#{$theme-name} {
  // 背景图片和遮罩
  .d2-layout-header-aside-group {
    background-color: $theme-bg-color;
    .d2-layout-header-aside-mask {
      background: $theme-bg-mask;
    }
  }

  // 菜单项目
  @mixin theme-menu-hover-style {
    color: $theme-menu-item-color-hover;
    i.fa {
      color: $theme-menu-item-color-hover;
    }
    background: $theme-menu-item-background-color-hover;
  }
  %ai-menu-icon {
    i {
      display: inline-block;
      width: 14px;
      text-align: center;
      margin-right: 5px;
    }
    svg {
      margin: 0px;
      height: 14px;
      width: 14px;
      margin-right: 5px;
    }
  }
  .ai-submenu__title {
    @extend %unable-select;
    @extend %ai-menu-icon;
  }
  // .ai-menu-item {
  //   @extend %unable-select;
  //   @extend %ai-menu-icon;
  // }
  .ai-submenu__title:hover {
    @include theme-menu-hover-style;
  }
  .ai-menu-item:hover {
    @include theme-menu-hover-style;
  }
  .ai-menu--horizontal .ai-menu-item:not(.is-disabled):hover {
    @include theme-menu-hover-style;
  }
  .ai-menu--horizontal .ai-menu .ai-submenu__title:hover {
    @include theme-menu-hover-style;
  }

  // 顶栏
  .d2-theme-header {
    background-color: $color-white-only;
    // left logo
    .logo-group {
      background-color: $theme-header-logo-bg-color;
    }
    // 顶栏菜单空间不足时显示的滚动控件
    .d2-theme-header-menu {
      .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;
        &:hover {
          color: $theme-header-item-color-hover;
          background: $theme-header-item-background-color-hover;
        }
      }
    }
    // 切换按钮
    .toggle-aside-btn {
      i {
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;
        &:hover {
          color: $theme-header-item-color-hover;
        }
      }
    }
    // 顶栏菜单
    .ai-menu {
      .ai-menu-item {
        transition: border-top-color 0s;
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;
        i.fa { color: inherit; }
        &:hover {
          color: $theme-header-item-color-hover;
          background: $theme-header-item-background-color-hover;
          i.fa { color: inherit; }
        }
        &:focus {
          color: $theme-header-item-color-focus;
          background: $theme-header-item-background-color-focus;
          i.fa { color: inherit; }
        }
        &.is-active {
          color: $theme-header-item-color-active;
          background: $theme-header-item-background-color-active;
          i.fa { color: inherit; }
        }
      }
      .ai-submenu {
        &.is-active {
          .ai-submenu__title {
            color: $theme-header-item-color-active;
            background: $theme-header-item-background-color-active;
            i.fa { color: inherit; }
          }
        }
        .ai-submenu__title {
          height: 50px;
          line-height: 50px;
          transition: border-top-color 0s;
          color: $theme-header-item-color;
          background: $theme-header-item-background-color;
          i.fa { color: inherit; }
          .ai-submenu__icon-arrow {
            color: $theme-header-item-color;
          }
          &:hover {
            color: $theme-header-item-color-hover;
            background: $theme-header-item-background-color-hover;
            i.fa { color: inherit; }
            .ai-submenu__icon-arrow {
              color: $theme-header-item-color-hover;
            }
          }
          &:focus {
            color: $theme-header-item-color-focus;
            background: $theme-header-item-background-color-focus;
            i.fa { color: inherit; }
            .ai-submenu__icon-arrow {
              color: $theme-header-item-color-focus;
            }
          }
        }
      }
    }
    // 顶栏右侧
    .d2-header-right {
      .btn-text {
        color: $theme-header-item-color;
        &.can-hover {
          &:hover {
            color: $theme-header-item-color-hover;
            background: $theme-header-item-background-color-hover;
          }
        }
      }
    }
  }
  // [布局] 顶栏下面
  .d2-theme-container {
    // 侧边栏
    .d2-theme-container-aside {
      background-color: $color-bg-aside-dark-normal;
      // 菜单为空的时候显示的信息
      .d2-layout-header-aside-menu-empty {
        background: $theme-aside-menu-empty-background-color;
        i {
          color: $theme-aside-menu-empty-icon-color;
        }
        span {
          color: $theme-aside-menu-empty-text-color;
        }
        &:hover {
          background: $theme-aside-menu-empty-background-color-hover;
          i {
            color: $theme-aside-menu-empty-icon-color-hover;
          }
          span {
            color: $theme-aside-menu-empty-text-color-hover;
          }
        }
      }
      // [菜单] 正常状态
      .ai-menu {
        .ai-menu-item {
          color: $theme-aside-item-color;
          //background: $theme-aside-item-background-color;
          i {
            color: $theme-aside-item-color;
          }
          &:hover {
            color: $theme-aside-item-color-hover;
            fill: $theme-aside-item-color-hover;
            background: $theme-aside-item-background-color-hover;
            i {
              color: $theme-aside-item-color-hover;
            }
          }
          &:focus {
            color: $theme-aside-item-color-focus;
            fill: $theme-aside-item-color-focus;
            background: $theme-aside-item-background-color-focus;
            i {
              color: $theme-aside-item-color-focus;
            }
          }
          &.is-active {
            color: $theme-aside-item-color-active;
            fill: $theme-aside-item-color-active;
            background: $theme-aside-item-background-color-active;
            i {
              color: $theme-aside-item-color-active;
            }
          }
        }
      }
      .ai-submenu {
        .ai-submenu__title {
          color: $theme-aside-item-color;
          background: $theme-aside-item-background-color;
          i {
            color: $theme-aside-item-color;
          }
          .ai-submenu__icon-arrow {
            color: $theme-aside-item-color;
          }
          &:hover {
            color: $theme-aside-item-color-hover;
            background: $theme-aside-item-background-color-hover;
            i {
              color: $theme-aside-item-color-hover;
            }
            .ai-submenu__icon-arrow {
              color: $theme-aside-item-color-hover;
            }
          }
        }
      }
    }
    .d2-theme-container-main {
      // 主体部分分为多页面控制器 和主体
      .d2-theme-container-main-header {
        // 多页面控制器 tabs
        .d2-multiple-page-control {
          .ai-tabs__item {
            height: 36px;
            line-height: 36px;
            min-width: 74px;
            padding: 0 8px;
            font-size: 14px;
            color: #666666;
            text-align: center;
            background-color: $theme-multiple-page-control-background-color;
          &:first-child {
            .ai-icon-close {
              display: none;
            }
          }
          }
          .ai-tabs__item.is-active {
            padding: 0 8px;
            text-align: center;
            color: $theme-multiple-page-control-text-color-active;
            background-color: $theme-multiple-page-control-background-color-active;
            border-bottom-color: $theme-multiple-page-control-border-color-active;
          }
        }
        // 多页控制器的关闭控制
        .d2-multiple-page-control-btn {
          .ai-dropdown {
            .ai-button-group {
              .ai-button {
                border-color: $theme-multiple-page-control-border-color;
              }
            }
          }
        }
      }
      // 主体
      .d2-theme-container-main-body {
        // 布局组件
        .container-component {
          margin: 20px;
          // [组件]
          // d2-container-full 填充型
          .d2-container-full {
            background-color: $color-container-bg;
            .d2-container-full__header {
              border-bottom: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
            .d2-container-full__body {
              background: $theme-container-background-color;
            }
            .d2-container-full__footer {
              border-top: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // d2-container-full-bs 填充型 滚动优化
          .d2-container-full-bs {
            border: $theme-container-border-outer;
            border-top: none;
            border-bottom: none;
            .d2-container-full-bs__header {
              border-bottom: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
            .d2-container-full-bs__body {
              background: $theme-container-background-color;
            }
            .d2-container-full-bs__footer {
              border-top: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // d2-container-ghost 隐形布局组件
          .d2-container-ghost {
            .d2-container-ghost__header {
              border-bottom: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .d2-container-ghost__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // d2-container-ghost-bs 隐形布局组件 滚动优化
          .d2-container-ghost-bs {
            .d2-container-ghost-bs__header {
              border-bottom: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .d2-container-ghost-bs__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // d2-container-card 卡片型
          .d2-container-card {
            .d2-container-card__header {
              border-bottom: $theme-container-border-inner;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .d2-container-card__body {
              .d2-container-card__body-card {
                background: $theme-container-background-color;
                border-left: $theme-container-border-outer;
                border-right: $theme-container-border-outer;
                border-bottom: $theme-container-border-outer;
              }
            }
            .d2-container-card__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // d2-container-card-bs 卡片型 滚动优化
          .d2-container-card-bs {
            .d2-container-card-bs__header {
              border-bottom: $theme-container-border-inner;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .d2-container-card-bs__body {
              .d2-container-card-bs__body-card {
                background: $theme-container-background-color;
                border-left: $theme-container-border-outer;
                border-right: $theme-container-border-outer;
                border-bottom: $theme-container-border-outer;
              }
            }
            .d2-container-card-bs__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
        }
      }
    }
  }
}