// 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. */
  width: 100%;
  position: absolute !important; /* 1 */
}

/**
 * .dshLayout-withoutMargins only affects the panel styles themselves, see ../panel
 */

/**
 * When a single panel is expanded, all the other panels are hidden in the grid.
 */
.dshDashboardGrid__item--hidden {
  display: none;
}

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

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

// REACT-GRID

.react-grid-item {
  /**
   * Disable transitions from the library on each grid element.
   */
  transition: none;

  /**
    * 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;
  }
}

// When in view-mode only, and on tiny mobile screens, just stack each of the grid-items

@include euiBreakpoint("xs", "s") {
  .dshLayout--viewing {
    .react-grid-item {
      position: static !important;
      width: calc(100% - #{$euiSize}) !important;
      margin: $euiSizeS;
    }

    &.dshLayout-withoutMargins {
      .react-grid-item {
        width: 100% !important;
        margin: 0;
      }
    }
  }
}