@mixin euiPanel($selector) {
  @if variable-exists(selector) == false {
    @error 'A $selector must be provided to @mixin euiPanel().';
  } @else {
    #{$selector} {
      background-color: $euiColorEmptyShade;
      border: $euiBorderThin;
      border-radius: $euiBorderRadius;
      flex-grow: 1;

      &#{$selector}--flexGrowZero {
        flex-grow: 0;
      }

      &#{$selector}--shadow {
        @include euiBottomShadowSmall;
      }

      &#{$selector}--isClickable {
        // in case of button wrapper which inherently is inline-block and no width
        display: block;
        width: 100%;
        text-align: left;

        // transition the shadow
        transition: all $euiAnimSpeedFast $euiAnimSlightResistance;

        &:hover,
        &:focus {
          @include euiSlightShadowHover;
          transform: translateY(-2px);
          cursor: pointer;
        }
      }

      // Border Radius
      @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
        &#{$selector}--#{$modifier} {
          border-radius: $amount;
        }
      }

      // Background colors
      @each $modifier, $amount in $euiPanelBackgroundColorModifiers {
        &#{$selector}--#{$modifier} {
          background-color: $amount;
        }
      }
    }
  }
}