style.css

@import '@yearn-finance/web-lib/dist/style.next.css';

:root {
	--default-rounded: 0rem;
	margin-left: 0;
}


* {@apply font-aeonik;}
body {@apply text-neutral-900;}
#app {
	@apply scroll-mt-28;
}

.header-nav-item {
	@apply flex flex-col items-center justify-between cursor-pointer px-4;
	&[aria-selected="true"] {
		& > p {
			@apply pb-5 text-base text-primary font-bold;
		}
		& > div {
			@apply h-0.5 w-full bg-primary;
		}
	}
	&[aria-selected="false"] {
		& > p {
			@apply pb-5 text-base text-neutral-900;
		}
		& > div {
			@apply h-0.5 w-full bg-transparent transition-colors;
		}
		&:hover > p {
			@apply text-primary font-bold;
		}
	}
}


.mobile-nav-item {
	@apply flex flex-col items-start justify-between rounded bg-good-ol-grey-100;
	& > p {
		@apply p-2 text-base font-bold text-neutral-900;
	}
}

.mobile-nav-item {
	@apply flex flex-col items-start justify-between cursor-pointer px-4;
	&[aria-selected="true"] {
		& > p {
			@apply p-2 text-base text-primary;
		}
		& > div {
			@apply h-0.5 w-full bg-primary;
		}
	}
	&[aria-selected="false"] {
		& > p {
			@apply pb-2 text-base text-neutral-900;
		}
		& > div {
			@apply h-0.5 w-full bg-transparent transition-colors;
		}
		&:hover > div {
			@apply bg-neutral-400;
		}
	}

}

.hover-fix::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}