import styled from "styled-components";

export const UserCardContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
  height: 100px;
  margin-bottom: ${({ isOpen }) => (isOpen ? "25px" : "80px")};
`;
export const UserDetail = styled.div`
  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
  flex-direction: column;
  gap: 5px;
  align-items: center;
  cursor: pointer;
`;

export const Avatar = styled.img`
  width: 50px;
  width: ${({ isOpen }) => (isOpen ? "47px" : "28px")};
  height: ${({ isOpen }) => (isOpen ? "47px" : "28px")};
  border-radius: 50%;
  cursor: pointer;
  object-fit: contain;
`;

export const UserName = styled.div`
  font-weight: 400;
  color: rgba(255, 255, 255, 0.881);
  font-size: 12px;
`;

export const Handle = styled.div`
  color: rgba(255, 255, 255, 0.69);
  font-size: 15px;
`;
