/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import {theme, paddings} from 'components/shared/theme';

const {colors, spacing, fontSizeXS} = theme;

export const TagContainer = styled.default.div<{size?: string; disabled?: boolean}>`
  display: inline-flex;
  align-items: center;
  border-radius: 1rem;
  font-weight: 500;
  margin: ${spacing.xxSmall};
  color: ${colors.white};
  background-color: ${colors.gray700};
  height: 24px;
  padding: 0 ${paddings.small};
  font-size: ${fontSizeXS};
  ${({disabled}) =>
    disabled &&
    styled.css`
      opacity: 0.3;
      pointer-events: none;
    `}
  p {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
  }
  span{
    margin-top: 2px;
    margin-left: ${spacing.xSmall};
  }
`;
