import styled from '@modern-js/runtime/styled';

export const AvatarWrap = styled.div<{ size: number; borderless: boolean }>`
  .avatarContainer {
    position: relative;
    width: ${props => props.size}px;
    height: ${props => props.size}px;
  }
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    ${props =>
      props.borderless
        ? ''
        : 'box-shadow: -6px -6px 12px rgba(255, 255, 255, 0.04),6px 6px 12px rgba(0, 0, 0, 0.16);'}
  }

  .defaultAvatar {
    width: 100%;
    height: 100%;
    background: conic-gradient(
      from 105.11deg at 50% 50%,
      #8f94bf 0deg,
      #fde8e9 75deg,
      #8f94bf 360deg
    );
    border-radius: 50%;
    object-fit: cover;
    box-shadow: -6px -6px 12px rgba(255, 255, 255, 0.04),
      6px 6px 12px rgba(0, 0, 0, 0.16);
  }
`;
