style.css

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

:root {
	@apply bg-primary-50;
}
.font-mono {
	font-family: 'Source Code Pro', monospace !important;
}
@layer base {
	.max-w-4xl {
		@apply max-w-[888px] px-4;
	}
	.max-w-5xl {
		@apply max-w-[992px] 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-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-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;
	}
}

.checkbox {
	@apply text-primary-600 accent-primary-600 rounded-sm border-primary-600 focus:outline-primary-600 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-primary-100;
	}
}
.box-100 {
	@apply bg-primary-50/40 border border-primary-100/60 rounded-md;
	&.hover {
		@apply transition-colors hover:bg-primary-100;
	}
}

.tooltip {
	@apply relative cursor-help;
}
.tooltip .tooltiptext,
.tooltip .tooltiptextsmall {
	@apply text-xs text-center invisible bg-neutral-0 text-neutral-900 absolute z-50 right-1 opacity-0 transition-opacity p-2 rounded;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}
.tooltip .tooltipLight {
	@apply invisible absolute z-50 opacity-0 transition-opacity flex justify-center items-center;
}
.tooltiptext {
	top: 110%;
	width: 16rem;
	margin-right: calc(-122px + 50%);
}
.tooltiptextsmall {
	top: 150%;
	width: 10rem;
	margin-right: calc(-5rem + 4px);
}
.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptextsmall,
.tooltip:hover .tooltipLight {
	@apply visible opacity-100;
}
.tooltip .tooltiptext::after,
.tooltip .tooltiptextsmall::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,
.tooltip.top .tooltiptextsmall {
	top: -105%;
	bottom: unset;
}
.tooltip.top .tooltiptext::after,
.tooltip.top .tooltiptextsmall::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];
}
.detailsMigrate {
	@apply bg-neutral-0 flex w-full flex-col justify-center border-t border-b-0 border-neutral-200 transition-colors;
}

/**************************************************************************************************
** 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 {
	@apply relative flex h-full w-full cursor-pointer flex-col items-start border border-primary-200 p-4 transition-colors rounded-md bg-primary-0 hover:bg-primary-500 hover:text-primary-0;
}

/**************************************************************************************************
** 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.
***************************************************************************************************/
.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);
}

.container {
	@apply flex flex-row justify-between items-center space-x-10 relative max-w-xs;
	& > dt {
		@apply bg-primary-600 z-10 pr-2;
	}
	& > dd {
		@apply bg-primary-600 z-10 pl-2 font-number whitespace-nowrap;
	}
}
.filler {
	@apply w-3/4 border-b-2 border-dashed border-neutral-0 absolute inset-0 h-full;
	top: calc(-50% + 1px);
}

.svg-fit {
	& > svg {
		@apply w-full h-full;
	}
}

.addr > span {
	& > span {
		@apply break-normal;
	}
	@apply break-all;
}

.scrollbar-show::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 6px;
}
.scrollbar-show::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}