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

.theme-tron {
	--color-primary: 249,115,22;
	--color-100: 224,231,255;
	--color-200: 199,210,254;
	--color-300: 165,180,252;
	--color-400: 129,140,248;
	--color-500: 121,124,242;
	--color-600: 79,70,229;
	--color-700: 67,56,202;
	--color-800: 55,48,163;
	--color-900: 49,46,129;
}

.theme-mocha {
	--color-primary: 5,150,105;
	--color-100: 246,246,244;
	--color-200: 235,233,229;
	--color-300: 219,218,209;
	--color-400: 175, 169, 155;
	--color-500: 148,144,129;
	--color-600: 99,96,77;
	--color-700: 82,76,55;
	--color-800: 55,52,31;
	--color-900: 40,37,17;
}

.theme-dramblr {
	--color-primary: 2,132,199;
	--color-100: 241,245,249;
	--color-200: 226,232,240;
	--color-300: 203,213,225;
	--color-400: 148,163,184;
	--color-500: 100,116,139;
	--color-600: 71,85,105;
	--color-700: 51,65,85;
	--color-800: 30,41,59;
	--color-900: 15,23,42;
}

.theme-midnight {
	--color-primary: 219,39,119;
	--color-100: 243,244,246;
	--color-200: 229,231,235;
	--color-300: 209,213,219;
	--color-400: 156,163,175;
	--color-500: 107,114,128;
	--color-600: 75,85,99;
	--color-700: 55,65,81;
	--color-800: 31,41,55;
	--color-900: 17,24,39;
}

.theme-iron {
	--color-primary: 219,39,119;
	--color-100: 244,244,245;
	--color-200: 228,228,231;
	--color-300: 212,212,216;
	--color-400: 161,161,170;
	--color-500: 113,113,122;
	--color-600: 82,82,91;
	--color-700: 63,63,70;
	--color-800: 39,39,42;
	--color-900: 24,24,27;
}

.theme-bubblegum {
	--color-primary: 2,132,199;
	--color-100: 252,231,243;
	--color-200: 251,207,232;
	--color-300: 249,168,212;
	--color-400: 244,114,182;
	--color-500: 236,72,153;
	--color-600: 219,39,119;
	--color-700: 190,24,93;
	--color-800: 157,23,77;
	--color-900: 131,24,67;
}

.theme-canary {
	--color-primary: 2,132,199;
	--color-100: 254,249,195;
	--color-200: 254,240,138;
	--color-300: 253,224,71;
	--color-400: 250,204,21;
	--color-500: 217, 167, 13;
	--color-600: 202,138,4;
	--color-700: 161,98,7;
	--color-800: 133,77,14;
	--color-900: 113,63,18;
}

.theme-evergreen {
	--color-primary: 220, 38, 38;
	--color-100: 244,246,244;
	--color-200: 229,235,231;
	--color-300: 209,219,213;
	--color-400: 155,175,161;
	--color-500: 106,128,115;
	--color-600: 76,99,81;
	--color-700: 55,82,62;
	--color-800: 31,55,38;
	--color-900: 17,40,23;
}

