import { EuiBadge } from '@elastic/eui' ; import React from 'react' ; import styled from 'styled-components' ; import * as i18n from './translations' ; import { AndOr } from '.' ; const RoundBadge = styled ( EuiBadge ) `
  align-items: center;
  border-radius: 100%;
  display: inline-flex;
  font-size: 9px;
  height: 34px;
  justify-content: center;
  margin: 0 5px 0 5px;
  padding: 7px 6px 4px 6px;
  user-select: none;
  width: 34px;
  .euiBadge__content {
    position: relative;
    top: -1px;
  }
  .euiBadge__text {
    text-overflow: clip;
  }
` as unknown as typeof EuiBadge ; RoundBadge . displayName = 'RoundBadge' ; export const RoundedBadge = ( { type } ) => ( < RoundBadge data - test - subj = "and-or-badge" color = "hollow" > { type === 'and' ? i18n . AND : i18n . OR } < /RoundBadge>); RoundedBadge . displayName = 'RoundedBadge' ;