@import "~react-grid-layout/css/styles.css";
@import "~react-resizable/css/styles.css";

.panel-in-fullscreen {
  .react-grid-layout {
    height: 100% !important;
  }

  .react-grid-item {
    display: none !important;
    transition-property: none !important;
  }

  .panel--fullscreen {
    display: block !important;
    position: unset !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(0px, 0px) !important;
  }
}

@include media-breakpoint-down(sm) {
  .react-grid-layout {
    height: 100% !important;
  }

  .react-grid-item {
    display: none;
    transition-property: none !important;
  }

  .panel {
    display: block !important;
    position: unset !important;
    width: 100% !important;
    transform: translate(0px, 0px) !important;
    margin-bottom: 1rem;
  }
}

.theme-dark {
  .react-grid-item > .react-resizable-handle {
    background-image: url("../img/resize-handle-white.svg");
  }
}

// Hack for preventing panel menu overlapping.
.react-grid-item.resizing.panel,
.react-grid-item.panel.dropdown-menu-open,
.react-grid-item.react-draggable-dragging.panel {
  z-index: $zindex-dropdown;
}

// Disable animation on initial rendering and enable it when component has been mounted.
.react-grid-item.cssTransforms.panel {
  transition-property: none;
}

.animated .react-grid-item.cssTransforms.panel {
  transition-property: transform;
}