style.css

@import './style.base.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;
}
:root {
	& .yearn--button {
		@apply rounded-md;
		&[data-variant="filled"] {
			@apply focus-within:outline-neutral-900 outline-offset-2 outline;
		}
		&[data-variant="reverted"] {
			@apply text-neutral-900 bg-neutral-0 font-normal border border-transparent;
			&:disabled {@apply bg-neutral-200 opacity-40;}
			&:not(:disabled):not([aria-busy="true"]):hover {@apply bg-neutral-200;}

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

			&[aria-busy="true"] svg {
				@apply text-neutral-900;
			}
		}
		&[data-variant="light"] {
			@apply text-neutral-900 bg-neutral-300 font-normal border border-transparent;
			&:disabled {@apply bg-neutral-200 opacity-40;}
			&:not(:disabled):not([aria-busy="true"]):hover {@apply bg-neutral-200;}

			&[aria-busy="true"] svg {
				@apply text-neutral-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-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;
	}
}

[type='checkboxx'],
[type='checkboxx']:focus {
	@apply outline-none focus:outline-none focus:ring-0 active:ring-0;
	box-shadow: none !important;
}
.checkbox {
	@apply text-neutral-900 accent-neutral-900 rounded-sm;
}
.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-neutral-200 rounded-md;
	&.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;
	}
}
.box-700 {
	@apply bg-neutral-700 border border-neutral-600/30 rounded-md;
	&.hover {
		@apply transition-colors hover:bg-neutral-600/30;
	}
}
.box-900 {
	@apply bg-neutral-900 border border-neutral-700 rounded-md;
	&.hover {
		@apply transition-colors hover:bg-neutral-700;
	}
}


.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 aspect-video h-full w-full cursor-pointer flex-col items-start border border-neutral-300 p-4 transition-colors rounded-default hover:bg-neutral-900 hover:text-neutral-0 duration-[400ms] ;
}

/**************************************************************************************************
** 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-neutral-900 z-10 pr-2;
  }
  & > dd {
    @apply bg-neutral-900 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;
}