.vis-editor {
  .flex-parent();

  @vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
  @vis-editor-sidebar-min-width: 350px;
  @vis-editor-nesting-width: 8px;
  @vis-editor-agg-editor-spacing: 5px;

  navbar {
    .bitty-modal-container {
      position: relative;

      .bitty-modal {
        position: absolute;
        cursor: pointer;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 10;
        background: fadeout(@navbar-default-bg, 10%);
        color: white;
        text-align: center;
        padding-top: 6px;

        // Don't overflow container
        padding-left: 20px;
        padding-right: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .user-select(none);
      }

      a {
        color: white;
      }
    }
  }

  &-content {
    .flex-parent();

    // overrides for tablet and desktop
    @media (min-width: @screen-md-min) {
      .flex-direction(row);
    }
  }

  &-sidebar {
    .flex-parent(0, 0, auto);

    // overflow: auto;

    // overrided for tablet and desktop
    @media (min-width: @screen-md-min) {
      .flex-basis(@vis-editor-sidebar-basis);
      min-width: @vis-editor-sidebar-min-width;
      max-width: @vis-editor-sidebar-min-width;
      // margin-bottom: (@input-height-base * 2) - 3;
    }


    .sidebar-item {
      border-top: 0 !important;
    }

    .sidebar-container {
      .flex-parent(1, 1, auto);
      background-color: @body-bg;
      border-right-color: @sidebar-bg;

      form {
        .flex-parent(1, 1, auto);

        > ul {
          .flex(1, 1, auto);
          overflow-y: auto;
        }

        > .vis-edit-sidebar-buttons {
          .flex(0, 0, auto)
        }
      }
    }

    .sidebar-item-title {
      background: @sidebar-bg;
    }

    .sidebar-item-title:hover {
      color: @sidebar-header-color !important;
      background-color: @sidebar-bg !important;
    }
  }

  .visualization-options {
    padding: @vis-editor-agg-editor-spacing;

    .form-group {
      margin-bottom: 5px;
    }
    .form-horizontal .control-label {
      text-align: left;
    }
  }

  nesting-indicator {
    .display(flex);
    .flex(0 0 auto);

    > span {
      width: @vis-editor-nesting-width;
      background-color: @brand-success;
    }
  }

  &-agg {
    .flex-parent();

    padding: @vis-editor-agg-editor-spacing;
    border-bottom: 1px solid @sidebar-bg;

    // wraps the .vis-editor-agg and nesting-indicator ^^
    &-wrapper {
      .display(flex);
    }

    &-group {
      .flex-parent();
      color: @text-color;
    }

    &-header {
      .display(flex);
      .align-items(center);
      .flex(1, 0, auto);
      margin-bottom: @vis-editor-agg-editor-spacing;

      &-toggle {
        .flex(0, 0, auto);
        margin-right: @vis-editor-agg-editor-spacing;
      }

      &-subagg-icon {
        .flex(0, 1, auto);
        padding-right: @padding-base-vertical;
      }

      &-title {
        .flex(1, 1, auto);
        .ellipsis();
        font-weight: bold;
      }

      &-description {
        font-weight: normal;
        padding-right: @vis-editor-agg-editor-spacing;

        &.danger {
          .text-danger();
          font-weight: bold;
        }
      }

      &-controls {
        .flex(0, 0, auto);
      }
    }

    &-error {
      margin: @vis-editor-agg-editor-spacing 0;
      padding: @vis-editor-agg-editor-spacing;
      text-align: center;
      background: @btn-danger-bg;
      color: @btn-danger-color;
    }

    &-editor {
      &-ranges {
        td {
          padding: 0 @vis-editor-agg-editor-spacing @vis-editor-agg-editor-spacing 0;
          &:last-child {
            padding-right: 0;
          }
        }
      }

      .regex .flags {
        .docs {
          text-align: right;
        }

        a {
          color: @link-color;
        }
      }

      &-advanced-toggle {
        text-align: right;
      }
    }

    &-form-row {
      .display(flex);

      > * {
        .flex(1, 1, auto);
        margin-right: @vis-editor-agg-editor-spacing;

        &:last-child {
          margin-right: 0px;
        }
      }

      > .btn {
        .align-self(center);
      }
    }

    &-form-value {
      .align-self(center);
      margin: 0 0 0 @vis-editor-agg-editor-spacing;
      font-size: 1.2em;
    }

    &-wide-btn {
      .border-radius(0);
    }

    &-add {
      .flex-parent();

      &-subagg {
        margin-bottom: -@vis-editor-agg-editor-spacing - 1; // extra one pixel covers the aggs bottom border
        margin-right: -@vis-editor-agg-editor-spacing;
        margin-left: -@vis-editor-agg-editor-spacing;
      }

      &-schemas {
        margin: @vis-editor-agg-editor-spacing * 3;
      }
    }

    &-order-agg {
      border: 2px solid @gray-lighter;
      border-radius: @border-radius-base;
      margin: @vis-editor-agg-editor-spacing;
      padding: @vis-editor-agg-editor-spacing;
    }
  }

  &-canvas {
    .flex(1, 0, @screen-md-min - @vis-editor-sidebar-basis);
    .display(flex);
    .flex-direction(column);
    overflow: auto;

    &.embedded {
      .flex-shrink(1);
      .flex-basis(100%);
    }

    // overrided for tablet and desktop
    @media (min-width: @screen-md-min) {
      .flex-shrink(1);
      .flex-basis(100%);
    }

    &-title {
      text-align: center;
      margin: 10px 0 0;
    }

    visualize {
      .flex-parent();
      .flex(1, 1, 100%);
    }

    .visualize-chart {
      .flex(1, 1, 100%);
      position: relative;
    }
  }
}

vis-editor,
vis-editor-agg-group,
vis-editor-agg,
vis-editor-agg-params,
vis-editor-agg-param,
vis-editor-vis-options {
  .flex-parent();
}

form.vis-share {
  div.form-control {
    height: inherit;
  }
}