@reference "tailwindcss";

button,
.button {
	@apply flex flex-row items-center justify-center gap-2 text-nowrap;
	@apply p-2 no-underline;
	@apply rounded-md border-2 border-teal-400 focus:border-dashed;

	&:not(:disabled) {
		@apply cursor-pointer;
		@apply transform bg-teal-400 transition-all duration-300 ease-in-out hover:scale-105;
	}
	&.danger {
		@apply border-red-400 bg-red-400;
	}

	&:not(.transparent, .outline) {
		@apply shadow-md;
		&:not(:disabled) {
			@apply hover:border-teal-500 hover:bg-teal-500;
		}
	}

	&.outline {
		@apply border-2 bg-transparent text-teal-700;

		&.danger {
			@apply border-red-600 text-red-600;
			&:not(:disabled) {
				@apply hover:border-red-700 hover:text-red-700;
			}
		}

		&:not(:disabled) {
			@apply hover:border-teal-700 hover:text-teal-700;
		}

		&:disabled {
			@apply border-zinc-400 text-zinc-400;
		}
	}

	&.transparent {
		@apply border-transparent bg-transparent text-teal-800;

		&.danger {
			@apply text-red-700;
		}

		&:not(:disabled) {
			@apply hover:text-teal-900;
		}

		&:disabled {
			@apply text-zinc-400;
		}
	}
}

:global(.dark) {
	button,
	.button {
		@apply border-teal-800 bg-teal-800;
		&:not(.transparent, .outline) {
			@apply bg-teal-800 hover:bg-teal-700;

			&.danger {
				@apply bg-red-800;
				&:not(:disabled) {
					@apply hover:bg-red-700;
				}
			}

			&:not(:disabled) {
				@apply hover:bg-teal-700;
			}
		}

		&.outline {
			@apply border-2 border-teal-800 bg-transparent;

			&.danger {
				@apply border-red-400 text-red-400;
				&:not(:disabled) {
					@apply hover:border-red-500 hover:text-red-500;
				}
			}

			&:not(:disabled) {
				@apply hover:border-teal-700 hover:text-teal-500;
			}

			&:disabled {
				@apply border-zinc-600 text-zinc-600;
			}
		}

		&.transparent {
			@apply border-transparent bg-transparent text-teal-500;

			&.danger {
				@apply text-red-400;
			}

			&:not(:disabled) {
				@apply hover:border-transparent hover:bg-transparent hover:text-teal-500;
			}

			&:disabled {
				@apply text-zinc-600;
			}
		}
	}
}
