/* Deploy Node Drawer Styles */

/* Card container styles */
.cardContainer {
	@apply grid grid-cols-3 gap-4 mt-[2.4rem];
}

/* Option card styles */
.optionCard {
	@apply flex items-center justify-center rounded-[0.4rem] transition-all border-[1px] border-transparent;
	border-color: var(--n-border-color);
}

.optionCardSelected {
	@apply border-[1px] relative overflow-hidden;
	border-color: var(--n-primary-color);
}

/* Add checkmark for selected item */
.optionCardSelected::after {
	content: '';
	@apply absolute bottom-[.1rem] right-[.1rem] w-[1rem] h-[1rem] rounded-full z-10;
	@apply bg-[length:14px_14px] bg-center bg-no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}

/* Add triangle in bottom-right corner for selected item */
.optionCardSelected::before {
	content: '';
	@apply absolute -bottom-[.1rem] -right-[.1rem] w-0 h-0 z-10 text-white text-[1.2rem] flex items-center justify-center;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: transparent transparent var(--n-primary-color) transparent;
	line-height: 0;
	padding-left: 2px;
	padding-bottom: 2px;
}

/* Card content styles */
.cardContent {
	@apply flex flex-col items-center justify-center p-[4px] cursor-pointer;
}

/* Icon styles */
.icon {
	@apply mb-[0.4rem];
}

.iconSelected {
	color: var(--n-primary-color);
}

/* Footer styles */
.footer {
	@apply flex justify-end absolute right-[1.2rem] -bottom-[1.2rem];
}

.footerButton {
	@apply mr-[0.8rem];
}

/* Main container */
.container {
	@apply pb-[3.2rem];
}

/* Form container */
.formContainer {
	@apply mt-[2.4rem];
}
