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

@layer base {
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
	}

	.bn-swap-wrap {
		-webkit-font-smoothing: antialiased;

		/* theme colors */
		--bn-bgLayer1: 24 25 27; /* #18191B */
		--bn-bgLayer2: 31 32 35; /* #1F2023 */
		--bn-bgLayer3: 36 38 41; /* #242629 */
		--bn-bgFail: 255 152 117; /* #FF9875 */
		--bn-bgSuccess: 138 232 182; /* #8AE8B6 */
		--bn-textPrimary: 255 255 255; /*#FFFFFF */
		--bn-textSecondary: 167 169 171; /*#A7A9AB*/
		--bn-textButton: 0 0 0; /* #000000 */
		--bn-textFail: 255 152 117; /* #FF9875 */
		--bn-textSuccess: 138 232 182; /* #8AE8B6 */
		--bn-themePrimary: 253 184 80; /*#FDB850*/
		--bn-borderPrimary: 36 38 41; /* #242629 */
		--bn-icon: 249 250 251; /*#F9FAFB*/
		--bn-accent: 255 214 152; /*#FFD698*/
		--bn-accentBg: 38 36 32; /*#262420*/
		--bn-accent2: 174 159 249; /*#AE9FF9*/
		--bn-accentBg2: 35 35 46; /*#23232E*/
		--bn-font-primary: "Bricolage", system-ui, sans-serif;
		--bn-font-secondary: "Aeonik", system-ui, sans-serif;
	}

	.bn-swap-wrap ::-webkit-outer-spin-button,
	.bn-swap-wrap input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.bn-no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Firefox */
	.bn-swap-wrap [type="number"] {
		-moz-appearance: textfield;
	}

	.bn-swap-wrap input,
	.bn-swap-wrap button {
		outline: none;
	}

	.bn-swap-wrap * {
		box-sizing: border-box;
		font-family: var(--bn-font-primary);
	}

	.bn-aeonik-font {
		font-family: var(--bn-font-secondary);
	}

	.bn-aeonik-font * {
		font-family: var(--bn-font-secondary);
	}
	.bn-swap-wrap .material-symbols-rounded {
		font-family: "Material Symbols Rounded", sans-serif;
		font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
	}

	/* @note: scrollbar is not customizable */
	/* Target the scrollbar itself */
	.bn-swap-wrap ::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		background-color: #18191b;
	}

	/* Style the track (the background) */
	.bn-swap-wrap ::-webkit-scrollbar-track {
		background: #18191b;
	}

	/* Style the thumb (the draggable handle) */
	.bn-swap-wrap ::-webkit-scrollbar-thumb {
		background-color: #242629;
		width: 4px;
		border-radius: 4px;
	}
}

@font-face {
	font-family: "Material Symbols Rounded";
	font-style: normal;
	font-weight: 400;
	src: url(../assets/fonts/material-icons-filled.woff2) format("woff2");
}

@layer utilities {
	input:-webkit-autofill {
		box-shadow: 0 0 0px 1000px transparent inset !important;
		-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
		-webkit-text-fill-color: white !important;
		color: white !important;
		transition: background-color 9999s ease-in-out 0s !important;
	}
}
