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

.#{$iot-prefix}--composed-modal {
  .#{$prefix}--modal-container {
    @media (min-height: carbon--rem(515px)) {
      overflow-y: auto;
    }
  }

  .#{$prefix}--overflow-menu-options {
    // TODO: Can remove once this issue is fixed: https://github.com/carbon-design-system/carbon/issues/6662
    z-index: 10000;
  }

  .#{$prefix}--tooltip {
    // TODO: Can remove once this issue is fixed: https://github.com/carbon-design-system/carbon/issues/6662
    z-index: 10000;
  }

  /* support large modals for ll the sizes */
  &.#{$iot-prefix}--composed-modal--large {
    .#{$prefix}--modal-header {
      margin-bottom: 0;
    }
    .#{$prefix}--modal-container {
      min-height: carbon--rem(600px);
      min-width: carbon--rem(800px);
      max-height: 80%;
      @media (min-width: carbon--rem(600px)) {
        height: auto;
      }
      @media (min-width: carbon--rem(1024px)) {
        max-width: 80%;
      }
      @media (min-width: carbon--rem(1200px)) {
        max-width: 60%;
      }
    }
  }

  &.#{$iot-prefix}--composed-modal--full-screen {
    & > .#{$prefix}--modal-container {
      $min-width: calc(100% - #{$layout-02});
      min-height: $min-width;
      min-width: $min-width;
      max-height: 80%;
      @media (min-width: carbon--rem(1024px)) {
        min-width: $min-width;
      }
      @media (min-width: carbon--rem(1200px)) {
        min-width: $min-width;
      }

      .#{$prefix}--modal-header {
        margin-bottom: 0;
      }
    }
  }

  /* Needed for buttons when they're next to each other */

  .#{$prefix}--modal-header__heading {
    margin-bottom: $spacing-04;
  }

  .#{$prefix}--modal-content {
    min-height: carbon--rem(200px);
  }
}

.#{$iot-prefix}--composed-modal--inline-notification {
  width: calc(100% - 1rem * 2);
  margin: $spacing-05 auto;
}

.#{$iot-prefix}--composed-modal-footer {
  justify-content: flex-end;

  & > * {
    width: 100%;
  }

  .modal-greedy-spacer {
    flex-grow: 2;
    text-align: left; // needed to override the dialog style
  }
}

.#{$iot-prefix}--composed-modal__body--small-margin-bottom {
  margin-bottom: $spacing-05;
}