@reference "tailwindcss";

.card {
	@apply flex flex-col flex-auto w-full mt-3 shadow-md rounded-xl border border-black/20;

	.wrapper {
		@apply px-6 py-4 grow;

		.title {
			@apply flex items-center justify-between pb-4 mb-4 border-b-2 border-black;
		}
	}

	.button {
		@apply relative w-full h-12 px-4 text-white text-center rounded-b-lg;

		.text {
			@apply font-medium;
		}
	}

	&.taken {
		.button {
			@apply bg-red-500;

			.far {
				@apply absolute top-4 right-4;
			}
		}
	}

	&.free {
		@apply shadow-none border border-black;

		.button {
			@apply bg-black;

			.far {
				@apply ml-1;
			}
		}
	}

	&.approved {
		.button {
			@apply bg-green-500;

			.far {
				@apply absolute top-4 right-4;
			}
		}
	}

	&.unconfirmed {
		.badge {
			@apply bg-yellow-500/30;
		}

		.button {
			&.confirm {
				@apply bg-blue-100 rounded-bl-xl rounded-br-none;
			}

			&.reject {
				@apply bg-red-500 rounded-br-xl rounded-bl-none;
			}
		}
	}
}