Directory/client/src/utils/styles.ts

export const LIGHT_FONT: React.CSSProperties = {
	color: "darkgrey"
};

export const THIN_FONT: React.CSSProperties = {
	fontWeight: "300"
};

export const BOLD_FONT: React.CSSProperties = {
	fontWeight: "700"
};

export const MEDIUM_FONT: React.CSSProperties = {
	fontSize: "1em"
};

export const LARGE_FONT: React.CSSProperties = {
	fontSize: "2em"
};

export const EXTRA_LARGE_FONT: React.CSSProperties = {
	fontSize: "3em"
};
export const CENTER_VERTICALLY: React.CSSProperties = {
	display: "flex",
	alignItems: "center"
};

export const CENTER_HORIZONTALLY: React.CSSProperties = {
	justifyContent: "center",
	display: "flex"
};

export const STACK_FROM_BOTTOM: React.CSSProperties = {
	display: "flex",
	justifyContent: "flex-end",
	flexDirection: "column"
};

export const SPACE_EVENLY_HORIZONTALLY: React.CSSProperties = {
	display: "flex",
	justifyContent: "space-evenly"
};

export const SPACE_BETWEEN_HORIZONTALLY: React.CSSProperties = {
	display: "flex",
	justifyContent: "space-between"
};

export const ALIGN_LEFT: React.CSSProperties = {
	textAlign: "left"
};

export const ALIGN_RIGHT: React.CSSProperties = {
	textAlign: "right",
	justifyContent: "flex-end",
	display: "flex"
};

export const ALIGN_CENTER: React.CSSProperties = {
	textAlign: "center"
};

export const MARGIN_TOP: React.CSSProperties = {
	marginTop: "2em"
};

export const MARGIN_BOTTOM: React.CSSProperties = {
	marginBottom: "2em"
};

export const MARGIN_RIGHT: React.CSSProperties = {
	marginRight: "2em"
};

export const HALF_WIDTH: React.CSSProperties = {
	width: "50%"
};

export const FLEX_BOXES: React.CSSProperties = {
	display: "flex",
	flexWrap: "wrap"
};

export const BORDER: React.CSSProperties = {
	border: "solid red 1px"
};

export const BORDER_COLOR = (color: string): React.CSSProperties => ({
	border: `solid ${color} .1em`
});

export enum COLORS {
	OffWhite = "#F0F2F5",
	OffWhiteSelected = "#505e72",

	BackgroundGrey = "#F0F2F5",
	DarkerBackgroundGrey = "#d3d4d5a0",
	BorderGrey = "#dadce0",
	ClickableGrey = "#919191",

	Orange = "rgb(253, 126, 20)",

	Blue = "#007bff",
	PrimaryBlue = "#3774ff",
	SecondaryBlue = "#83a9ff",
	SideBarBlue = "#2C384A",
	SidebarBlueSelected = "#B0B7C1",
	SideBarOffBlue = "#52688A"
}

import { styled, css } from "styled-components";

// export const LIGHT_FONT = css`;
// 	color: "darkgrey";
// `;

// export const THIN_FONT = css`
// 	font-weight: 300;
// `;

// export const BOLD_FONT = css`
// 	font-weight: 700;
// `;

// export const MEDIUM_FONT = css`
// 	font-size: 1em;
// `;

// export const LARGE_FONT = css`
// 	font-size: 2em;
// `;

// export const EXTRA_LARGE_FONT = css`
// 	font-size: 3em;
// `;

export const CenterVertically = css`
	align-items: center;
	display: flex;
`;

export const CenterHorizontally = css`
	justify-content: center;
	display: flex;
`;

export const StackFromBottom = css`
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
`;

export const SpaceEvenlyHorizontally = css`
	display: flex;
	justify-content: space-evenly;
`;

export const SpaceBetweenHorizontally = css`
	display: flex;
	justify-content: space-between;
`;

// export const ALIGN_LEFT = css`
// 	text-align: "left";
// `;

// export const ALIGN_RIGHT = css`
// 	text-align: "right";
// 	justify-content: "flex-end";
// 	display: "flex";
// `;

export const AlignCenter = css`
	text-align: center;
`;

// export const MARGIN_TOP = css`
// 	margin-top: "2em";
// `;

// export const MARGIN_BOTTOM = css`
// 	margin-bottom: "2em";
// `;

// export const MARGIN_RIGHT = css`
// 	margin-right: "2em";
// `;

export const FlexBoxes = css`
	display: flex;
	flex-wrap: wrap;
`;

// export const BORDER = css`
// 	border: "solid red 1px";
// `;

// export const BORDER_COLOR = (color: string): React.CSSProperties => ({
// 	border: `solid ${color} .1em`
// });

// export enum COLORS {
// 	OffWhite = "#F0F2F5",
// 	OffWhiteSelected = "#505e72",

// 	BackgroundGrey = "#F0F2F5",
// 	DarkerBackgroundGrey = "#d3d4d5a0",
// 	BorderGrey = "#dadce0",
// 	ClickableGrey = "#494F55",

// 	Orange = "rgb(253, 126, 20)",

// 	Blue = "#007bff",
// 	PrimaryBlue = "#3774ff",
// 	SecondaryBlue = "#83a9ff",
// 	SideBarBlue = "#2C384A",
// 	SidebarBlueSelected = "#B0B7C1",
// 	SideBarOffBlue = "#52688A"
// }

export const Input = css`
	width: 100%;
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #dadce0;
	border-radius: 8px;
	padding: 0 10px;
	font-size: 15px;
	line-height: 1;
	color: #494f55;
	/* box-shadow: 0 0 0 1px var(--violet7); */
	height: 35px;
	background-color: white;
`;

export const ProjectMainChild = css`
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: white;
	min-height: 0em;
	/* padding-bottom: 3em; */
`;
export const BorderedContainer = css`
	border: 1.5px solid var(--border-grey);
	border-radius: 10px;
`;

export const BorderRow = css`
	border-bottom: 1px solid #ddd;
	border-radius: 6px;

	&:last-child {
		border-bottom: none;
	}
`;

export const HoverableRow = css`
	background-color: white;
	cursor: pointer;

	&:hover {
		background-color: lightgray;
	}
`;

export const Hoverable = styled.div`
	opacity: 100%;
	width: 100%;
	cursor: pointer;

	&:hover {
		opacity: 45%;
	}
`;

export const HoverableRounded = styled.div`
	${CenterHorizontally}
	${CenterVertically}
	
	padding: 0.2em;
	margin-right: auto 0.5em;

	&:hover {
		border-radius: 6px;
		background: var(--mauve6);
		background-color: var(--mauve6);
		box-shadow: 1px 1px 5px var(--mauve6);
	}
`;

export const HorizontalLine = styled.div`
	border-bottom: 1.5px solid #ccc;
	/* Adjust the color and thickness as needed */
	margin: 10px 0;
	/* Adjust the margin as needed */
`;

export const StrongHorizontalLine = styled.div`
	border-bottom: 1.3px solid black;
	/* Adjust the color and thickness as needed */
	margin: 10px 0;
	/* Adjust the margin as needed */
`;