@import "../ui/theme/themeMixin";


  //web3dSpace
  .scoped-web3dspace-footer {
    @include colorValue('title4');
    @include bgLinearValue('background', 'module1');
    @include borderValue('borderColor1');

    .scoped-web3dspace-footer-left {
      .scoped-web3dspace-boolean-button {
        @include borderValue('borderColor2');
        @include bgValue('theme3');
        @include colorValue('buttonReversedText');

        .kf-space-btn1 {
          @include colorValue('buttonReversedText');
        }

        .scoped-web3dspace-boolean-button-active {
          @include bgValue('theme1');
          @include colorValue('buttonText');
        }

      }
    }

    .scoped-web3dspace-footer-right {
      @include colorValue('buttonReversedText');

      .scoped-web3dspace-footer-right-item {
        .scoped-web3dspace-footer-right-item-model {
          @include bgValue('theme4');
          @include borderStyle(1px, solid, 'borderColor2');

          .kf-switch-box {
            .kf-switch-con.kf-switch-con {
              @include bgValue('theme5');
            }
          }
        }

        .scoped-web3dspace-footer-right-item-model-active {
          @include bgValue('theme1');
          @include borderStyle(1px, solid, 'borderColor2');

          .kf-switch-box {
            .kf-switch-con.kf-switch-con-active {
              @include bgValue('theme5');
            }
          }
        }
      }
    }
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    @include bgValue('theme1');
    @include borderValue('borderColor1');
  }

  .el-checkbox__inner {
    @include borderValue('borderColor1');
  }

  .el-checkbox.is-checked {
    .el-checkbox__inner {
      &::after {
        @include borderValue('buttonText');
      }
    }
  }

  .el-checkbox__inner {
    @include borderValue('borderColor1');
  }

  .scoped-web3dspace-header {
    @include colorValue('title4');
    @include bgLinearValue('background', 'module1');
    @include borderValue('borderColor1');

    .scoped-web3dspace-header-toolBar {
      .kf-header-i-active {
        @include borderValue('theme1');
      }
      .kf-header-i-active:hover{
        @include borderValue('theme1');
      }
    }

    .scoped-web3dspace-header-toolBar-msg {
      .scoped-web3dspace-msg-items {
        @include bgValue('module8');

        .scoped-web3dspace-header-toolBar-msg-item {
          .kf-toolbar-msg-info {
            .msg-name {
              @include colorValue('text');
              @include borderValue('theme1');
            }
          }

          .kf-toolbar-msg-detail {
            /* &:hover {
               @include colorValue('text');
             }*/
          }
        }
      }
    }

    .scoped-web3dspace-header-breadcrumbs, .scoped-web3dspace-header-toolBar i {
      @include colorValue('text');
    }

    .scoped-web3dspace-header-toolBar-search {
      @include bgValue('background');
      @include borderValue('borderColor2');

      .scoped-web3dspace-search-items {
        @include colorValue('text');

        .scoped-web3dspace-header-toolBar-search-item {
          @include bgValue('module2');
          @include colorValue('buttonReversedText');
          font-size: 12px;

          .kf-toolbar-item1 {
            @include colorValue('buttonReversedText');
          }

          .kf-toolbar-item2 {
            font-size: 12px;
          }

          .kf-toolbar-item3 {
            i {
              @include colorValue('success');
            }
          }

          &:hover {
            @include bgValue('theme1');
            @include colorValue('buttonText');

            .kf-toolbar-item1 {
              @include colorValue('buttonText');
            }

            .kf-toolbar-item3 {
                @include colorValue('buttonText');
            }
          }
        }


      }

      .scoped-web3dspace-header-toolBar-search-item {
        .kf-toolbar-item1 {
          @include colorValue('buttonReversedText');
        }
      }

      .scoped-self-input {
        @include bgValue('theme3');
        @include borderValue('borderColor2');

        .el-input__wrapper {
          width: 100%;

          .el-input__inner {
            width: 100%;
            background: transparent;
            @include colorValue('buttonReversedText');
            font-size: 12px;

            &::-webkit-input-placeholder {
              @include colorValue('placeholderText');
            }

            &::placeholder {
              @include colorValue('placeholderText');
            }

            &::-ms-input-placeholder {
              @include colorValue('placeholderText');
            }

            &::-moz-placeholder {
              @include colorValue('placeholderText');
            }
          }
        }

        .kf-select-input {
          width: 100%;
          background: transparent;
          @include colorValue('inputText');
          font-size: 12px;

          &::-webkit-input-placeholder {
            @include colorValue('placeholderText');
          }

          &::placeholder {
            @include colorValue('placeholderText');
          }

          &::-ms-input-placeholder {
            @include colorValue('placeholderText');
          }

          &::-moz-placeholder {
            @include colorValue('placeholderText');
          }
        }

        .iconfont {
          background: transparent;
          @include colorValue('inputText');
        }
      }
    }

    .scoped-web3dspace-header-toolBar-dropDown {
      @include bgValue('module8');

      .scoped-web3dspace-header-toolBar-dropDown-item {
        background: transparent;
        @include colorValue('buttonReversedText');
      }

      .scoped-web3dspace-header-toolBar-dropDown-body {
        .scoped-web3dspace-header-toolBar-dropDown-item {
          background: transparent;
        }
      }
    }
  }

  .scoped-web3dspace-header-toolBar-search-item:hover {
    @include bgValue('theme1');
  }

  //web3d&&artist
  .scoped-web3dc-header {
    @include colorValue('title4');
    @include bgLinearValue('background', 'module1');
    @include borderValue('borderColor1');

    .scoped-web3dc-header-breadcrumbs {
      .scoped-web3dc-header-breadcrumbs2, .scoped-web3dc-header-breadcrumbs1 {
        @include colorValue('text');
      }
    }
  }

  .scoped-web3dspace-footer {
    @include colorValue('title4');
    @include bgLinearValue('background', 'module1');
    @include borderValue('borderColor1');

    .scoped-web3dspace-footer-left {
      .scoped-web3dspace-footer-left-set {
        @include borderValue('borderColor2');
        @include bgValue('theme3');
        @include colorValue('buttonReversedText');

        .scoped-web3dspace-footer-left-set1 {
          @include colorValue('buttonReversedText');
        }

        .scoped-web3dspace-footer-left-set-active {
          @include bgValue('theme1');
          @include colorValue('buttonText');
        }
      }
    }
  }

