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

:root {
	--surface: white;
	--surface-container: #f8fafd;
	--surface-container-hover: #ebeff5;
	--primary: #1c73e8;
	--primary-hover: #1f65c9;
	--primary-active: #2258ab;
	--primary-container: #f4f6fc;
	--primary-container-hover: #e9eef6;
	--secondary: #d2e3fc;
	--secondary-container: #f0f4f8;
	--secondary-container-hover: #dde3ea;
	--tertiary: #e7f0fe;
	--accent: #cbf0f8;

	color: black;
}

.dark {
	--surface: #131314;
	--surface-container: #28292a;
	--surface-container-hover: #3c3d41;
	--primary: #8ab4f7;
	--primary-hover: #99bcf6;
	--primary-active: #a2c1f5;
	--primary-container: #2d2e30;
	--primary-container-hover: #282a2c;
	--secondary: #164ea6;
	--secondary-container: #1e1f20;
	--secondary-container-hover: #333537;
	--tertiary: #3c4043;
	--accent: #4b737b;

	color: white;
}

body {
	overflow: hidden;
}

.transparent-scrollbar {
	scrollbar-color: grey #00000000;
}

@keyframes fadeInZoomRight {
	0% {
		opacity: 0;
		transform: translateX(25%) scale(0);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.send-button {
	animation: fadeInZoomRight 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes showSettings {
	0% {
		/* opacity: 0; */
		transform: translateX(100%);
	}
	100% {
		/* opacity: 1; */
		transform: translateX(0);
	}
}
@keyframes hideSettings {
	0% {
		/* opacity: 0; */
		transform: translateX(-100%);
	}
	100% {
		/* opacity: 1; */
		transform: translateX(0);
	}
}

.send-button-visible {
	animation: showSettings 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95); /* Adjust the value based on your layout */
}

.send-button-hidden {
	animation: hideSettings 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.suggestion-card {
	opacity: 0;
	animation: fadeInUp 0.25s ease-out forwards;
}

.suggestion-card:nth-child(1) {
	animation-delay: 0.1s;
}

.suggestion-card:nth-child(2) {
	animation-delay: 0.2s;
}

.suggestion-card:nth-child(3) {
	animation-delay: 0.3s;
}

.suggestion-card:nth-child(4) {
	animation-delay: 0.4s;
}

/* The slider itself */
.formality-slider {
	-webkit-appearance: none; /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 40px; /* Specified height */
	border-radius: 10000px;
	background: var(--tertiary); /* Grey background */
	outline: none; /* Remove outline */
	-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
	transition: opacity 0.2s;
	padding-left: 5px;
	padding-right: 5px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.formality-slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 30px; /* Set a specific slider handle width */
	height: 30px; /* Slider handle height */
	border-radius: 100%;
	background: var(--primary); /* Green background */
	cursor: pointer; /* Cursor on hover */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.formality-slider-inactive::-webkit-slider-thumb {
	cursor: default !important; /* Cursor on hover */
}

.tooltip {
	visibility: hidden;
}

.icon:hover + .tooltip {
	visibility: visible;
}

.stop-spin {
	animation-iteration-count: 1;
}

.sidebar-button-active:hover div {
	@apply font-semibold;
}
.sidebar-button:hover div {
	@apply bg-surface-container-hover font-semibold;
}

.spinAnimation {
	animation-fill-mode: forwards;
}

.dot-flashing {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 5px;
	background-color: #a6a6a6;
	color: #a6a6a6;
	animation: dot-flashing 1s infinite linear alternate;
	animation-delay: 0.5s;
	transition: opacity 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.dot-flashing::before,
.dot-flashing::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
}
.dot-flashing::before {
	left: -12px;
	width: 8px;
	height: 8px;
	border-radius: 5px;
	background-color: #a6a6a6;
	color: #a6a6a6;
	animation: dot-flashing 1s infinite alternate;
	animation-delay: 0s;
}
.dot-flashing::after {
	left: 12px;
	width: 8px;
	height: 8px;
	border-radius: 5px;
	background-color: #a6a6a6;
	color: #a6a6a6;
	animation: dot-flashing 1s infinite alternate;
	animation-delay: 1s;
}

@keyframes dot-flashing {
	0% {
		background-color: #a6a6a6;
	}
	100% {
		background-color: #a6a6a65f;
	}
}

.scroll-fadeout {
	-webkit-mask: linear-gradient(to bottom, transparent, #000) 0 100% /
			calc(100%) 42px,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	-webkit-mask-repeat: no-repeat;
}

.scroll-fadeout-no-scrollbar {
	-webkit-mask: linear-gradient(to bottom, transparent, #000) 0 100% /
			calc(100% - 20px) 20px,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	-webkit-mask-repeat: no-repeat;
}

.file-list-container:hover .file-list-description {
	background-color: theme("colors.surface-container-hover");
}

.white-logo {
	filter: brightness(0) invert(1);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeIn {
	animation: fadeIn 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.all-no-pointer * {
	pointer-events: none;
}

pre {
	white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
	white-space: -pre-wrap; /* Opera */
	white-space: -o-pre-wrap; /* Opera */
	white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
	word-wrap: break-word; /* IE 5.5+ */
}
