style.base.css

@tailwind base;

:root {
	--color-primary: 220 95% 50%;
	--color-neutral-0: 0 0% 100%;
	--color-neutral-50: 0 0% 98%;
	--color-neutral-100: 0 0% 96%;
	--color-neutral-200: 0 0% 92%;
	--color-neutral-300: 0 0% 88%;
	--color-neutral-400: 0 0% 62%;
	--color-neutral-500: 0 0% 50%;
	--color-neutral-600: 0 0% 36%;
	--color-neutral-700: 229 34% 24%;
	--color-neutral-800: 229 34% 16%;
	--color-neutral-900: 229 34% 13%;

	--color-yellow-900: 32 100% 45%;
	--color-yellow-300: 32 100% 95%;
	--color-yellow-200: 32 100% 90%;
	--color-error-900: 328 100% 45%;
	--color-error-300: 328 100% 95%;
	--color-error-200: 328 100% 90%;
	--color-red-900: 0 100% 45%;
	--color-red-300: 0 100% 95%;
	--color-red-200: 0 100% 90%;

	--default-rounded: 6px;
}

:root.dark {
	--color-neutral-900: 229 34% 100%;
	--color-neutral-800: 229 34% 96%;
	--color-neutral-600: 229 34% 90%;
	--color-neutral-500: 229 34% 90%;
	--color-neutral-400: 229 34% 48%;
	--color-neutral-300: 229 34% 36%;
	--color-neutral-200: 229 34% 24%;
	--color-neutral-100: 229 34% 16%;
	--color-neutral-50: 229 34% 8%;
	--color-neutral-0: 229 34% 13%;
}


body {@apply text-neutral-900;}
h1 {@apply text-xl font-bold text-neutral-900;}
h4 {@apply text-lg font-bold text-neutral-700;}
#__next {@apply w-full h-full}

