@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.woff2) format("woff2");
}

/* tippy js */
:root {
	--bn-tippy-border-color: #242629;
	--bn-tippy-bg-color: #1a1b1e;
}

.tippy-box[data-animation="fade"][data-state="hidden"] {
	opacity: 0;
}
[data-tippy-root] {
	max-width: calc(100vw - 10px);
}
.tippy-box {
	position: relative;
	line-height: 1.4;
	white-space: normal;
	outline: 0;
	transition-property: transform, visibility, opacity;
	background-color: var(--bn-tippy-bg-color);
	color: white;
	border: 1px solid var(--bn-tippy-border-color);
	font-weight: 500;
	font-size: 14px;
	border-radius: 6px;
	font-family: "Bricolage", system-ui, sans-serif;
}
.tippy-box[data-placement^="top"] > .tippy-arrow {
	bottom: 0;
}
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
	bottom: -7px;
	left: 0;
	border-width: 8px 8px 0;
	border-top-color: var(--bn-tippy-border-color);
	transform-origin: center top;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow {
	top: 0;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
	top: -7px;
	left: 0;
	border-width: 0 8px 8px;
	border-bottom-color: var(--bn-tippy-border-color);
	transform-origin: center bottom;
}
.tippy-box[data-placement^="left"] > .tippy-arrow {
	right: 0;
}
.tippy-box[data-placement^="left"] > .tippy-arrow:before {
	border-width: 8px 0 8px 8px;
	border-left-color: var(--bn-tippy-border-color);
	right: -7px;
	transform-origin: center left;
}
.tippy-box[data-placement^="right"] > .tippy-arrow {
	left: 0;
}
.tippy-box[data-placement^="right"] > .tippy-arrow:before {
	left: -7px;
	border-width: 8px 8px 8px 0;
	border-right-color: var(--bn-tippy-border-color);
	transform-origin: center right;
}
.tippy-box[data-inertia][data-state="visible"] {
	transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}
.tippy-arrow {
	width: 16px;
	height: 16px;
	color: var(--bn-tippy-bg-color);
}
.tippy-arrow:before {
	content: "";
	position: absolute;
	border-color: transparent;
	border-style: solid;
}
.tippy-content {
	position: relative;
	z-index: 1;
	background-color: var(--bn-tippy-bg-color);
	padding: 6px 8px;
	border-radius: 6px;
}
