.#{$iot-prefix}--dashboard-editor {
  display: flex;
  // need to reserve space for the suite header
  height: calc(100vh - 3rem);
  > .#{$prefix}--skeleton__text {
    margin-top: 1rem;
    margin-left: 1rem;
  }

  &__overflow {
    overflow-x: auto; // allows a larger width
  }

  &--content {
    flex: 1;
    flex-direction: column;
    display: flex;
    overflow-x: auto;
  }

  &-header {
    flex: 0;
    padding: $spacing-05 0 $spacing-06;
    .#{$prefix}--grid {
      /* allow the header to stretch the full page width */
      max-width: none;
      padding-left: $spacing-07;
      padding-right: $spacing-05;
    }
    &--top {
      height: calc(#{$spacing-05} + #{$spacing-02});
      display: flex;
      align-items: center;
    }
    &--bottom {
      height: calc(#{$spacing-07} + #{$spacing-02});
      display: flex;
      align-items: center;
      // FileUploaderButton isn't a true button so extra styling is needed to make it look like a iconOnly button
      &__import.#{$prefix}--tooltip__trigger {
        // have to force the span containing the svg down to be aligned with other iconOnly buttons
        span {
          padding-top: 3px;
        }
        svg {
          fill: $icon-01;
        }
      }

      &__switcher {
        margin-right: $spacing-05;
      }

      .#{$prefix}--btn--tertiary,
      .#{$prefix}--btn--primary {
        margin-left: $spacing-05;
        padding-left: $spacing-05;
        padding-right: $spacing-05;
      }
    }
    &--left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    &--right {
      display: flex;
    }
  }

  &--preview {
    flex: 1;
    margin-left: $spacing-05;
    margin-right: $spacing-05;

    &__selected-breakpoint {
      background-color: $text-03;
      overflow-x: auto; // allows a larger width
    }

    &__card:focus {
      outline: 2px solid $focus;
    }

    // add an extra 4 pixels for the 2px border plus 1 pixel to fully detect the breakpoint
    &__sm {
      width: 485px;
    }
    &__md {
      width: 677px;
    }
    &__lg {
      width: 1061px;
    }

    &__breakpoint-info {
      padding: $spacing-05;
      width: 100%;
      background-color: $ui-03;
    }

    &__outline {
      border: 2px dashed $ui-04;
    }

    &__grid-container {
      // force a larger height so the background color will stretch the full height
      // 3rem for the navbar, 100px for the PageTitleBar header
      min-height: calc(100vh - 7rem - 100px);
      background-color: $ui-background;
      padding-top: 1rem;
    }
  }

  &--sidebar {
    min-height: 100%;
    width: 16rem;
  }
}