@import '~antd/dist/antd.css';
@import '~react-grid-layout/css/styles.css';
@import '~react-resizable/css/styles.css';

@prefix: ducky;
@primary-color: #fff;
@light-primary-color: #ffc107;

.@{prefix} {
  &-app {
    width: 100%;
    height: 100%;
    background-color: #9e9e9e;
    padding: 4px;
    color: rgba(0, 0, 0, 0.85);

    .@{prefix}-layout-container {
      width: 100%;
      height: 100%;

      .@{prefix}-layout {
        width: 100%;
        height: 100%;
      }
    }

    .@{prefix}-panel {
      box-shadow: 0 2px 12px 0 #9e9e9e;
    }

    .@{prefix}-dataset-container {
      width: 100%;
      height: 100%;
      background-color: @primary-color;

      .@{prefix}-dataset-list {
        margin: 8px;

        &-item {
          margin: 8px;

          &-title {
            cursor: pointer;

            &:hover {
              color: @light-primary-color;
            }
          }

          &-focused {
            color: @light-primary-color;
          }

          &-description {
            display: block;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .@{prefix}-component-menu-container {
      background-color: @primary-color;
      box-shadow: 0 2px 12px 0 #9e9e9e;

      .@{prefix}-component-menu {
        :not(:last-child) {
          margin-right: 16px;
        }

        .@{prefix}-component-menu-item {
          cursor: pointer;

          &:hover {
            color: @light-primary-color;
          }
        }
      }
    }

    .@{prefix}-canvas-container {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #9e9e9e;
      box-shadow: 0 2px 12px 0 #9e9e9e;

      .@{prefix}-canvas {
        width: 90%;
        height: 90%;
        background-color: #fff;

        .@{prefix}-component-view-container {
          padding-right: 8px;

          .@{prefix}-component-view {
            height: 100%;

            &-placeholder {
              color:rgba(0, 0, 0, 0.25)
            }

            &.@{prefix}-component-view-focus {
              border: 1px solid @light-primary-color;
            }

            .@{prefix}-spin {
              height: 100%;

              .ant-spin-dot-item {
                background-color: @light-primary-color;
              }

              .ant-spin-container {
                height: 100%;
              }
            }
          }
        }
      }
    }

    .@{prefix}-config-panel-container {
      width: 100%;
      height: 100%;
      background-color: @primary-color;
      box-shadow: 0 2px 12px 0 #9e9e9e;
    }
  }
}

.react-grid-item.react-grid-placeholder {
  background-color: @primary-color;
}

.react-grid-item > .react-resizable-handle {
  width: 8px;
  height: 8px;
}

.react-resizable-handle {
  opacity: 0.3;
}