.euiPopover__panel {

  &.euiPopover__panel-isAttached {
    @include euiBottomShadowMedium;

    // Reset border radius to panel's
    // Specificity also helps override default theme
    @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
      &.euiPanel--#{$modifier} {
        border-radius: $amount;
      }
    }
  }

  .euiPopover__panelArrow {
    &:before {
      filter: blur($euiSizeXS - 1px);
      opacity: .2;
    }

    $arrowShadowCompensation: $euiSizeXS;

    &.euiPopover__panelArrow--top {
      &:before {
        bottom: -$euiPopoverArrowSize;
        border-top-color: $euiShadowColor;
        clip-path: polygon(#{-$arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation});
      }

      &:after {
        bottom: -$euiPopoverArrowSize + 1;
      }
    }

    &.euiPopover__panelArrow--right {
      &:before {
        border-right-color: $euiShadowColor;
        clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation});
      }

      &:after {
        left: -$euiPopoverArrowSize + 1;
      }
    }

    &.euiPopover__panelArrow--bottom {
      &:before {
        border-bottom-color: $euiShadowColor;
        clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} $euiPopoverArrowSize, #{-$arrowShadowCompensation} $euiPopoverArrowSize);
      }

      &:after {
        top: -$euiPopoverArrowSize + 1;
      }
    }

    &.euiPopover__panelArrow--left {
      &:before {
        right: -$euiPopoverArrowSize;
        border-left-color: $euiShadowColor;
        clip-path: polygon(0 #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, 0 #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation});
      }

      &:after {
        right: -$euiPopoverArrowSize + 1;
      }
    }
  }
}


// Mainly for specificity, but don't add padding to the title if
// neither the the panel nor the title has a padding modifier (aka NONE)
.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) {
  padding: 0;
}

// Allow the panel padding to actually modify the all side of the title
@each $modifier, $amount in $euiPanelPaddingModifiers {
  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) {
    padding: $amount;
  }
}

/**
 * Footer specific overrides
 */

// Mainly for specificity, but don't add padding to the footer if
// neither the the panel nor the footer has a padding modifier (aka NONE)
.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
  padding: 0;
}

// Allow the panel padding to actually modify the all side of the footer
@each $modifier, $amount in $euiPanelPaddingModifiers {
  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
    padding: $amount;
  }
}

