html:not(.dark) {
  .global-layout {
    &.blue-bg {
      background-image: url('@/assets/images/bg/blueBg.png');
    }

    &.purple-bg {
      background-image: url('@/assets/images/bg/purpleBg.png');
    }

    &.green-bg {
      background-image: url('@/assets/images/bg/greenBg.png');
    }
  }

  .ant-modal.designer-modal {
    position: relative;
    background-color: var(--app-base-background);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    &.process-designer-modal {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        content: '';
        background: url('@/assets/images/bg-dot.png') repeat 100% 100%;
      }
    }

    .ant-modal-content {
      background-color: transparent !important;

      .ant-modal-header {
        background-color: transparent !important;
      }

      .ant-modal-body {
        background-color: transparent !important;

        & > .scrollbar {
          background-color: transparent !important;
        }
      }

      .process-flow-container {
        background-color: transparent !important;
      }
    }
  }
}

html:not(.dark)[data-bg='blue'] {
  .ant-modal.designer-modal {
    background-image: url('@/assets/images/bg/blueBg.png');
  }

  .jnpf-basic-report-designer {
    .report-config-container {
      background-image: url('@/assets/images/bg/blueBg.png');
    }
  }
}

html:not(.dark)[data-bg='purple'] {
  .ant-modal.designer-modal {
    background-image: url('@/assets/images/bg/purpleBg.png');
  }

  .jnpf-basic-report-designer {
    .report-config-container {
      background-image: url('@/assets/images/bg/purpleBg.png');
    }
  }
}

html:not(.dark)[data-bg='green'] {
  .ant-modal.designer-modal {
    background-image: url('@/assets/images/bg/greenBg.png');
  }

  .jnpf-basic-report-designer {
    .report-config-container {
      background-image: url('@/assets/images/bg/greenBg.png');
    }
  }
}

.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
  .jnpf-basic-report-designer {
    .report-config-container {
      background: var(--app-main-background);
    }
  }
}