import { Avatar } from '../Avatar';
import { Button } from '../Button';
import { Chevron } from '../Chevron';
import { styled } from '../styled';
import { profileClassnames } from './constants';
export const ProfileRoot = styled(Button) `
  overflow: hidden;
  display: flex;
  gap: ${({ theme }) => theme.spacing(3)};
  align-items: center;

  max-width: 300px;
  height: 48px;
  padding: ${({ theme }) => theme.microSpacing(2, 1, 2, 4)};

  text-align: left;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 40px;
    height: 40px;
  }
  
  &:active {
    background-color: ${({ theme }) => theme.palette.primary[100]};
  }
`;
export const User = styled.div `
  overflow: hidden;
  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
  align-items: center;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const Credentials = styled.div `
  overflow: hidden;
  
  & > .${profileClassnames.credentials} {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;
export const StyledChevron = styled(Chevron) `
  width: 24px;
  height: 24px;
`;
export const StyledAvatar = styled(Avatar) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 32px;
    height: 32px;
  }
`;
