import styled from "styled-components";
import { color } from "../../style/varibles";

const PageTitleStyled = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
`;
const UserBtnStyled = styled.button`
  display: flex;
  width: 218px;
  padding: 16px;
  text-align: left;
  background-color: ${color.pricinpal.grisOscuro};
  color: ${color.pricinpal.blanco};
  border: none;
  border-radius: 5px;
  font-family: "Helvetica55";
  letter-spacing: 0.5px;
  font-size: 14px;
  text-transform: capitalize;
  align-items: center;
  cursor: pointer;
  img {
    background-color: white;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 50%;
    margin-right: 12px;
  }
`;

const UserModalStyled = styled.div`
  display: ${({ modal }) => (modal ? "flex" : "none")};
  position: absolute;
  background-color: white;
  padding: 12px;
  right: 2rem;
  top: 5.5rem;
  border-radius: 5px;
  box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity};
`;

const UserModalListStyled = styled.ul`
  display: flex;
  flex-direction: column;
`;

const UserModalItemStyled = styled.li`
  display: flex;
  justify-content: left;
  color: ${color.pricinpal.grisOscuro};
  margin: 6px 0;
  cursor: pointer;
  svg {
    margin-right: 12px;
  }
`;
export {
  PageTitleStyled,
  UserBtnStyled,
  UserModalStyled,
  UserModalListStyled,
  UserModalItemStyled,
};