// 1. Extend beta badges to at least 40% of the container's width
// 2. Fix for IE to ensure badges are visible outside of a <button> tag

@mixin euiHasBetaBadge($selector, $spacing: $euiSize) {
  #{$selector}--hasBetaBadge {
    position: relative;
    overflow: visible; // 2

    #{$selector}__betaBadgeWrapper {
      position: absolute;
      top: ($euiSizeL / -2);
      left: 50%;
      transform: translateX(-50%);
      z-index: 3; // get above abs positioned image
      min-width: 40%; // 1
      max-width: calc(100% - #{($spacing * 2)});

      .euiToolTipAnchor,
      #{$selector}__betaBadge {
        width: 100%; // 1
      }

      #{$selector}__betaBadge {
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: $euiColorEmptyShade;
      }
    }
  }
}