@import './variables.less';
// @import '~antd/lib/style/themes/index.less';
.@{prefix-cls}-light {
  --dn-aux-cover-rect-dragging-color: rgb(23 97 144 / 26%);
  --dn-aux-cover-rect-dropping-color: rgb(38 169 252 / 34%);
  --dn-aux-free-selection-background-color: #1890ff;
  --dn-aux-free-selection-border-color: #1890ff;
  --dn-aux-insertion-color: #1890ff;
  --dn-aux-dashed-box-color: rgba(68 100 255 / 80%);
  --dn-aux-dashed-box-title-color: #333;
  --dn-aux-selection-box-border-color: #1890ff;
  --dn-aux-selection-box-color: #333;
  --dn-ghost-color: #fff;
  --dn-ghost-bg-color: rgb(30 167 253 / 50%);
  --dn-outline-tree-bg-color: #fff;
  --dn-outline-tree-header-border-color: #eee;
  --dn-outline-tree-color: #333;
  --dn-outline-tree-insertion-bg-color: #1890ff;
  --dn-outline-tree-node-header-color: #333;
  --dn-outline-tree-node-hover-color: #1890ff;

  --dn-toolbar-input-color: rgba(0, 0, 0, 0.85);
  --dn-toolbar-input-bg-color: #fff;
  --dn-toolbar-input-border-color: #d9d9d9;
  --dn-toolbar-input-hover-border-color: #d9d9d9;
  --dn-toolbar-input-handler-bg-color: #fff;

  --dn-resize-handle-bg-color: #f0f0f0;
  --dn-resize-handle-hover-bg-color: #fafafa;
  --dn-resize-handle-color: #666;
  --dn-resize-handle-hover-color: #aaa;

  --dn-mobile-simulator-bg-color: #eee;
  --dn-mobile-simulator-body-bg-color: #fff;
  --dn-mobile-simulator-border-color: #222;
  --dn-responsive-simulator-bg-color: #fff;
  --dn-pc-simulator-bg-color: #fff;

  --dn-aux-selector-btn-color: #fff;
  --dn-aux-selector-btn-bg-color: #1890ff;
  --dn-aux-selector-btn-border-color: #1890ff;
  --dn-aux-selector-btn-hover-color: #fff;
  --dn-aux-selector-btn-hover-bg-color: #40a9ff;
  --dn-aux-selector-btn-hover-border-color: #40a9ff;
  --dn-aux-selector-btn-active-color: #fff;
  --dn-aux-selector-btn-active-bg-color: #096dd9;
  --dn-aux-selector-btn-active-border-color: #096dd9;

  --dn-panel-bg-color: #fff;
  --dn-panel-border-color: #ddd;
  --dn-panel-active-bg-color: #f4f5f8;
  --dn-resource-content-bg-color: #fff;

  --dn-composite-panel-tabs-bg-color: #fff;
  --dn-composite-panel-tabs-active-bg-color: #fff;
  --dn-composite-panel-highlight-bg-color: #f0f0f0;
  --dn-composite-panel-tabs-color: #666;
  --dn-composite-panel-tabs-hover-color: #1890ff;
  --dn-composite-panel-tabs-content-bg-color: #fff;
  --dn-composite-panel-tabs-header-color: fade(black, 85%);

  --dn-collapse-header-color: #333;

  --dn-resource-item-color: #333;
  --dn-resource-item-hover-border-color: #40a9ff;
  --dn-resource-item-hover-color: #40a9ff;

  --dn-main-panel-bg-color: #f9f9f9;
  --dn-main-panel-header-bg-color: #fff;
  --dn-workspace-panel-bg-color: #eee;

  --dn-scrollbar-color: rgba(0, 0, 0, 0.2);
  --dn-scrollbar-hover-color: rgba(0, 0, 0, 0.3);

  --dn-btn-color: rgba(0, 0, 0, 0.85);
  --dn-btn-border-color: #d9d9d9;
  --dn-btn-bg-color: #fff;

  --dn-btn-hover-color: #40a9ff;
  --dn-btn-hover-border-color: #40a9ff;
  --dn-btn-hover-bg-color: #fff;

  --dn-btn-active-color: #096dd9;
  --dn-btn-active-bg-color: #fff;
  --dn-btn-active-border-color: #096dd9;

  --dn-btn-disabled-color: rgba(0, 0, 0, 0.25);
  --dn-btn-disabled-bg-color: #f5f5f5;
  --dn-btn-disabled-border-color: #d9d9d9;

  --dn-btn-primary-color: #fff;
  --dn-btn-primary-bg-color: #1890ff;
  --dn-btn-primary-border-color: #1890ff;

  --dn-btn-primary-hover-color: #fff;
  --dn-btn-primary-hover-bg-color: #40a9ff;
  --dn-btn-primary-hover-border-color: #40a9ff;

  --dn-btn-primary-active-color: #fff;
  --dn-btn-primary-active-bg-color: #096dd9;
  --dn-btn-primary-active-border-color: #096dd9;

  --dn-btn-primary-disabled-color: rgba(0, 0, 0, 0.25);
  --dn-btn-primary-disabled-bg-color: #f5f5f5;
  --dn-btn-primary-disabled-border-color: #d9d9d9;

  --dn-btn-text-shadow-color: rgba(0, 0, 0, 0.12);
  --dn-btn-box-shadow-color: rgba(0, 0, 0, 0.045);

  --dn-empty-bg-color: #fff;

  --dn-success: #a0d911;
}

