@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#root {
	height: 100%;
	width: 100%;
	position: relative;
}

/* Define some colors as CSS variables for use outside of the Tailwind class context: */
:root {
	--success-light: theme('colors.success.light');
	--success-dark: theme('colors.success.dark');
	--warning-light: theme('colors.warning.light');
	--warning-dark: theme('colors.warning.dark');
	--issue-light: theme('colors.issue.light');
	--issue-dark: theme('colors.issue.dark');
	--steel: theme('colors.steel.DEFAULT');
	--steel-dark: theme('colors.steel.dark');
}

@layer base {
	body {
		@apply antialiased;
		@apply font-sans text-offblack;
	}
}

@layer components {
	.home-page-grid-container-top {
		@apply grid grid-cols-1 gap-4;
		grid-template-areas:
			'network'
			'epoch'
			'transactions'
			'accounts';
	}
	.home-page-grid-container-top.with-token {
		grid-template-areas:
			'network'
			'epoch'
			'token'
			'transactions'
			'accounts';
	}

	@screen sm {
		.home-page-grid-container-top {
			@apply grid-cols-2;
			grid-template-areas:
				'network epoch'
				'transactions transactions'
				'accounts accounts';
		}

		.home-page-grid-container-top.with-token {
			grid-template-areas:
				'network epoch'
				'network token'
				'transactions transactions'
				'accounts accounts';
		}
	}

	@screen md {
		.home-page-grid-container-top {
			@apply grid-cols-2;
			grid-template-areas:
				'network epoch'
				'transactions accounts';
		}

		.home-page-grid-container-top.with-token {
			grid-template-areas:
				'network epoch'
				'network token'
				'transactions accounts';
		}
	}

	@screen xl {
		.home-page-grid-container-top {
			@apply grid-cols-[315px,1fr,1fr];
			grid-template-areas:
				'network transactions accounts'
				'epoch transactions accounts';
		}

		.home-page-grid-container-top.with-token {
			grid-template-areas:
				'network transactions accounts'
				'epoch   transactions accounts'
				'token   transactions accounts';
		}
	}

	.home-page-grid-container-bottom {
		@apply grid grid-cols-1 gap-8;
		grid-template-areas:
			'activity'
			'packages'
			'validators'
			'node-map';
	}

	@screen lg {
		.home-page-grid-container-bottom {
			@apply gap-10;
		}
	}

	@screen xl {
		.home-page-grid-container-bottom {
			@apply grid grid-cols-2 gap-x-20 gap-y-10;
			grid-template-areas:
				'activity activity'
				'packages validators'
				'node-map node-map';
		}
	}

	@screen lg {
		.address-grid-container-top {
			@apply grid grid-cols-1 grid-rows-[67px,1fr,1fr,1fr] gap-4;
			grid-template-areas:
				'heroImage'
				'description'
				'owner'
				'links';
		}
	}

	.address-grid-container-top {
		@apply grid grid-cols-2 gap-4;
		grid-template-areas:
			'heroImage heroImage'
			'description description'
			'version version'
			'owner owner';
	}

	@screen md {
		.address-grid-container-top {
			grid-template-areas:
				'heroImage description'
				'heroImage description'
				'heroImage version'
				'owner owner';
		}

		.address-grid-container-top.no-image {
			@apply grid grid-cols-3 grid-rows-1;
			grid-template-areas: 'description version owner';
		}
	}

	@screen lg {
		.address-grid-container-top {
			@apply grid-cols-[360px,1fr,1fr] grid-rows-3 gap-6;
			grid-template-areas:
				'heroImage description owner'
				'heroImage description owner'
				'heroImage version version';
		}
	}
}