<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.css">

<script defer src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
	  AfostoInstantSearchWidget.init('movies-demo');
  });
</script>



<div class="container">
	<button data-af-instant-search>Toggle widget</button>
</div>

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

button[data-af-instant-search] {
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.af-is-widget__dialog {
	--af-is-gray-130: #f9fafc;
    --af-is-gray-120: #f5f7fa;
    --af-is-gray-110: #ecf0f4;
    --af-is-gray-100: #e4e9ef;
    --af-is-gray-90: #d7dee7;
    --af-is-gray-80: #b2c0ce;
    --af-is-gray-70: #94a6b8;
    --af-is-gray-60: #798fa2;
    --af-is-gray-50: #607a8b;
    --af-is-gray-40: #4a6575;
    --af-is-gray-30: #37515f;
    --af-is-gray-20: #283d4a;
    --af-is-gray-10: #182a33;
    --af-is-primary-900: #b71c1c;
    --af-is-primary-800: #c62828;
    --af-is-primary-700: #d32f2f;
    --af-is-primary-600: #e53935;
    --af-is-primary-500: #f44336;
    --af-is-primary-400: #ef5350;
    --af-is-primary-300: #e57373;
    --af-is-primary-200: #ef9a9a;
    --af-is-primary-100: #ffcdd2;
    --af-is-common-white: #182a33;
	
	.af-is-widget__layout {
		grid-template-areas:
				'⚙️ 🔎 🔎'			
				'⚙️ 📏 🔢'
				'⚙️ 👕 👕';
		
		@media (max-width: 599px) {
			grid-template-areas:
				'🔎 🔎'
				'📏 🔢'
				'👕 👕';
		}
	}
}