.euiBetaBadge {
  display: inline-block;
  padding: 0 $euiSize;
  border-radius: $euiSizeL;
  box-shadow: inset 0 0 0 1px $euiBorderColor;
  vertical-align: super; // if displayed inline with text

  font-size: $euiFontSizeXS;
  font-weight: $euiFontWeightBold;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: $euiSizeL;
  text-align: center;
  white-space: nowrap;
  cursor: default;

  &:focus {
    @include euiFocusRing;
  }
}

// When it's just an icon, make it a circle
.euiBetaBadge--iconOnly {
  padding: 0;
  width: $euiSizeL;

  .euiBetaBadge__icon {
    position: relative;
    margin-top: -1px;
  }
}