style.css

/* This will load Tailwindcss + all the overwrite from Yearn lib */
@import '@yearn-finance/web-lib/dist/style.css';
@font-face {
    font-family: 'Menlo Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Menlo Regular'), url('/Menlo-Regular.woff') format('woff');
}

/* 🔵 - Yearn Finance ******************************************************
** Shorthand for some group of style used across the application
**************************************************************************/
.component--switchCard-wrapper {
	@apply flex flex-row justify-between p-2 space-x-2 w-full cursor-pointer md:p-0 md:space-x-6 md:w-max
}
.image-align-middle > img {
	object-position: 0 70%;
}


:root body[data-theme="light"],
:root body[data-theme="dark"] {
	--color-red-900: 3 73% 47%
}

:root body[data-theme="light"] {
	& .yearn--card {
		@apply border border-transparent !shadow-none;
	}
	& .label {
		@apply border-transparent;
	}
	& .project--kbar-wrapper {
		@apply rounded-lg opacity-60 bg-neutral-300/70 hover:bg-neutral-300 transition-colors;
	}
}

:root body[data-theme="dark"] {
	--color-neutral-0: 225 50% 27%;
	--color-neutral-100: 225 51% 23%;
	--color-neutral-200: 225 47% 21%;
	--color-neutral-300: 219 60% 16%;
	--color-neutral-400: 0 0% 100%;
	--color-neutral-500: 230 27% 87%;
	--color-neutral-700: 0 0% 100%;

	--color-primary-100: 226 50% 18%;
	--color-primary-200: 225 47% 41%;

	@apply bg-neutral-200;
	background-image: linear-gradient(180deg,transparent 0,#293e81 80vh);

	& .yearn--button[data-variant="light"] {
		@apply text-neutral-900 bg-primary-200 hover:bg-primary-100;
		&:not(:disabled):not([aria-busy="true"]):hover {@apply bg-primary-100;}
	}

	& .yearn--card {
		@apply border border-neutral-200 !shadow-none;
	}

	& .yearn--searchBox-wrapper {
		--searchBox-text-color: hsl(var(--color-neutral-500));
		--searchBox-border-color: hsl(var(--color-neutral-300));
		--searchBox-bg-color: hsl(var(--color-neutral-0));
		--searchBox-border-width: 1px;
	}
	& .yearn--searchBox {
		@apply focus-within:border-neutral-200;
	}

	& .yearn--banner {
		--banner-bg-color: hsl(var(--color-primary-100));
		--banner-text-color: hsl(var(--color-neutral-700));
		--banner-border-color: hsl(var(--color-neutral-200));
		--banner-border-width: 2px;
	}

	& .yearn--elementWithActions {
		--elementWithActions-text-color: hsl(var(--color-neutral-700));
		--elementWithActions-action-color: hsl(var(--color-primary-500));
		--elementWithActions-action-color-hover: hsl(var(--color-primary-600));
	}

	& .project--kbar-wrapper {
		@apply rounded-lg opacity-60 bg-neutral-100/70 hover:bg-neutral-100 transition-colors;
	}
}

.yearn--modal {
	@apply md:max-w-4xl;
}

.prism-code {
	@apply p-4 rounded-lg my-4 overflow-x-scroll;
}
.token {
	@apply text-xs;
	font-family: 'Menlo Regular', monospace;
}



.yearn--select-reset {
	@apply bg-transparent p-0 border-none;
	&:focus {
		outline: none;
		box-shadow: none;
	}
}
.yearn--select-no-arrow {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
}
.yearn--select-no-arrow::-ms-expand {
    display: none;
}

.yearn--input {
	@apply rounded-default w-full border-0 border-transparent bg-neutral-100 text-neutral-900 focus:ring-0 transition-colors pr-10 h-10;
	&[data-focused='true'] {
		@apply bg-neutral-200 border-primary-500 transition-colors;
		& ~ .yearn--input-caption {
			@apply text-primary-500;
		}
	}
	&[aria-invalid="true"] {
		@apply border-red-900;
	}
	& > input {
		@apply w-full border-0 bg-transparent text-neutral-900 focus:ring-0 h-10 p-2;
	}

	& ~ .yearn--input-caption {
		@apply mt-1 pl-2 text-xs transition-colors text-neutral-900
	}
}