@tailwind components;

@layer components {
	.textdetails {
		@apply border-collapse;
	}

	.textdetails > tbody > tr > td {
		@apply block text-start align-top text-[0.875rem] leading-[1.063rem] sm:table-cell;
	}

	.textdetails > tbody > tr > td:first-child {
		@apply w-[220px]  pr-6 font-medium text-gray-80;
	}

	.textdetails > tbody > tr > td:nth-child(2) {
		@apply break-all;
	}

	.textdetails > tbody > tr:not(:last-child) > td:nth-child(2) {
		@apply break-all pb-5 sm:pb-2.5;
	}

	.textdetails > tbody > tr:last-child > td:nth-child(2) {
		@apply pb-5 sm:pb-0;
	}
}

h1.title {
	@apply text-3xl font-semibold leading-6;
}

/* Description / Image CSS */

div.descimagecontainer {
	@apply mb-[3.75rem] inline-block flex flex-wrap;
}

div.displaycontainer {
	@apply flex w-[533px];
}

div.metadata {
	@apply my-auto ml-2.5 sm:my-0 sm:ml-5;
}

div.metadata > h2 {
	@apply my-0;
}

div.metadata > p {
	@apply text-[13px] leading-[12px] text-gray-80;
}

.desktoppreviewmedia,
.mobilepreviewmedia {
	@apply cursor-pointer bg-inherit p-0 text-[14px] font-semibold
  leading-[13px] tracking-[-0.02em] text-gray-80;
}

.desktoppreviewmedia {
	@apply mt-5 hidden sm:block;
}

.mobilepreviewmedia {
	@apply mt-1 block w-full sm:hidden;
}

div.display {
	@apply w-[50%] sm:w-auto;
}

div.display > div > img {
	@apply ml-auto max-h-[120px] w-[120px];
}

div.display > div > div > div,
div.display > div > div > figure > div > div {
	@apply flex h-[120px] w-[120px] items-center justify-center;
}

table.description {
	@apply mb-[3.75rem] w-full sm:w-[866px] 2xl:mb-0;
}

/* Description CSS */

table.description,
table.properties {
	@apply textdetails;
}

.description > tbody > tr > td:nth-child(2) {
	@apply font-mono;
}

.properties > tbody > tr > td:nth-child(2) {
	@apply font-sans;
}

td.objectid {
	@apply text-gray-90;
}

.objecttypelink {
	@apply text-sui-dark no-underline;
}

/* Clickable Header CSS */

h2.header {
	@apply mb-5 mt-0 text-[1.125rem] font-semibold leading-[1.125rem] text-gray-100;
}

div.accommodate > h2.header {
	@apply lg:w-[50vw];
}

/* Transaction Section Spacing */

.txsection {
	@apply mt-[68px];
}