//dialog
.scoped-domainModel {
  @include colorValue('text');

  @include borderValue('borderColor2');
    .kf-dialog-cons1{
    @include bgValue('background1', true);
    }
  .kf-domain1-title {
    @include borderValue('borderColor2');
    @include bgValue('module2', true);

    .kf-domain1-box1 {
      @include colorValue('title3');

    }

    .kf-domain1-i {
      i {
        @include colorValue('buttonReversedText');
      }
    }
  }
  .kf-domain1-video-box{
    @include bgValue('module2', true);
  }

  .kf-domain1-dialogs {
    .kf-domain1-dialog-header, .kf-domain1-dialog-footer {
      @include borderValue('borderColor2');
    }
  }

  .domainModel-area {
    @include bgValue('module8');
    .domainModel-area-body::-webkit-scrollbar-track {
      @include bgValue('background'); /* 滚动条轨道的背景颜色 */
    }

    .domainModel-area-body::-webkit-scrollbar-thumb {
      @include bgValue('module4'); /* 滚动条实际可拖动部分的颜色 */
    }

    .domainModel-area-body::-webkit-scrollbar-thumb:hover {
      @include bgValue('module4'); /* 滚动条实际可拖动部分的悬停颜色 */
    }

    .scoped-web3dspace-header-toolBar-search-item {
      * {
        @include colorValue('text');
      }
      i{
        @include colorValue('theme1');
      }
    }
    .scoped-web3dspace-header-toolBar-search-item:visited {
      @include bgValue('theme1',true);
      i{
        @include colorValue('buttonText');
      }
    }
    .scoped-web3dspace-header-toolBar-search-item:hover {
      @include bgValue('theme1',true);
      i{
        @include colorValue('buttonText');
      }
    }

    .scoped-web3dspace-header-toolBar-search-item:nth-child(odd) {
      @include bgValue('module1');
    }

    .scoped-web3dspace-header-toolBar-search-item:nth-child(even) {
      background: transparent;
    }
  }
}

