// SASSTODO: Can't find this selector, but could break something if removed
.react-grid-layout .gs-w {
  z-index: auto;
}

/**
 * 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable
 * element.
 */
.dshLayout--viewing {
  .react-resizable-handle {
    display: none; /* 1 */
  }
}

/**
 * 1. If we don't give the resizable handler a larger z index value the layout will hide it.
 */
.dshLayout--editing {
  .react-resizable-handle {
    @include size($euiSizeL);
    z-index: $euiZLevel1; /* 1 */
    right: 0;
    bottom: 0;
    padding-right: $euiSizeS;
    padding-bottom: $euiSizeS;
  }
}

/**
 * 1. Need to override the react grid layout height when a single panel is expanded. Important is required because
 * otherwise the height is set inline.
 */
.dshLayout-isMaximizedPanel {
  height: 100% !important; /* 1. */
}

/**
 * When a single panel is expanded, all the other panels moved offscreen.
 * Shifting the rendered panels offscreen prevents a quick flash when redrawing the panels on minimize
 */
.dshDashboardGrid__item--hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/**
 * turn off panel transforms initially so that the dashboard panels don't swoop in on first load.
 */
.dshLayout--noAnimation .react-grid-item.cssTransforms {
  transition-property: none !important;
}

/**
 * 1. We need to mark this as important because react grid layout sets the width and height of the panels inline.
 */
.dshDashboardGrid__item--expanded {
  position: absolute;
  height: 100% !important; /* 1 */
  width: 100% !important; /* 1 */
  top: 0 !important; /* 1 */
  left: 0 !important; /* 1 */
  transform: none !important;
  padding: $euiSizeS;

  // Altered panel styles can be found in ../panel
}

// Remove padding in fullscreen mode
.kbnAppWrapper--hiddenChrome {
  .dshDashboardGrid__item--expanded {
    padding: 0;
  }
}

// REACT-GRID

.react-grid-item {
  /**
    * Copy over and overwrite the fill color with EUI color mixin (for theming)
    */
  > .react-resizable-handle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpolygon fill='#{hexToRGB($euiColorDarkShade)}' points='6 6 0 6 0 4.2 4 4.2 4.2 4.2 4.2 0 6 0' /%3E%3C/svg%3E%0A");

    &::after {
      border: none !important;  /** overrides library default visual indicator **/
    }

    &:hover,
    &:focus {
      background-color: $embEditingModeHoverColor;
    }
  }

  /**
   * Dragged/Resized panels in dashboard should always appear above other panels
   * and above the placeholder
   */
  &.resizing,
  &.react-draggable-dragging {
    z-index: $euiZLevel2 !important;
  }

  &.react-draggable-dragging {
    transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
    @include euiBottomShadowLarge;
    border-radius: $euiBorderRadius; // keeps shadow within bounds
  }

  /**
   * Overwrites red coloring that comes from this library by default.
   */
  &.react-grid-placeholder {
    border-radius: $euiBorderRadius;
    background: $euiColorWarning;
  }
}