/* ----------------------- VARIABLES --------------------- */
/*:root {
	--color-primary: 220, 38, 38;
	}*/

	/* ---------------- RESPONSIVE UTILITIES ----------------- */
	@responsive {
		.text-shadow {
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
		}
		.text-shadow-t {
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
		}
		.text-shadow-light {
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
		}
		.text-shadow-light-t {
			text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1)
		}
		.sub-header-shadow {
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
		}
		.gradient-mask {
			-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
		}
		/* Chrome, Safari and Opera */
		.no-scrollbar::-webkit-scrollbar {
			display: none;
		}
		.no-scrollbar {
			-ms-overflow-style: none;  /* IE and Edge */
			scrollbar-width: none;  /* Firefox */
		}
	}

	/* -------------------- BASE STYLING -------------------- */
	@layer base {
		/* Headings */
		h1, .h1 {
			@apply text-5xl font-bold leading-10 mb-2;
		}
		h2, .h2 {
			@apply text-4xl font-bold leading-8 mb-2;
		}
		h3, .h3 {
			@apply text-3xl font-bold leading-7 mb-2;
		}
		h4, .h4 {
			@apply text-2xl font-bold leading-6 mb-2;
		}
		h5, .h5 {
			@apply text-lg font-bold leading-5 mb-2;
		}
		h6, .h6 {
			@apply text-base font-bold leading-4 mb-2;
		}
		/* Typography */
		p {
			@apply mb-3 last:mb-0;
		}
		a {
			@apply text-primary break-all
		}
		blockquote {
			@apply bg-gray-100 dark:bg-gray-700 border-l-2 border-gray-700 dark:border-gray-500 mb-4;
		}
		hr {
			@apply my-3
		}
		ul {
			@apply mb-3
		}
		.comment-text ul, .post-body ul {
			@apply list-disc pl-4
		}
		.comment-text ol, .post-body ol {
			@apply list-decimal pl-4
		}
		strong {
			@apply font-bold
		}
		code {
			@apply text-pink-600 dark:text-pink-300 font-mono;
		}
		pre {
			white-space: pre-wrap;       /* Since CSS 2.1 */
			white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
			white-space: -pre-wrap;      /* Opera 4-6 */
			white-space: -o-pre-wrap;    /* Opera 7 */
			word-wrap: break-word;       /* Internet Explorer 5.5+ */
		}
		/* Images */
		img {
			@apply inline
		}
		img[lazy=loading] {
			@apply animate-pulse;
		}
		img[width], img[height] {
			max-width: none;
			height: 24px;
		}
		/*Inputs*/
		.label {
			@apply block font-bold text-gray-700 text-sm leading-normal mb-1;
		}
	}

	/* ----------------------- INPUTS ----------------------- */
	.form-input {
		@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 
	}

	/* ---------------------- BUTTONS ----------------------- */
	.btn {
		@apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50;
	}
	.btn-primary {
		@apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-100 focus:text-gray-200;
	}
	.btn-red {
		@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white;
	}
	.btn-green {
		@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
	}
	.btn-blue {
		@apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200;
	}
	.btn-gray {
		@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
	}

	/* ---------------------- DROPDOWNS --------------------- */
	.dropdown-item-primary {
		@apply block w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-white dark:hover:bg-black bg-gradient-to-t dark:bg-gradient-to-t hover:from-primary hover:to-primary/80 dark:hover:from-primary/80 dark:hover:to-primary hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-b dark:focus:bg-gradient-to-t;
	}

	/* ----------------------- BADGES ----------------------- */
	.badge {
		@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
	}
	.badge-pink {
		@apply from-pink-600 to-pink-500 text-white;
	}
	.badge-purple {
		@apply from-purple-600 to-purple-500 text-white;
	}
	.badge-red {
		@apply from-red-600 to-red-500 text-white;
	}
	.badge-yellow {
		@apply from-yellow-600 to-yellow-500 text-yellow-900;
	}
	.badge-blue {
		@apply from-blue-600 to-blue-500 text-white;
	}
	.badge-green {
		@apply from-green-600 to-green-500 text-white;
	}
	.badge-primary {
		@apply bg-primary text-white;
	}

	/* ---------------------- TOOLTIPS ---------------------- */
	.tooltip-inner {
		background-color: @apply text-black;
		color: @apply text-white;
	}

	/* ----------------------- EMOJI ------------------------ */
	img.emoji {
		width: 30px;
		height: 30px;
		@apply inline-block object-contain
	}

	img.emoji-md {
		width: 60px;
		height: 60px;
		@apply inline-block object-contain
	}

	img.emoji-lg {
		max-width: 100%;
		@apply inline-block object-contain
	}