.euiDroppable {
  $euiDroppableColor: $euiColorSecondary;
  transition: background-color $euiAnimSpeedExtraSlow ease;

  &.euiDroppable--isDraggingType:not(.euiDroppable--isDisabled) {
    background-color: transparentize($euiDroppableColor, .9);

    &.euiDroppable--isDraggingOver {
      background-color: transparentize($euiDroppableColor, .75);
    }
  }

  .euiDroppable__placeholder {
    &.euiDroppable__placeholder--isHidden {
      // Overriding inline styles on JS-inserted HTML elements
      display: none !important; // sass-lint:disable-line no-important
    }
  }
}

@include euiPanel($selector: '.euiDroppable--withPanel');

.euiDroppable--withPanel {
  @include euiBottomShadowMedium;
  border-radius: $euiBorderRadius;
}

.euiDroppable--noGrow {
  flex-grow: 0;
}

.euiDroppable--grow {
  flex-grow: 1;
}

@each $size, $spacing in $euiDragAndDropSpacing {
  .euiDroppable--#{$size} {
    padding: $spacing;
  }
}