@import 'mobile';
@import 'ContextMenu';
@import 'Table';
@import 'Toggle';

.layout-editor-outer {
  display: inline-flex;

  @include context-menu;
  @include table;
  @include toggle;

  .layout-editor-inner {
    width: $settings-table-width;
    display: inline-flex;
    margin-bottom: $ui-large-margin - $ui-margin;

    table {
      width: 100%;
    }

    .btn-group {
      display: flex;
      flex-direction: column;

      button {
        width: 40px;
        font-size: 15px;
        display: block;
      }

      button:nth-child(1) {
        margin-top: 0;
      }

      @include mobile {
        flex-direction: row;
        margin-left: $ui-margin;
        margin-top: $ui-margin;

        button {
          margin: 0 $ui-margin $ui-large-margin 0;
        }
      }
    }

    @include mobile {
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 0;
    }
  }

  .layout-editor-component-list {
    margin-left: $ui-large-margin;

    @include mobile {
      margin-left: 0;
      margin-bottom: $ui-large-margin;
    }
  }

  .layout-editor-component {
    cursor: pointer;
  }

  .layout-container {
    margin-left: $ui-large-margin;

    @include mobile {
      margin-left: 0;
      margin-top: $ui-large-margin;
    }
  }

  @include mobile {
    flex-wrap: wrap;

    .layout-editor-inner-container {
      width: 100%;
    }

    .layout-editor-tabs button {
      margin-top: 0;
    }
  }
}
