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

.light-mode {
  .data-visualization-design {
    background: $__primary-high-bg-color-light;

    .data-visualization-design-header {
      background-color: $__primary-sub-bg-color-light;
      box-shadow: none;

      .data-visualization-design-header-black {
        color: $__primary-input-color-light;

        svg {
          background-color: $__primary-input-color-light;
          border-radius: 50%;
        }
      }
    }

    .template-layers {
      background: $color-white;

      .template-layers-title {
        border-bottom: 0.0625rem solid #EAEAEA;
      }

      .template-layers-item {
        &:hover {
          background: $__primary-input-bg-color-light;
        }
      }
    }

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

      .template-preview {
        background: $__primary-sub-bg-color-light;
        box-shadow: 0 0 20px 0 #EAEAEA;

        iframe {
          background: $__primary-sub-bg-color-light;
        }
      }
    }

    .progress-bar {
      background: $__primary-sub-bg-color-light;
      box-shadow: none;

      .progress-bar-time {
        color: #3D3D3D;
      }
    }

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

      .select-bg-image {
        background-color: #EDF2F5;
      }

      .design-configs-top-options {
        background: $__primary-bg-color-light;
        box-shadow: none;
      }

      .design-configs-container {
        .text-config {
          .text-co
          nfig-title {
            color: $__primary-input-color-light;
          }
        }

        .color-config {
          .color-config-item-label {
            color: $__primary-input-color-light;
          }
        }

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

          .text-config-item-label {
            color: $__primary-input-color-light;
          }
        }

      }
    }

    .config-line {
      background: #EAEAEA;
    }
  }

  .c-gradient-color-picker {
    background: $__primary-input-bg-color-light;
  }

  .c-reset-button {
    background: $__primary-input-bg-color-light;

    svg {
      path {
        fill: $__primary-input-color-light;
      }
    }
  }
}
