/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	*,
	::before,
	::after {
		@apply dark:border-gray-600;
	}

	@font-face {
		font-family: 'Inter';
		src: url('/Inter-Variable.ttf');
		font-weight: 100 900;
		font-display: swap;
	}

	.prose-xs ul {
		margin-top: 0.5rem;
		list-style-type: '- ';
		padding-left: 1.5rem;
	}

	.prose ul {
		margin-top: 1.5rem;
		list-style-type: '- ';
		padding-left: 3rem;
	}
	.splitpanes--vertical > .splitpanes__pane {
		transition: none !important;
	}

	.splitpanes--horizontal > .splitpanes__pane {
		transition: none !important;
	}

	.monaco-workbench > .notifications-toasts.visible {
		display: none !important;
	}

	.monaco-editor .suggest-widget {
		z-index: 10001 !important;
	}

	.nowrap pre code.hljs {
		whitespace: normal !important;
	}

	.z5000 {
		z-index: 5000 !important;
	}

	.foo {
		color: red !important;
	}
	.autocomplete-list-item-create {
		@apply !text-primary-inverse !bg-surface-inverse;
	}

	.autocomplete-list-item {
		@apply !text-primary !bg-surface text-xs;
	}

	.autocomplete-list-item.selected {
		@apply !text-primary-inverse !bg-surface-inverse;
	}

	.autocomplete-list-item.selected.confirmed {
		@apply !text-primary-inverse !bg-surface-inverse;
	}

	.autocomplete-list {
		@apply !bg-surface;
	}
	pre code.hljs {
		overflow: visible !important;
	}

	svelte-virtual-list-row {
		overflow: visible !important;
	}

	svelte-virtual-list-contents > * + * {
		border-top-width: 1px !important;
		border-bottom-width: 0px !important;
	}

	.monaco-editor textarea:focus {
		box-shadow: none !important;
	}

	.Template-editor span.mtk20 {
		color: black !important;
	}

	::-webkit-scrollbar {
		width: 9px;
		height: 9px;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
	::-webkit-scrollbar-thumb {
		background-color: rgba(155, 155, 155, 0.5);
		border: transparent;
	}
}

@layer components {
	/* Flow graph viewer -> Svelvet library internal class overwrite */
	.Node {
		display: flex !important;
	}
}
@layer utilities {
	@variants responsive {
		/* Hide scrollbar for Chrome, Safari and Opera */
		.no-scrollbar::-webkit-scrollbar {
			display: none;
		}

		/* Hide scrollbar for IE, Edge and Firefox */
		.no-scrollbar {
			-ms-overflow-style: none; /* IE and Edge */
			scrollbar-width: none; /* Firefox */
		}
	}
}

.grid-cell-centered {
	display: flex;
	align-items: center;
	justify-content: center;
}
.grid-cell-centered .svelte-select {
	height: 32px !important;
}

.grid-cell-centered .selected-item {
	margin-top: -4px;
}

.ol-overlaycontainer-stopevent {
	@apply flex flex-col justify-start items-end;
}
.ol-control button {
	@apply w-7 h-7 center-center bg-surface border text-secondary 
	rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
}

/* Components */
.component-wrapper {
	@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
}

.app-editor-input {
	@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
	@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
}
