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

$top-section-height: 6.25rem;
$border-radius: 0.25rem;

.#{$iot-prefix}--image-gallery-modal {
  &--warning-modal {
    z-index: 30000;
  }
  &.#{$iot-prefix}--composed-modal.#{$iot-prefix}--composed-modal--large {
    .#{$prefix}--modal-container {
      background-color: $ui-02;
      overflow: hidden;
      height: 80%;
      $min-width: calc(100% - #{$layout-02});
      min-width: $min-width;
      max-width: $min-width;

      // Override large Composed modal
      @media (min-width: carbon--rem(600px)) {
        height: 80%;
        min-width: $min-width;
      }
      @media (min-width: carbon--rem(1024px)) {
        min-width: $min-width;
      }
      @media (min-width: carbon--rem(1200px)) {
        min-width: $min-width;
      }
    }
  }

  .#{$prefix}--search-input {
    background-color: $field-01;
  }

  .#{$prefix}--modal-content {
    padding-right: $spacing-05;
  }
}

.#{$iot-prefix}--image-gallery-modal__top-section {
  height: $top-section-height;
}

.#{$iot-prefix}--image-gallery-modal__instruction-text {
  margin-bottom: $spacing-05;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.#{$iot-prefix}--image-gallery-modal__search-list-view-container {
  display: flex;
  margin-bottom: $spacing-05;
}

.#{$iot-prefix}--image-gallery-modal__content-switcher {
  width: auto;
  margin-left: $spacing-05;
  margin-right: $spacing-05;
  @include content-switcher-border-radius($border-radius, left, right);
}

// Container that lets the scroll panel use negative margin.
.#{$iot-prefix}--image-gallery-modal__flex-wrapper {
  overflow: hidden;
  height: calc(100% - #{$top-section-height});
}

.#{$iot-prefix}--image-gallery-modal__scroll-panel {
  display: flex;
  overflow-y: scroll;
  height: 100%;
}

.#{$iot-prefix}--image-gallery-modal__scroll-panel--grid {
  flex-wrap: wrap;
  // We only want space between the children, not to the edges of the panel.
  & > * {
    margin-left: $spacing-05;
    margin-bottom: $spacing-05;
  }
  margin-left: calc(-1 * #{$spacing-05});
  margin-bottom: calc(-1 * #{$spacing-05});
}

.#{$iot-prefix}--image-gallery-modal__scroll-panel--list {
  flex-direction: column;
}

html[dir='rtl'] {
  .#{$iot-prefix}--image-gallery-modal__content-switcher {
    @include content-switcher-border-radius($border-radius, right, left);
  }
}