@import 'base/variables';
@import 'base/font';
@import 'base/mixins';

.form-wrap.form-builder {
  * {
    box-sizing: border-box;
  }

  &.formbuilder-embedded-bootstrap {
    @import 'base/bs';
  }
  @import 'base/fields';
  @import 'base/animation';
  @import 'controls';
  @import 'stage';
  @import 'tooltip';
  @import 'kc-toggle';
  position: relative;

  display: flex;
  flex-direction: row;

  &.controls-left {
    flex-direction: row-reverse;
  }

  &::after {
    content: '';
    display: table;
    clear: both;
  }

  .cb-wrap,
  .stage-wrap {
    vertical-align: top;
  }

  .form-elements,
  .multi-row span,
  textarea {
    display: block;
  }

  .form-group {
    display: flex;
    flex-direction: row;
  }

  .form-elements::after,
  .form-group::after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .form-elements .field-options div:hover,
  .frmb .legend,
  .frmb .prev-holder {
    cursor: move;
  }

  // tooltips
  .frmb-tt {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid darken($grey, 25%);
    background-color: $grey;
    border-radius: 5px;
    padding: 5px;
    color: $white;
    z-index: 20;
    text-align: left;
    font-size: 12px;
    pointer-events: none;

    &::before {
      border-color: darken($grey, 25%) transparent;
      bottom: -11px;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 10px 10px 0;
      border-color: $grey transparent;
      display: block;
      width: 0;
      z-index: 1;
      margin-left: -10px;
      bottom: -10px;
      left: 20px;
    }

    a {
      text-decoration: underline;
      color: $white;
    }
  }
}

@import 'dialog';