@tailwind base;
@tailwind components;
@tailwind utilities;

/* Radix Customization (e.g. overriding  */
.radix-themes {
	/* --accent-track: var(--Accent-color-Accent-12, #101d46); */
	--indigo-track: var(--Accent-color-Accent-12, #101d46);
}

/* Tailwind takes out all default styles applied to html elements which causes problems for ReactMarkdown. 
To fix this, we need to revert all styles applied to the markdown elements.
https://stackoverflow.com/questions/74607419/react-markdown-don%C2%B4t-render-markdown */
.markdown > * {
	all: revert;
	width: 100%;
}

.ToastViewport {
	position: fixed;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	padding: 25px;
	gap: 10px;
	width: 390px;
	max-width: 100vw;
	margin: 0;
	list-style: none;
	z-index: 2147483647;
	outline: none;
}

.ToastRoot {
	border-radius: 6px;
	box-shadow:
		hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
	padding: 15px;
	display: grid;
	grid-template-areas: "content";
	align-items: center;
	border: 1px solid;
}

.ToastTitle {
	font-size: 14px;
	margin-bottom: 4px;
}

.ToastContent {
	grid-area: content;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ToastIcon {
	width: 25px;
	height: 25px;
}

.ToastRoot.Success {
	background-color: #e6f4ea;
	border-color: #34a853;
}

.ToastRoot.Success .ToastIcon,
.ToastRoot.Success .ToastTitle {
	color: #34a853;
}

.ToastRoot.Error {
	background-color: #fce8e6;
	border-color: #ea4335;
}

.ToastRoot.Error .ToastIcon,
.ToastRoot.Error .ToastTitle {
	color: #ea4335;
}

.ToastRoot.Info {
	background-color: #e8f0fe;
	border-color: #4285f4;
}

.ToastRoot.Info .ToastIcon,
.ToastRoot.Info .ToastTitle {
	color: #4285f4;
}

.ToastTitle {
	margin-bottom: 5px;
	font-weight: 500;
	color: black;
	font-size: 15px;
}

.ToastDescription {
	margin: 0;
	color: black;
	font-size: 13px;
	line-height: 1.3;
}

@keyframes slideLeft {
	from {
		transform: translateX(calc(100% + 25px));
	}
	to {
		transform: translateX(0);
	}
}

@keyframes slideRight {
	from {
		transform: translateX(var(--radix-toast-swipe-end-x));
	}
	to {
		transform: translateX(100%);
	}
}

.ToastRoot[data-state="open"] {
	animation: slideLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ToastRoot[data-state="closed"] {
	animation: slideRight 100ms ease-in;
}

.ToastRoot[data-swipe="move"] {
	transform: translateX(var(--radix-toast-swipe-move-x));
}

.ToastRoot[data-swipe="cancel"] {
	transform: translateX(0);
	transition: transform 200ms ease-out;
}

.ToastRoot[data-swipe="end"] {
	animation: slideRight 100ms ease-out;
}
