@import "../../style/theme";

.dark-mode {
  .data-visualization-design {
    background: $__primary-sub-bg-color-dark;

    .data-visualization-design-header {
      background-color: $__primary-bg-color-dark;

      .data-visualization-design-header-black {
        color: $color-white;
      }
    }

    .template-layers {
      background: $__primary-bg-color-dark;

      .template-layers-title {
        border-bottom: 0.0625rem solid $__form-component-bg-color-dark;
      }

      .template-layers-title {
        color: $color-white;
      }

      .template-layers-item-name {
        color: $color-white;
      }

      svg {
        path {
          fill: #9CAEC7 !important;
        }
      }

      .template-layers-item {
        &:hover {
          background: $__form-component-bg-color-dark;
        }
      }
    }

    .preview-container {
      background: $__primary-bg-color-dark;

      .template-preview {
        background: $__primary-bg-color-dark;
        box-shadow: none;

        iframe {
          background: $__primary-bg-color-dark;
        }
      }
    }

    .progress-bar {
      background: $__primary-bg-color-dark;

      .progress-bar-time {
        color: $__primary-sub-bg-color-light;
      }
    }

    .design-configs {
      background: $__primary-bg-color-dark;

      .select-bg-image {
        background-color: $__form-component-bg-color-dark;
      }

      .design-configs-top-options {
        background: $__form-component-bg-color-dark;
      }

      .design-configs-container {
        .text-config {
          .text-config-title {
            color: $color-white;
          }
        }

        .text-config-item {
          margin: 1.375em 0;

          .text-config-item-label {
            color: $color-white;
          }
        }

        .color-config {
          .color-config-item-label {
            color: $color-white;
          }
        }
      }
    }

    .config-line {
      background: $__form-component-bg-color-dark;
    }
  }

  .c-gradient-color-picker {
    background: $__form-component-bg-color-dark;
  }

  .c-reset-button {
    background: $__form-component-bg-color-dark;
  }

  .hi-v4-card {
    background: #2C2C2C;
  }

  .hi-v4-card--bordered {
    border: 1px solid #ffffff00;
  }

  .category-tree-box {
    background: #2C2C2C !important;
  }

  .c-audio-item-name {
    color: $color-white;
  }

  .c-resources-item {
    background: $__primary-sub-bg-color-dark;
    border: 1px solid #eeeff100;

    .c-resources-item-info-title {
      color: $color-white !important;
    }
  }

}
