import styled from 'styled-components';

const css = styled.div;

export default css`
   display: inline-block;

   .ds-user-avatar {
      border-radius: 100%;
      background: #eee;
      width: ${(props) => props.theme.iconM || 48}px;
      height: ${(props) => props.theme.iconM || 48}px;
      line-height: ${(props) => props.theme.iconM || 48}px;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      overflow: hidden;

      img {
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0px;
         top: 0px;
      }

      &.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}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}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}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}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}px / 2;
      }
   }
`;
