import React, { PropsWithChildren } from 'react'
import styled from 'styled-components'
import {TinyText} from '../Typography'

const StyledTag = styled.div`
  background: #FFAB83;
  border-radius: 12px;
  text-align: center;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  vertical-align: bottom;
  display: inline-block;

  > span {
    position: relative;
    vertical-align: bottom;
    display: inline-block;
    line-height: 22px;
  }
`
export const Tag: React.FC<PropsWithChildren> = (props) => {
	return <StyledTag><TinyText>{props.children}</TinyText></StyledTag>
}
