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

// Imports
@import "./fonts";
@import "./colors";

html,
body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, Lora, Sarabun, Segoe UI,
		Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
		sans-serif;
}

body::-webkit-scrollbar {
	width: 0.65rem;
	height: 0.65rem;
}

body::-webkit-scrollbar-track {
	background: $fadedPink3;
}

body::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background: $fadedPink2;

	&:hover {
		transition: all 0.5s;
		background-color: $darkPink;
	}
}

a {
	color: inherit;
	text-decoration: none;
}

* {
	box-sizing: border-box;
	@apply outline-none;
}

p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
span,
input,
label,
button {
	font-family: $fontStyle_main;
}

li,
p {
	a {
		@apply text-pink transition-all ease-in-out duration-[0.5s] hover:text-yellow focus:text-yellow hover:underline;
	}
}

/*  WASHING MACHINE
PAGE LOADING ANIMATION */
.spinner-wrapper {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;
	background-color: rgba(221, 69, 119, 0.95);
}

.spinner {
	width: 120px;
	height: 150px;
	background-color: $fadedYellow;
	background-repeat: no-repeat;
	background-image: linear-gradient($yellow 50%, $baseColor_white 51%),
		linear-gradient($yellow, $baseColor_white),
		linear-gradient($baseColor_white, $baseColor_white),
		radial-gradient(
			ellipse at center,
			$pink 25%,
			$pink 26%,
			$baseColor_white 50%,
			#0000 55%
		),
		radial-gradient(
			ellipse at center,
			$pink 25%,
			$pink 26%,
			$baseColor_white 50%,
			#0000 55%
		),
		radial-gradient(
			ellipse at center,
			$pink 25%,
			$pink 26%,
			$baseColor_white 50%,
			#0000 55%
		);
	background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
	background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
	position: relative;
	border-radius: 6%;
	animation: shake 3s ease-in-out infinite;
	transform-origin: 60px 180px;
}

.spinner:before {
	content: "";
	position: absolute;
	left: 5px;
	top: 100%;
	width: 7px;
	height: 5px;
	background: $yellow;
	border-radius: 0 0 4px 4px;
	box-shadow: 102px 0 $yellow;
}

.spinner:after {
	content: "";
	position: absolute;
	width: 95px;
	height: 95px;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 20px;
	background-color: $fadedPink2;
	background-image: linear-gradient(
			to right,
			#0004 0%,
			#0004 49%,
			#0000 50%,
			#0000 100%
		),
		linear-gradient(135deg, $pink 50%, $fadedPink3 51%);
	background-size: 30px 100%, 90px 80px;
	border-radius: 50%;
	background-repeat: repeat, no-repeat;
	background-position: 0 0;
	box-sizing: border-box;
	border: 10px solid #f0b800;
	box-shadow: 0 0 0 4px $baseColor_white inset, 0 0 6px 6px #0004 inset;
	animation: spin 3s ease-in-out infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(360deg);
	}
	75% {
		transform: rotate(750deg);
	}
	100% {
		transform: rotate(1800deg);
	}
}

@keyframes shake {
	65%,
	80%,
	88%,
	96% {
		transform: rotate(0.5deg);
	}
	50%,
	75%,
	84%,
	92% {
		transform: rotate(-0.5deg);
	}
	0%,
	50%,
	100% {
		transform: rotate(0);
	}
}
