import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   display: inline-block;

   .initials-letter {
      background: #222222;
      width: ${(props) => props.theme.iconM || 48}px;
      height: ${(props) => props.theme.iconM || 48}px;
      font-size: ${(props) => (props.theme.iconM || 48) / 2}px;
      text-align: center;
      line-height: ${(props) => props.theme.iconM || 48}px;
      color: white;
      font-weight: 700;
      display: inline-block;
      vertical-align: middle;

      &.initials-xs {
         width: ${(props) => props.theme.iconXS || 18}px;
         height: ${(props) => props.theme.iconXS || 18}px;
         line-height: ${(props) => props.theme.iconXS || 18}px;
         font-size: ${(props) => (props.theme.iconXS || 18) / 2}px;
         font-size: ${(props) => props.theme.iconXS || 18}px / 2;
      }

      &.initials-s {
         width: ${(props) => props.theme.iconS || 28}px;
         height: ${(props) => props.theme.iconS || 28}px;
         line-height: ${(props) => props.theme.iconS || 28}px;
         font-size: ${(props) => (props.theme.iconS || 28) / 2}px;
         font-size: ${(props) => props.theme.iconS || 28}px / 2;
      }

      &.initials-m {
         width: ${(props) => props.theme.iconM || 48}px;
         height: ${(props) => props.theme.iconM || 48}px;
         line-height: ${(props) => props.theme.iconM || 48}px;
         font-size: ${(props) => (props.theme.iconM || 48) / 2}px;
         font-size: ${(props) => props.theme.iconM || 48}px / 2;
      }

      &.initials-l {
         width: ${(props) => props.theme.iconL || 92}px;
         height: ${(props) => props.theme.iconL || 92}px;
         line-height: ${(props) => props.theme.iconL || 92}px;
         font-size: ${(props) => (props.theme.iconL || 92) / 2}px;
         font-size: ${(props) => props.theme.iconL || 92}px / 2;
      }

      &.initials-xl {
         width: ${(props) => props.theme.iconXL || 140}px;
         height: ${(props) => props.theme.iconXL || 140}px;
         line-height: ${(props) => props.theme.iconXL || 140}px;
         font-size: ${(props) => (props.theme.iconXL || 140) / 2}px;
         font-size: ${(props) => props.theme.iconXL || 140}px / 2;
      }

      ${(props) => props.circle && 'border-radius: 100%;'}
   }
`;
