/**
 *
 * @ai-apps/angular v2.152.0 | _dashboard-editor.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


.#{$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;
  }
}