.scoped-domainModel-active {
  @include borderValue('borderColor2');
}


//kfCard
.kf-card-container1 {
  @include bgValue('background');
  @include borderValue('borderColor2');

  .kf-light-title {
    @include bgValue('module1');
    @include colorValue('title3');
    @include borderValue('borderColor2');
  }

  .kf-card-cons {
    .kf-card-cons-item {
      .kf-cards-title2 {
        @include colorValue('title4');
      }

      .kf-cards-title1 {
        @include colorValue('title1');
      }

      .kf-cards-title2 {
        @include colorValue('subText');
      }
    }
  }
}


//kfCards
.kf-card-container {
  @include bgValue('background');
  @include borderValue('borderColor2');

  .kf-light-title {
    @include bgValue('module1');
    @include colorValue('title3');
    @include borderValue('borderColor2');
  }

  .kf-card-cons {
    .kf-card-cons-item {
      .kf-cards-title2 {
        @include colorValue('title4');
      }

      .kf-cards-title1 {
        @include colorValue('title1');
      }

      .kf-cards-title3 {
        @include colorValue('subText');
      }
    }
  }
}

//kfText
.kf-3dc-atom {
  @include colorValue('text');

  .kf-3dc-atom-item {
    @include colorValue('text');
  }

  .kf-3dc-atom-item.kf-3dc-atom-item-active {
    @include colorValue('buttonReversedText');
    @include bgValue('theme1');
  }
}

//kfIconGroup
.kf-3dc-atom.kf-3dc-i-container {
  @include colorValue('text');
  @include borderValue('borderColor2');
  @include bgValue('background');
}


.kf-free-panel {
  @include bgValue('module2');
  .kf-panels {
    .kf-p-label {
      @include colorValue('title4');
    }

    .kf-p-body {
      @include colorValue('text');

      .el-switch{
        .el-switch__core{
          @include bgValue('switchColor');
        }
      }
      .el-switch.is-checked {
        .el-switch__core{
          @include bgValue('theme1');
        }
      }
      .kf-p-body-value {
        box-shadow: none;
        outline: 0;
        @include bgValue('module3');
        @include borderValue('theme1');
        @include colorValue('buttonReversedText');

        &::-webkit-input-placeholder {
          @include colorValue('placeholderText');
        }

        &::placeholder {
          @include colorValue('placeholderText');
        }

        &::-ms-input-placeholder {
          @include colorValue('placeholderText');
        }

        &::-moz-placeholder {
          @include colorValue('placeholderText');
        }
      }

      .kf-p-body-value4 {
        @include bgValue('theme1');
      }

      .kf-p-body-value3[type=range] {
        @include bgValue('module3');
        @include borderValue('borderColor1');
      }

      /*拖动块的样式*/
      .kf-p-body-value3[type=range]::-webkit-slider-thumb {
        @include bgValue('theme5');
        @include colorWithAlpha('theme1', borderColor, 0.25);
      }

      .kf-p-body-value5 {
        .el-slider {
          .el-slider__runway {
            @include bgValue('module3');
            @include borderValue('borderColor1');
          }

          .el-slider__button-wrapper {
            .el-slider__button {
              @include bgValue('theme5');
              @include colorWithAlpha('theme1', borderColor, 0.25);
            }
          }
        }
      }

      .el-switch {

      }
    }
  }
}

.panel-evt-body {
  span {
    @include colorValue('title4');
  }

  .panel-btn {
    @include bgValue('theme1');
    @include colorValue('buttonText');
  }
}


.kf-pub-switch {
  .kf-pub-switch-label {
    @include colorValue('title4');
  }

  .kf-pub-switch-body {
    @include bgValue('module3');
    @include borderValue('borderColor1');

    .kf-pub-switch-input {
      @include colorValue('buttonReversedText');
    }

    .kf-pub-switch-input.kf-pub-switch-input-active {
      @include colorValue('buttonText');
      @include bgValue('theme1');
    }
  }
}

.kf-p-link {
  @include colorValue('theme1');
}

.kf-p-body-btn {
  @include colorValue('buttonText');
  @include bgValue('theme1');
}

.circular {

}