/**
 * @copyright chuzhixin 1204505056@qq.com
 * @description 暗黑之子主题（VIP群专享）
 */
@charset "utf-8";

.vue-admin-beautiful-theme-dark {
  $base-menu-background: #2e2f34;
  $base-menu-background-active: #000;
  $base-color-blue: #000;

  color: #fff !important;
  background-color: #2e2f34 !important;

  *:not(a):not([class*="svg"]):not(.el-drawer__wrapper):not(.el-drawer__container) {
    color: #fff !important;
    background-color: #2e2f34 !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }

  .is-active:not(li) {
    *:not(a):not([class*="svg"]) {
      color: #fff !important;
      background-color: #000 !important;
      border-color: #999 !important;
    }
  }

  .svg-external-icon {
    color: #fff !important;
  }

  .el-scrollbar__bar {
    display: none;
  }

  @mixin container {
    background: $base-menu-background !important;
  }

  @mixin active {
    &:hover {
      background-color: $base-menu-background-active !important;
    }

    &.is-active {
      background-color: $base-menu-background-active !important;
    }
  }

  .logo-container-horizontal {
    @include container;
  }

  .logo-container-vertical {
    @include container;
  }

  .el-menu {
    @include container;

    .el-submenu__title {
      @include container;
    }

    .el-menu-item {
      @include container;
    }
  }

  .side-bar-container {
    @include container;

    .el-menu-item {
      @include active;
    }
  }

  .top-bar-container {
    @include container;

    .vab-main {
      @include container;

      .el-menu {
        &--horizontal {
          .el-submenu,
          .el-menu-item {
            &.is-active {
              background-color: $base-menu-background-active !important;
            }
          }

          > .el-menu-item {
            &.is-active {
              border-bottom: 3px solid $base-menu-background-active !important;
            }
          }
        }
      }
    }
  }

  .tabs-bar-container {
    background: $base-color-white;
    border-top: 1px solid #f6f6f6;

    .tags-content {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            background: $base-color-blue !important;
            border: 1px solid $base-color-blue !important;
          }
        }
      }
    }
  }

  .theme-bar-setting {
    background: $base-color-blue !important;
  }
}