import styled from "styled-components";
import { colors, theme } from "data/dataMx";

interface IStylesProps {
  backgroundColor?: colors;
  width?: number;
  height: number;
}

export const TagContainer = styled.div`
  background-color: ${({ backgroundColor }: IStylesProps) =>
    backgroundColor || theme.neutral100};
  border-radius: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid
    ${({ backgroundColor }: IStylesProps) =>
      backgroundColor || theme.neutral700};
  color: ${theme.neutral100};
  font-size: 16px;
  font-weight: 700;
  height: ${({ height }: IStylesProps) => height + "px"};
  letter-spacing: 0.1px;
  line-height: 16px;
  width: ${({ width }: IStylesProps) => width && width + "px"};
  padding: 5px 6px;
`;
export const IconContainer = styled.div`
  margin-left: 5px;
  margin-right: 5px;
`;
