/*!
 * @author: tvc12 - Thien Vi
 * @created: 6/3/21, 5:17 PM
 */

@import '~@/themes/scss/mixin.scss';

.data-builder ::v-deep {
  @import '~@/themes/scss/di-variables.scss';
  @import '~bootstrap/scss/variables';
  @import '~@/themes/scss/data-builder/custom/_modal.scss';
  @import '~@/themes/scss/data-builder/custom/_navbar.scss';
  @import '~@/themes/scss/data-builder/custom/_dark-dashboard.scss';
  @import '~@/themes/scss/data-builder/custom/dark-sidebar.scss';
  @import '~@/themes/scss/data-builder/custom/_misc.scss';
  .v-context {
    text-align: center;
  }
}

.data-builder {
  background-color: var(--data-builder-bg, var(--primary));
  height: 100%;
  max-width: 3840px;

  min-height: 640px;
  min-width: 854px;

  //padding: 16px;
  width: 100%;

  > .data-builder-header {
    height: 28px;

    h3 {
      font-size: 24px;
      letter-spacing: 0.2px;
      line-height: 1.4;
    }

    .btn-bar {
      > div {
        padding: 5px 0;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.18px;
        width: 64px;
        color: var(--secondary-text-color);
        //height: 26px;

        &:not(:first-child) {
          margin-left: 16px;
          color: var(--accent-text-color);
        }
      }
    }
  }

  > .data-builder-body {
    height: calc(100% - 48px);
    width: 100%;

    //> div + div {
    //margin-left: 8px;
    //}

    .db-header {
      margin-top: 12px;
      text-align: start;
      margin-left: 12px;
      label {
        @include medium-text();
        font-weight: var(--builder-font-weight);
        margin: 0 0 0 6px;
      }
    }

    .database-panel {
      @include builder-panel();
      width: 223px;
    }

    .config-filter-area {
      height: 100%;
      position: relative;

      .config-panel {
        height: 100%;
        @include builder-panel();
      }
    }

    .visualization-panel {
      @include builder-panel();
    }
  }

  //.data-builder-header + .data-builder-body {
  //margin-top: 16px;
  //}
}