.@{prefix-cls}-dark {
  --dn-aux-cover-rect-dragging-color: rgb(23 97 144 / 26%);
  --dn-aux-cover-rect-dropping-color: rgb(38 169 252 / 34%);
  --dn-aux-free-selection-background-color: #188ffff3;
  --dn-aux-free-selection-border-color: #188ffff3;
  --dn-aux-insertion-color: #188ffff3;
  --dn-aux-dashed-box-color: #188ffff3;
  --dn-aux-dashed-box-title-color: #188ffff3;
  --dn-aux-selection-box-border-color: #188ffff3;
  --dn-aux-selection-box-color: #333;
  --dn-ghost-color: #fff;
  --dn-ghost-bg-color: rgb(30 167 253 / 50%);
  --dn-outline-tree-bg-color: #222;
  --dn-outline-tree-header-border-color: #333;
  --dn-outline-tree-color: #c7c7c7;
  --dn-outline-tree-insertion-bg-color: #188ffff3;
  --dn-outline-tree-node-header-color: #ccc;
  --dn-outline-tree-node-hover-color: #c7c7c7;

  --dn-toolbar-input-color: rgba(255, 255, 255, 0.65);
  --dn-toolbar-input-bg-color: transparent;
  --dn-toolbar-input-border-color: rgba(255, 255, 255, 0.15);
  --dn-toolbar-input-hover-border-color: #40a9ff;
  --dn-toolbar-input-handler-bg-color: #444;
  --dn-resize-handle-bg-color: rgba(100, 100, 100, 0.2);
  --dn-resize-handle-hover-bg-color: rgba(100, 100, 100, 0.3);
  --dn-resize-handle-color: #666;
  --dn-resize-handle-hover-color: #aaa;

  --dn-mobile-simulator-bg-color: #222;
  --dn-mobile-simulator-body-bg-color: #222;
  --dn-mobile-simulator-border-color: #222;
  --dn-responsive-simulator-bg-color: #222;
  --dn-pc-simulator-bg-color: #222;

  --dn-aux-selector-btn-color: #fff;
  --dn-aux-selector-btn-bg-color: #1890ff;
  --dn-aux-selector-btn-border-color: #1890ff;
  --dn-aux-selector-btn-hover-color: #fff;
  --dn-aux-selector-btn-hover-bg-color: #40a9ff;
  --dn-aux-selector-btn-hover-border-color: #40a9ff;
  --dn-aux-selector-btn-active-color: #fff;
  --dn-aux-selector-btn-active-bg-color: #096dd9;
  --dn-aux-selector-btn-active-border-color: #096dd9;

  --dn-panel-bg-color: #333;
  --dn-panel-border-color: #222;
  --dn-panel-active-bg-color: #3a3a3a;
  --dn-resource-content-bg-color: #2a2a2a;

  --dn-composite-panel-tabs-bg-color: #2f2f2f;
  --dn-composite-panel-tabs-active-bg-color: #222;
  --dn-composite-panel-highlight-bg-color: #181818;
  --dn-composite-panel-tabs-color: #aaa;
  --dn-composite-panel-tabs-hover-color: #1890ff;
  --dn-composite-panel-tabs-content-bg-color: #222;
  --dn-composite-panel-tabs-header-color: #c7c7c7;

  --dn-collapse-header-color: #c7c7c7;

  --dn-resource-item-color: #c7c7c7;
  --dn-resource-item-hover-color: #1890ff;

  --dn-main-panel-header-bg-color: #2f2f2f;
  --dn-workspace-panel-bg-color: #2f2f2f;

  --dn-scrollbar-color: #a0a0a054;
  --dn-scrollbar-hover-color: #adadad9d;

  --dn-btn-color: #fff;
  --dn-btn-border-color: #222;
  --dn-btn-bg-color: #333;

  --dn-btn-hover-color: #fff;
  --dn-btn-hover-border-color: #666;
  --dn-btn-hover-bg-color: #333;

  --dn-btn-active-color: #fff;
  --dn-btn-active-bg-color: #333;
  --dn-btn-active-border-color: #222;

  --dn-btn-disabled-color: #888;
  --dn-btn-disabled-bg-color: #222;
  --dn-btn-disabled-border-color: #222;

  --dn-btn-primary-color: #fff;
  --dn-btn-primary-bg-color: #1890ff;
  --dn-btn-primary-border-color: #1890ff;

  --dn-btn-primary-hover-color: #fff;
  --dn-btn-primary-hover-bg-color: #40a9ff;
  --dn-btn-primary-hover-border-color: #40a9ff;

  --dn-btn-primary-active-color: #fff;
  --dn-btn-primary-active-bg-color: #096dd9;
  --dn-btn-primary-active-border-color: #096dd9;

  --dn-btn-primary-disabled-color: rgba(0, 0, 0, 0.25);
  --dn-btn-primary-disabled-bg-color: #f5f5f5;
  --dn-btn-primary-disabled-border-color: #d9d9d9;

  --dn-btn-text-shadow-color: rgba(0, 0, 0, 0.12);
  --dn-btn-box-shadow-color: rgba(0, 0, 0, 0.045);

  --dn-empty-bg-color: #222;

  --dn-success: #a0d911;
}

.@{prefix-cls}-app {
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--dn-scrollbar-color);
    border-radius: 0;
    transition: all 0.25s ease-in-out;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--dn-scrollbar-hover-color);
  }

  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-variant: tabular-nums;
  line-height: 1.5715;
  font-feature-settings: 'tnum';

  * {
    box-sizing: border-box;
  }

  *[contenteditable='true'] {
    min-width: 1px;
    min-height: 14px;
    cursor: text !important;
    outline: none !important;
  }

  *[data-content-editable]:not(*[contenteditable='true']) {
    &:hover {
      cursor: text !important;
      opacity: 0.8;
    }
  }
}