@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
@source './';
@import '@fontsource-variable/inter';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import './convertigo.theme.css';
@import './convertigo.utilities.css';

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(:not(.dark, .dark *)));
@custom-variant motif (&:where(.motif, .motif *));

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}
}

@utility fullscreen {
	@apply fixed top-0 left-0 z-50 h-full min-w-full bg-surface-50-950;
}

@utility button {
	@apply btn flex items-center rounded-base px-3 py-1 text-[13px] font-normal text-white;
}

@utility motif-primary {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility motif-secondary {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='0' y1='0' x2='20' y2='20' stroke='black' stroke-width='2' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='0' y1='0' x2='20' y2='20' stroke='white' stroke-width='2' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility motif-tertiary {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='black' stroke-width='2' /%3E%3Cline x1='0' y1='7.5' x2='15' y2='7.5' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='white' stroke-width='2' /%3E%3Cline x1='0' y1='7.5' x2='15' y2='7.5' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility motif-warning {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Ccircle cx='7.5' cy='7.5' r='2' fill='black'/%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Ccircle cx='7.5' cy='7.5' r='2' fill='white'/%3E%3C/svg%3E");
		}
	}
}

@utility motif-error {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility shadow-follow {
	@apply shadow-md/10 shadow-primary-500 hover:shadow-md/15;
}

@utility button-primary {
	@apply button preset-filled-primary-200-800 motif-primary shadow-follow shadow-primary-900-100;
}

@utility button-secondary {
	@apply button preset-filled-secondary-200-800 motif-secondary shadow-follow shadow-secondary-900-100;
}

@utility button-tertiary {
	@apply button preset-filled-tertiary-200-800 motif-tertiary shadow-follow shadow-tertiary-900-100;
}

@utility button-success {
	@apply button preset-filled-success-200-800 shadow-follow shadow-success-900-100;
}

@utility button-warning {
	@apply button preset-filled-warning-200-800 motif-warning shadow-follow shadow-warning-900-100;
}

@utility button-error {
	@apply button preset-filled-error-200-800 motif-error shadow-follow shadow-error-900-100;
}

@utility button-ico-primary {
	@apply button text-primary-500;
}

@utility button-ico-secondary {
	@apply button text-secondary-500;
}

@utility button-ico-tertiary {
	@apply button text-tertiary-500;
}

@utility button-ico-success {
	@apply button text-success-700-300;
}

@utility button-ico-warning {
	@apply button text-warning-500;
}

@utility button-ico-error {
	@apply button text-error-500;
}

@utility preset-gradient-one {
	background-image: linear-gradient(
		45deg,
		var(--color-secondary-200-800),
		var(--color-primary-200-800)
	);
	color: var(--color-primary-contrast-200-800);
}

@utility mini-card {
	@apply flex gap-2 rounded-sm p-1 text-nowrap select-none;
}

@utility chip {
	@apply button bg-gray-200 shadow-xs dark:bg-gray-700 dark:text-surface-200;

	& :hover {
		@apply bg-gray-300 dark:bg-gray-600;
	}
}

@utility more-chip {
	@apply chip cursor-pointer bg-yellow-400 text-surface-900 dark:bg-yellow-500;

	&:hover {
		@apply bg-yellow-300 dark:bg-yellow-400;
	}
}

@utility label-common {
	@apply cursor-pointer text-[14px];
}

@utility input-common {
	@apply w-full rounded-sm border-none bg-surface-100-900 font-normal placeholder:text-[16px] placeholder:font-light placeholder:text-surface-200 dark:placeholder:text-surface-500;
	&:focus {
		box-shadow: none;
	}
}

@utility select-common {
	@apply rounded-sm border-none font-normal placeholder:text-[12px] placeholder:font-light placeholder:text-surface-200 dark:bg-surface-800 dark:placeholder:text-surface-500;
}

@utility input-text {
	@apply mt-1 pl-4 text-[16px] text-surface-800-200;
}

@utility border-common {
	@apply border-b-[1px] border-surface-400-600;
}

@utility select {
	& option:focus:checked,
	& option:checked {
		@apply preset-filled-primary-50-950 dark:preset-filled-primary-950-50;
	}
	@apply bg-white dark:bg-surface-800;
}

@utility border-color {
	@apply border-surface-300-700;
}

@utility layout-cols-2 {
	@apply grid grid-cols-1 justify-items-stretch gap-2 lg:grid-cols-2;
}

@layer components {
	form {
		@apply rounded-sm;
	}
}

@layer utilities {
	.preset-glass-neutral {
		background: color-mix(in oklab, var(--color-surface-50-950) 30%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-50-950) 30%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-primary {
		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-secondary {
		background: color-mix(in oklab, var(--color-secondary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-secondary-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-tertiary {
		background: color-mix(in oklab, var(--color-tertiary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-tertiary-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-success {
		background: color-mix(in oklab, var(--color-success-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-success-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-warning {
		background: color-mix(in oklab, var(--color-warning-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-warning-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-error {
		background: color-mix(in oklab, var(--color-error-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-error-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-surface {
		background: color-mix(in oklab, var(--color-surface-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
}
