@import 'tailwindcss';

@plugin '@tailwindcss/forms';

@theme {
	@keyframes fade-in-scale {
		0% {
			opacity: 0;
			transform: scale(0.95);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
}

@utility animate-fade-in-scale {
	animation: fade-in-scale 0.2s ease-out forwards;
}

@utility animate-fade-in-scale-fast {
	animation: fade-in-scale 0.1s ease-out forwards;
}

@utility single-line-input {
	@apply w-full rounded-sm border-2 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;
	&:focus {
		@apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none;
	}
}

@utility action-button {
	@apply rounded-sm border-2 border-(--nucleus-accent) px-3 py-2 font-semibold text-(--nucleus-accent) transition-all hover:scale-105 hover:bg-(--nucleus-accent)/20;
}

@utility error-disclaimer {
	@apply rounded-sm border-2 border-red-500 p-2;
	background-color: color-mix(in srgb, var(--color-red-500) 15%, var(--nucleus-bg));
	p {
		@apply text-base text-wrap wrap-break-word text-red-500;
	}
}

:root {
	scrollbar-width: thin;
	scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);
}

button {
	@apply hover:cursor-pointer;
}

a {
	&:hover {
		@apply cursor-pointer underline;
	}
}

.grain:before {
	content: '';
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2' intercept='-0.5' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' /%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 40vmax;
	opacity: 0.08;
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.color-picker {
	--cp-bg-color: var(--nucleus-bg);
	--cp-border-color: var(--nucleus-accent);
	--cp-text-color: var(--nucleus-fg);
	--cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent);
	--cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent);
	--picker-height: 8rem;
	--picker-width: 8rem;
}

.animate-pulse-highlight {
	animation: pulse-highlight 0.6s ease-in-out 3;
}

@keyframes pulse-highlight {
	0%,
	100% {
		box-shadow: 0 0 0 0 var(--nucleus-selected-post);
	}
	50% {
		box-shadow: 0 0 20px 5px var(--nucleus-selected-post);
	}
}