@import '../../globals/vars';

.#{$iot-prefix}--hotspot-editor-modal.#{$iot-prefix}--composed-modal {
  // Only apply to the top level modal, in case there is another modal nested inside the modal
  & > .#{$prefix}--modal-container > .#{$prefix}--modal-content {
    $right-side-width: 420px;
    padding-right: 0;
    display: flex;
    & > *:first-child {
      margin-right: $layout-03;
      flex-grow: 1;
      max-width: calc(100% - (#{$right-side-width} + (#{$layout-03} * 2)));
    }
    & > *:last-child {
      margin-right: $layout-03;
      min-width: $right-side-width;
      overflow-y: auto;
    }

    .#{$prefix}--tabs {
      margin-top: $layout-01;
    }

    .#{$prefix}--tab-content {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

.#{$iot-prefix}--hotspot-editor-modal__variable-loading {
  margin-top: $layout-05;
  justify-content: center;
}