style.css

@import './style.base.css';
@import '@rainbow-me/rainbowkit/styles.css';
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

:root {
}

.font-mono {
	font-family: 'Source Code Pro', monospace !important;
}
@layer base {
	.max-w-4xl {
		@apply max-w-[888px] px-4;
	}

	.font-number {
		@apply font-mono tabular-nums;
	}

	.yearn--header {
		@apply !p-0 !h-14;
	}

	.yearn--listbox-menu-item {
		@apply hover:!bg-neutral-100/80;
	}

	.yearn--button {
		@apply rounded-md;
		&[data-variant='reverted'] {
			@apply text-primary-900 bg-primary-0 font-normal border border-transparent;
			&:disabled {
				@apply bg-primary-200 opacity-40;
			}
			&:not(:disabled):not([aria-busy='true']):hover {
				@apply bg-primary-200;
			}

			&[aria-busy='true'] svg {
				@apply text-primary-900;
			}
		}
		&[data-variant='reverted-alt'] {
			@apply text-primary-900 bg-primary-0 font-normal border border-transparent;
			&:disabled {
				@apply bg-primary-200 opacity-40;
			}
			&:not(:disabled):not([aria-busy='true']):hover {
				@apply bg-primary-200;
			}

			&[aria-busy='true'] svg {
				@apply text-primary-900;
			}
		}
	}
	.yearn--button-smaller {
		@apply !rounded-md;
	}

	/* 🔵 - Yearn Finance ******************************************************************************
** Table
** Fake table properties
***************************************************************************************************/
	.yearn--table-head-wrapper {
		@apply mb-2 hidden w-full grid-cols-9 px-6 md:grid;
	}
	.yearn--table-head-token-section {
		@apply col-span-3;
	}
	.yearn--table-head-data-section {
		@apply col-span-6 grid grid-cols-12 gap-x-7;
	}
	.yearn--table-head-label {
		@apply text-start text-sm text-neutral-400;
	}
	.yearn--table-head-label-wrapper {
		@apply col-span-1 flex flex-row items-center justify-start space-x-1;
		&[datatype='number'] {
			@apply justify-end;
			& > .yearn--table-head-label {
				@apply text-end;
			}
		}
	}
	.yearn--table-wrapper {
		@apply grid w-full grid-cols-1 border-t border-neutral-200 py-2 px-4 md:grid-cols-9 md:border-none md:px-6;
	}
	.yearn--table-token-section {
		@apply col-span-3 mb-2 flex flex-row items-center justify-between py-4 md:mb-0 md:py-0;
	}
	.yearn--table-token-section-item {
		@apply flex flex-row items-start md:items-center space-x-4 md:space-x-6;
	}
	.yearn--table-token-section-item-image {
		@apply h-8 min-h-[32px] w-8 min-w-[32px] md:flex md:h-10 md:w-10;
	}
	.yearn--table-data-section {
		@apply col-span-6 grid grid-cols-1 gap-x-0 md:grid-cols-12 gap-y-2 md:gap-y-0 mb-4 md:mb-0;
	}
	.yearn--table-data-section-item-label {
		@apply inline text-start text-neutral-500 md:hidden text-xs ml-1;
	}
	.yearn--table-data-section-item-value {
		@apply text-neutral-900;
	}
	.yearn--table-data-section-item {
		@apply col-span-1 flex h-auto flex-col justify-between pt-0 px-0 md:h-14 md:py-2;
		&[datatype='number'] {
			@apply md:justify-end font-number;
			& > .yearn--table-data-section-item-value {
				@apply font-number text-end;
			}
		}
	}
	.yearn--table-label {
		@apply inline text-start text-neutral-500 md:hidden;
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** Details and summary nice styles.
	***************************************************************************************************/
	details > summary {
		list-style: none;
	}
	details > summary::-webkit-details-marker {
		display: none;
	}
	details {
		& > summary {
			@apply px-4 md:px-6 py-6 md:py-8 cursor-pointer flex flex-row items-center justify-between;
		}
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** Loader
	** Custom style for the loader icon
	***************************************************************************************************/
	.loader {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #fff;
		box-shadow:
			16px 0 #fff,
			-16px 0 #fff;
		position: relative;
		animation: flash 1s ease-out infinite alternate;
	}

	@keyframes flash {
		0% {
			background-color: #fff2;
			box-shadow:
				12px 0 #fff2,
				-12px 0 #fff;
		}
		50% {
			background-color: #fff;
			box-shadow:
				12px 0 #fff2,
				-12px 0 #fff2;
		}
		100% {
			background-color: #fff2;
			box-shadow:
				12px 0 #fff,
				-12px 0 #fff2;
		}
	}
}

.loader-900 {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #000000;
	box-shadow:
		16px 0 #000000,
		-16px 0 #000000;
	position: relative;
	animation: flash 1s ease-out infinite alternate;
}

@keyframes flash {
	0% {
		background-color: #aaaaaa;
		box-shadow:
			12px 0 #aaaaaa,
			-12px 0 #000000;
	}
	50% {
		background-color: #000000;
		box-shadow:
			12px 0 #aaaaaa,
			-12px 0 #aaaaaa;
	}
	100% {
		background-color: #aaaaaa;
		box-shadow:
			12px 0 #000000,
			-12px 0 #aaaaaa;
	}
}

.yearn--toast-options {
	@apply text-center;
}

.checkbox {
	@apply text-primary-500 accent-primary-500 rounded-sm border-primary-500 focus:outline-primary-500 outline-none !ring-transparent indeterminate:border-primary-200 indeterminate:bg-primary-200 indeterminate:text-primary-200 indeterminate:accent-primary-200 indeterminate:focus:outline-primary-200 indeterminate:after:absolute indeterminate:after:ml-[0.2rem] indeterminate:after:mt-[6px] indeterminate:after:w-[0.5rem] indeterminate:after:border-[0.05rem] indeterminate:after:border-solid indeterminate:after:border-white indeterminate:focus:after:w-[0.5rem] indeterminate:focus:after:rounded-none indeterminate:focus:after:border-[0.125rem] indeterminate:focus:after:border-b-0 indeterminate:focus:after:border-l-0 indeterminate:focus:after:border-r-0;

	@apply focus:!outline-none focus:!ring-transparent;

	&[aria-busy='true'] {
		@apply border-neutral-300 bg-neutral-300 text-neutral-300 accent-neutral-300 rounded-sm focus:outline-neutral-300 relative after:animate-spin;
		background-image: none;
	}
	&[aria-busy='true']:after {
		height: 12px;
		width: 12px;
		position: absolute;
		left: 1px;
		top: 1px;
		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M415.136 355.749L415.133 355.754C405.65 372.24 411.246 393.373 427.754 402.867C444.239 412.349 465.369 406.755 474.865 390.251C496.879 352.28 509.5 308.05 509.5 261C509.5 118.219 393.781 2.5 251 2.5C231.919 2.5 216.5 17.9193 216.5 37C216.5 56.0807 231.919 71.5 251 71.5C355.619 71.5 440.5 156.381 440.5 261C440.5 295.547 431.223 327.917 415.136 355.749Z' fill='white' stroke='white' stroke-width='5' /%3e%3c/svg%3e");
	}

	&[aria-invalid='true'] {
		background-image: url("data:image/svg+xml,%3csvg height='1em' viewBox='0 0 384 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center;
		@apply border-red-200 bg-red-200 text-red-200 accent-red-200 focus:outline-red-200;
	}
}

.yearn--tab {
	@apply mx-5 flex h-full flex-col justify-center text-base cursor-pointer font-normal;
	&.selected {
		@apply cursor-default font-bold;
	}
}

.box-0 {
	@apply bg-neutral-0 border border-primary-200/60 rounded-md shadow-sm;
	&.hover {
		@apply transition-colors hover:bg-neutral-100;
	}
}
.box-50 {
	@apply bg-neutral-100/50 border border-neutral-200 rounded-md;
	&.hover {
		@apply transition-colors hover:bg-neutral-100;
	}
}
.box-100 {
	@apply bg-neutral-100 border border-neutral-200 rounded-md;
	&.hover {
		@apply transition-colors hover:bg-neutral-200;
	}
}
.box-200 {
	@apply bg-neutral-200 border border-neutral-200 rounded-md;
	&.hover {
		@apply transition-colors hover:bg-neutral-200;
	}
}

.tooltip {
	@apply relative cursor-help;
}

.tooltipLight {
	z-index: 100;
}

.tooltip .tooltipLight {
	@apply invisible inset-x-0 absolute z-50 opacity-0 transition-opacity flex justify-center items-center;
}

.tooltip:hover .tooltipLight {
	@apply visible opacity-100;
}

.tooltip .tooltiptext {
	@apply text-xs text-center invisible bg-neutral-0 text-neutral-900 absolute z-50 right-1 opacity-0 transition-opacity p-2;
	width: 16rem;
	top: 110%;
	margin-right: calc(-122px + 50%);
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}
.tooltip:hover .tooltiptext {
	@apply visible opacity-100;
}
.tooltip .tooltiptext::after {
	content: '';
	position: absolute;
	bottom: 98%;
	right: 50%;
	margin-right: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: hsl(var(--color-neutral-0)) transparent transparent transparent;
	transform: rotate(180deg);
}

.tooltip.top .tooltiptext {
	top: -105%;
	bottom: unset;
}
.tooltip.top .tooltiptext::after {
	top: 98%;
	transform: rotate(0deg);
}

.modal {
	@apply inline-block overflow-hidden relative z-50 w-full text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle md:mb-96 mx-auto md:max-w-4xl bg-transparent;
}
.modal-overlay {
	@apply fixed inset-0 z-10 bg-neutral-900/40 transition-opacity backdrop-blur-[1px];
}
.detailsSweep {
	@apply border-b-0;
	&:last-of-type {
		@apply border-b;
	}
	&[open] {
		@apply bg-neutral-100;
	}
}

.detailsMigrate {
	@apply bg-neutral-0 flex w-full flex-col justify-center border-t border-b-0 border-neutral-200 transition-colors;
}
.detailsTokenList[open] {
	@apply bg-neutral-0;
}

.featureGrid {
	width: 100%;
	grid-auto-columns: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-template-columns: repeat(18, minmax(0, 1fr));
	grid-template-rows: auto auto;
}

/**************************************************************************************************
** AppBox is the style used to make the nices animations on the home page feel nice and smooth
** A custom overwrite is required for dark/light mode
**************************************************************************************************/
.appBox {
	--x-px: calc(var(--x) * 1px);
	--y-px: calc(var(--y) * 1px);
	--opacity: var(--opacity);
	--color: hsl(var(--color-neutral-100));
	@apply relative flex aspect-video h-full w-full cursor-pointer flex-col items-start border border-neutral-300/50 p-6 shadow shadow-transparent transition-all duration-[400ms] rounded-md;

	&:before,
	&:after {
		@apply pointer-events-none block absolute inset-[0px] z-[-1];
		content: '';
		z-index: -1;
		opacity: var(--opacity);
		background: radial-gradient(1200px circle at var(--x-px) var(--y-px), var(--color), transparent 40%);
		transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	&:before {
		@apply pointer-events-none z-[-1];
	}
}

/**************************************************************************************************
** The WordWrapper css is used for the animation with the text in the header. This animation require
** letters to be splitted and a custom css is required to make it work.
***************************************************************************************************/
.wordWrapper {
	display: inline-block;
	vertical-align: top;
	margin: 0;
}
.word {
	@apply absolute text-neutral-900 font-bold text-5xl md:text-8xl uppercase text-center flex justify-center items-center w-[300px] md:w-[600px];
	opacity: 0;
}
.wordCenter {
	@apply absolute text-center flex justify-center items-center;
	opacity: 0;
}
.wordLeft {
	@apply absolute text-left flex justify-start items-center;
	opacity: 0;
}
.letter {
	display: inline-block;
	position: relative;
	float: left;
	transform: translateZ(25px);
	transform-origin: 50% 50% 25px;
}
.letter.out {
	transform: rotateX(90deg);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
	transform: rotateX(-90deg);
}
.letter.in {
	transform: rotateX(0deg);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.patternSVG {
	@apply absolute inset-0 -z-10 h-full w-full stroke-neutral-500/10 [mask-image:radial-gradient(100%_100%_at_top_right,black,transparent)];
}
.patternSVGSquares {
	@apply overflow-visible fill-neutral-200/20;
}

.groupHoverText {
	&:hover .noHoverContent {
		@apply opacity-0;
	}
	&:hover .withHoverContent {
		@apply opacity-100;
	}
}

.approvalWizardDivider {
	& > *:last-child {
		@apply border-b-0 !mb-0 !pb-0;
	}
}

.bg-black {
	background: linear-gradient(84.14deg, #1e243e, #1b2037);
}

.smol--input-wrapper {
	@apply flex h-10 w-full items-center rounded-md border border-primary-200/60 bg-neutral-0 p-2 transition-colors;

	&:has(input:focus) {
		@apply border-primary-400;
	}
}
.smol--input {
	@apply w-full overflow-x-scroll border-none bg-transparent px-0 py-4 text-sm outline-none scrollbar-none;
}

select.smol--input {
	@apply pr-7 truncate;
}