/**
 * @description 绿荫草场主题
 */

.dgiot-theme-red {
  $base-menu-background: #20222a;

  $base-color-blue: #f34d37;
  $base-color-green: #67c23a;
  $base-color-yellow: #e6a23c;
  $base-color-red: #f56c6c;
  @import '../default.scss';

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

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

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

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

  .logo-container-vertical,
  .logo-container-horizontal,
  .logo-container-comprehensive,
  .logo-container-float {
    @include container;
  }

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

  .dgiot-column-bar-container.el-scrollbar {
    .el-tabs {
      .el-tabs__nav-wrap.is-left {
        @include container;
      }

      .el-tabs__nav {
        @include container;
      }

      .el-tabs__item.is-active {
        background: $base-color-blue !important;
      }
    }

    .el-menu {
      .el-menu-item.is-active,
      .el-submenu__title.is-active,
      .el-menu-item:hover,
      .el-submenu__title:hover {
        i {
          color: $base-color-blue !important;
        }

        color: $base-color-blue !important;
        background-color: $base-color-blue-light-9 !important;
      }
    }
  }

  .dgiot-column-bar-container-card.el-scrollbar {
    .el-tabs {
      .el-tabs__item.is-active {
        background: transparent !important;

        .dgiot-column-grid {
          background: $base-color-blue !important;
        }
      }
    }
  }

  .dgiot-column-bar-container-arrow.el-scrollbar {
    .el-tabs {
      .el-tabs__item.is-active {
        background: transparent !important;

        .dgiot-column-grid {
          background: transparent !important;
        }
      }
    }
  }

  .dgiot-layout-vertical,
  .dgiot-layout-horizontal,
  .dgiot-layout-comprehensive,
  .dgiot-layout-float {
    .el-menu {
      @include container;

      .el-submenu__title {
        @include container;
      }

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

    .dgiot-side-bar,
    .comprehensive-bar-container {
      @include container;

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

  .dgiot-layout-float {
    .el-scrollbar__view .el-menu--collapse.el-menu li.el-submenu.is-active {
      .el-submenu__title {
        background-color: transparent !important;
      }

      > .el-submenu__title {
        background-color: $base-color-blue !important;
      }
    }
  }

  .dgiot-layout-common {
    .el-menu {
      @include container-common;

      .el-submenu__title {
        @include container-common;
      }

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

    .dgiot-side-bar {
      @include container-common;

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

  .dgiot-header {
    @include container;

    .dgiot-main {
      @include container;

      .right-panel {
        .el-menu.el-menu {
          &--horizontal {
            .el-submenu,
            .el-menu-item {
              @include active;

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

  .dgiot-tabs {
    &-more {
      &-active,
      &:hover {
        .dgiot-tabs-more-icon {
          .box:before,
          .box:after {
            background: $base-color-blue !important;
          }
        }
      }
    }

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

          &:hover {
            border: 1px solid $base-color-blue !important;
          }
        }
      }
    }

    .dgiot-tabs-content-smart {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            background: $base-color-blue-light-9 !important;
          }

          &:after {
            background-color: $base-color-blue !important;
          }

          &:hover {
            background: $base-color-blue-light-9 !important;
          }
        }
      }
    }

    .dgiot-tabs-content-smooth {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            color: $base-color-blue !important;
            background: $base-color-blue-light-9 !important;

            &:hover {
              color: $base-color-blue !important;
              background: $base-color-blue-light-9 !important;
            }
          }

          &:hover {
            color: $base-color-black !important;
          }
        }
      }
    }
  }

  .dgiot-nav {
    .el-tabs__item.is-active,
    .el-tabs__item:hover {
      color: $base-color-blue !important;
    }

    .el-tabs__active-bar {
      background-color: $base-color-blue !important;
    }
  }

  #nprogress {
    .bar {
      background: $base-color-blue !important;
    }

    .peg {
      box-shadow: 0 0 10px $base-color-blue, 0 0 5px $base-color-blue !important;
    }
  }

  .step-form-container {
    .el-steps {
      .el-step__head.is-finish {
        .el-step__icon.is-text {
          color: $base-color-white !important;
          background: $base-color-blue !important;
        }

        .el-step__line {
          background: $base-color-blue !important;
        }
      }

      .el-step__head.is-process {
        color: $base-color-blue !important;
        border-color: $base-color-blue !important;

        .el-step__icon.is-text {
          color: $base-color-blue !important;
          background: mix($base-color-white, $base-color-blue, 90%) !important;
        }
      }

      .el-step__title.is-process {
        color: $base-color-blue !important;
      }

      .el-step__description.is-process {
        color: $base-color-blue !important;
      }

      .el-step__head.is-wait {
        .el-step__line {
          background: $base-color-blue !important;
        }
      }
    }
  }

  .el-alert {
    &--info.is-light {
      color: $base-color-blue !important;
      background-color: mix(
        $base-color-white,
        $base-color-blue,
        90%
      ) !important;
      border: 1px solid $base-color-blue !important;

      i {
        color: $base-color-blue !important;
      }
    }
  }

  .remix-icon-container .el-card__body::after {
    background-color: $base-color-blue !important;
  }
}