@import "tailwindcss";

body {
	color: #fff;
	font-family: "Poppins", serif;
	user-select: none;
	scroll-behavior: smooth;
}

#titlebar {
	-webkit-app-region: drag;
}

#no-draggable {
	-webkit-app-region: no-drag;
}

#minimize-button {
	-webkit-app-region: no-drag;
}

#close-button {
	-webkit-app-region: no-drag;
}

@keyframes borealisBar {
	0% {
		left: 0%;
		right: 100%;
		width: 0%;
	}
	10% {
		left: 0%;
		right: 75%;
		width: 25%;
	}
	90% {
		right: 0%;
		left: 75%;
		width: 25%;
	}
	100% {
		left: 100%;
		right: 0%;
		width: 0%;
	}
}

.loader {
	margin: 0 auto;
	margin-top: -20px;
	border-radius: 10px;
	border: 4px solid transparent;
	position: relative;
	padding: 5px;
}
.loader:before {
	content: "";
	border: 1px solid #ffffff1e;
	border-radius: 10px;
	position: absolute;
	top: -3px;
	right: -4px;
	bottom: -3px;
	left: -4px;
}
.loader .loaderBar {
	position: absolute;
	border-radius: 10px;
	top: 0;
	right: 100%;
	bottom: 0;
	left: 0;
	background: #fff;
	width: 0;
	animation: borealisBar 2s linear infinite;
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
	background: rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar:hover {
	background: rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
}

iframe::-webkit-scrollbar {
	width: 2px;
}

iframe::-webkit-scrollbar-track {
	background: transparent;
}

iframe::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
}

#scrollable {
	-webkit-overflow-scrolling: touch;
}

.hide-scrollbar {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

#view {
	-webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

#logs {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 2%,
		black 96%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 2%,
		black 96%,
		transparent 100%
	);
}

#main {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	transition: opacity 0.8s cubic-bezier(0.42, 0, 0.58, 1), transform 0.8s
		cubic-bezier(0.42, 0, 0.58, 1);
	opacity: 1;
	transform: scale(1);
}

.page-transition {
	animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: opacity, transform;
}

body:has(#modal) .page-transition {
	animation: none;
	will-change: auto;
}

@keyframes pageEnter {
	0% {
		opacity: 0;
		filter: blur(10px);
		transform: scale(0.98) translateZ(0);
	}
	100% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1) translateZ(0);
	}
}

button {
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
button:active {
	transform: scale(0.97);
}
button:disabled {
	cursor: default;
	transform: scale(0.0);
}
a {
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}
a:active {
	transform: scale(0.97);
}
a:disabled {
	cursor: default;
}