/* 🔵 - Yearn Finance ******************************************************
** Overwritting the defaults to match our needs
**************************************************************************/
* {@apply scroll-smooth font-sans}
input::placeholder {@apply text-neutral-400 not-italic}
textarea::placeholder {@apply text-neutral-400 not-italic}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
	transition: background-color 5000s ease-in-out 0s;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type=number] {
	-moz-appearance: textfield;
}
label[aria-invalid="true"] {
	@apply text-neutral-500 transition-colors;
	& > form > div {
		@apply border-[#FE0000] focus-within:border-[#FE0000] text-[#FE0000] focus-within:text-[#FE0000];
	}
	& > p {
		@apply text-[#FF0000];
	}
}

:focus {
    outline-width: 0px;
    outline-offset: 0px;
	outline: none;
    outline-color: transparent;
}

/* 🔵 - Yearn Finance ******************************************************
** First, we are declaring the Yearn's specific class for the components.
** We need to declare them first in order to work with css inheritence
** correctly. Aka theses class should be possible to overwrite by adding an
** extra tailwind class
**************************************************************************/
.flex-center {@apply flex justify-center items-center;}
.rounded-default {border-radius: var(--default-rounded);}
.rounded-b-default {
	border-bottom-left-radius: var(--default-rounded);
	border-bottom-right-radius: var(--default-rounded);
}
.rounded-t-default {
	border-top-left-radius: var(--default-rounded);
	border-top-right-radius: var(--default-rounded);
}
.rounded-l-default {
	border-top-left-radius: var(--default-rounded);
	border-bottom-left-radius: var(--default-rounded);
}
.rounded-r-default {
	border-top-right-radius: var(--default-rounded);
	border-bottom-right-radius: var(--default-rounded);
}

/* -- Button.tsx ------------------------------------------------------- */
.yearn--button {
	@apply cursor-pointer px-4 flex justify-center items-center h-10 text-sm transition-all relative;

	border-radius: var(--default-rounded);

	&[data-variant="filled"] {
		@apply text-neutral-0 bg-neutral-900 font-normal border border-transparent;
		&:disabled {@apply bg-neutral-700 opacity-40;}
		&:not(:disabled):not([aria-busy="true"]):hover {@apply bg-neutral-800;}
	}
	&[data-variant="light"] {
		@apply text-neutral-900 bg-neutral-100 border border-transparent;
		&:disabled {@apply opacity-40;}
		&:not(:disabled):not([aria-busy="true"]):hover {@apply bg-neutral-200;}
	}
	&[data-variant="outlined"] {
		@apply text-neutral-900 bg-transparent border border-neutral-900;
		&:disabled {@apply opacity-40;}
		&:not(:disabled):not([aria-busy="true"]):hover {@apply bg-neutral-900 text-neutral-0;}
	}
	&[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;
		}
	}
	&[aria-busy="true"] {
		@apply cursor-wait;
		color: transparent !important;
	}
	&:disabled {@apply cursor-not-allowed;}
}

/* 🔵 - Yearn Finance ******************************************************
** Then, we import the tailwind class. They will be able to overwrite all
** the previous classes, not the next ones directly.
**************************************************************************/
@tailwind components;
@tailwind utilities;

/* 🔵 - Yearn Finance ******************************************************
** Shorthand for some group of style used across the application
***************************************************************************/
.flex-row-center {@apply flex flex-row items-center;}
.flex-row-start {@apply flex flex-row items-start;}
.flex-col-start {@apply flex flex-col items-start;}
.flex-col-full {@apply flex flex-col w-full h-full;}
.max-w-6xl {@apply max-w-[1232px] px-4;}

/* 🔵 - Yearn Finance ******************************************************
** NsProgress is used to display the loading indicator. All of theses
** styles are required to make it visible
**************************************************************************/
.nprogress-custom-parent {@apply overflow-hidden relative}
.nprogress-custom-parent #nprogress .spinner {@apply absolute}
.nprogress-custom-parent #nprogress .bar {@apply absolute}
#nprogress {@apply pointer-events-none}
#nprogress .bar {@apply bg-neutral-900 fixed top-0 left-0 w-full h-1 z-[1031]}
#nprogress .spinner {@apply block fixed z-[1031] top-4 right-4}
#nprogress .spinner-icon {@apply hidden}

/* 🔵 - Yearn Finance ******************************************************
** Some accessibilities fixes
**************************************************************************/
.scrollbar-none::-webkit-scrollbar {display: none;}
.scrollbar-none {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.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 Finance ******************************************************
** Some custom css for the components
**************************************************************************/
.img-gradient::after {
	content: '';
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	@apply absolute inset-0 w-full h-full;
}

/* 🔵 - Yearn Finance ******************************************************
** Header an navbar
**************************************************************************/
.yearn--header {
	@apply inset-x-0 top-0 z-50 mb-5 flex h-20 w-full max-w-[1200px] flex-row items-center justify-between p-4 text-xs sm:text-sm md:inset-x-auto md:mb-0 md:px-0 md:text-base;
}
.yearn--nav {
	@apply hidden w-1/3 flex-row items-center space-x-3 md:flex md:space-x-6;
}
.yearn--header-nav-item {
	@apply relative cursor-pointer transition-colors text-neutral-500 hover:text-neutral-900 font-normal text-sm;

	&.active {
		@apply text-neutral-900 font-bold;
	}
}

/* 🔵 - Yearn Finance ******************************************************
** Dropdown menu and listbox
**************************************************************************/
.yearn--dropdown-menu {
	--dropdown-bg-color: hsl(var(--color-neutral-100));
	--dropdown-bg-color-active: hsl(var(--color-neutral-600));
	--dropdown-border-width: 0px;
	--dropdown-border-color: transparent;

	@apply flex overflow-y-auto absolute left-0 flex-col mt-1 w-full min-w-fit max-h-60 scrollbar-none text-neutral-400 border border-neutral-300 bg-neutral-100;
}
.yearn--dropdown-menu-item {
	@apply w-full flex flex-row items-center cursor-pointer py-2 pr-4 pl-3 transition-colors;
	&[data-active='true'] {
		@apply bg-neutral-0/40;
	}
}
.yearn--listbox-menu {
	@apply flex overflow-y-auto absolute left-0 flex-col mt-1 w-full min-w-[148px] max-h-52 scrollbar-none text-neutral-900 bg-neutral-0;
}
.yearn--listbox-menu-item {
	@apply w-full flex flex-row items-center cursor-pointer py-2 pr-4 pl-3 transition-colors;
	&[data-active='true'] {
		@apply bg-neutral-0/40;
	}
}

.yearn--modal-wrapper {
	@apply flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0;
}
.yearn--modal-overlay {
	@apply fixed inset-0 z-10 bg-neutral-900/60 transition-opacity;
}
:root.dark {
	& .yearn--modal-overlay {
		@apply bg-neutral-100/90;
	}
}
.yearn--modal {
	@apply inline-block overflow-hidden relative z-50 w-full text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle md:mb-96 bg-neutral-0;

	border-radius: var(--default-rounded);
}
.yearn--modalLogin-wrapper {
}
.yearn--modalLogin-card {
	@apply flex flex-col justify-center items-center p-6 text-center transition-colors cursor-pointer bg-neutral-0 hover:bg-neutral-100;

	border-radius: var(--default-rounded);
	& > div > svg {@apply w-12 h-12;}
	& > b {@apply mt-2 text-lg text-neutral-700;}
	& > p {@apply text-neutral-500;}
}
.yearn--modalLogin {
	@apply grid grid-cols-2;
}

/* 🔵 - Yearn Finance ******************************************************
** Misc
**************************************************************************/
.yearn--button-smaller {
	@apply h-8 text-xs py-2 w-16 px-2;
}
.yearn--modalMobileMenu-childrenWrapper > a {
	&:last-child > .mobile-nav-item {
		@apply border-b-0;
	}
}
.yearn--sort-chevron {
	@apply h-4 w-4 min-w-[16px] cursor-pointer text-neutral-500;
}
.yearn--sort-chevron--off {
	@apply h-4 w-4 min-w-[16px] cursor-pointer transition-colors text-neutral-300 group-hover:text-neutral-500;
}

:root.dark {
	& .yearn--sort-chevron--off {
		@apply text-neutral-200;
	}
}

.mobile-nav-item {
	@apply flex flex-col items-start justify-between rounded bg-neutral-100;
	& > p {
		@apply p-2 text-base font-bold text-neutral-900;
	}
}
.mobile-nav-item {
	@apply rounded-none border-b border-neutral-300 bg-neutral-100/60;
}

.tab {
	@apply font-normal text-neutral-600 transition-colors hover:text-neutral-900 cursor-pointer border-b-2 border-transparent pb-4 z-20;
	&[aria-selected='true'] {
		@apply font-bold text-neutral-900 border-neutral-900;
	}
}
.hover-fix::before {
	display: block;
	content: attr(title);
	font-weight: bold;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}


.yearn--toast-options {
	@apply !w-screen text-sm text-neutral-700 !px-4 !rounded-none !shadow-none !py-2 !max-w-full;
}

.yearn--toast-button {
	@apply text-xs px-3 py-1 text-[#0657F9] bg-white;
}


.yearn--shadow {
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}

:root.dark {
	& .yearn--shadow {
		@apply border-solid border border-neutral-200;
	}
}

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

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: none;
}


/* -- ModalMobileMenu.tsx ---------------------------------------------------- */
.yearn--modalMobileMenu-content {
	@apply relative flex w-full flex-col items-center justify-center space-y-1 pt-4;
}
.yearn--modalMobileMenu-title {
	@apply text-center text-xl font-bold text-neutral-700;
}
.yearn--modalMobileMenu-networkIndicator {
	@apply text-sm text-neutral-500;
	& > span {
		@apply flex flex-row items-center;
	}
}
.yearn--modalMobileMenu-select {
	@apply rounded-default relative ml-1 flex flex-row items-center bg-neutral-500/10 py-1 pl-2 text-neutral-500;
}
.yearn--modalMobileMenu-walletCard {
	@apply rounded-default flex cursor-pointer flex-col items-center justify-center bg-neutral-100 py-4 px-2 text-center transition-colors;
}
.yearn--modalMobileMenu-childrenWrapper {
	@apply mb-4 space-y-2 px-2;
}
.yearn--modalMobileMenu-separatorWrapper {
	@apply w-full px-2;
}
.yearn--modalMobileMenu-separator {
	@apply mx-auto mt-2 mb-4 h-[2px] w-full items-center justify-center bg-neutral-500/20;
}
.yearn--modalMobileMenu-chevron {
	@apply absolute right-2;
	& > svg {
		@apply ml-1 h-3 w-3;
	}
}
.yearn--modalMobileMenu-logout {
	@apply absolute top-4 right-4;
	& > svg {
		@apply h-6 w-6 rounded-full bg-neutral-200 p-1.5 text-neutral-500;
	}
}