@use "../abstracts/mixins" as *;

#coffee-container {
	margin-inline: auto;
	border-radius: 2.25rem;
	padding: 1rem;
	width: min(calc(var(--content-width) / 2), 100%);
	text-align: center;
	@include fancy-card;

	#blobfox {
		position: absolute;
		transform: translateY(-100%) scaleY(-1);
		opacity: 0;
		transition: var(--transition-longer);
		margin: 0;
		inset-block-start: 0;
		inset-inline-end: 0;
		width: 6rem;
		height: 6rem;
	}

	#blobfox-message {
		-webkit-user-select: none;
		position: absolute;
		transform: scale(0.5) rotate(90deg) translateY(-100%);
		transform-origin: top right;
		opacity: 0;
		transition: var(--transition-longer);
		inset-block-start: 3.5rem;
		inset-inline-end: 6rem;
		border: 0.375rem solid black;
		border-radius: 999px 0 999px 999px;
		background-color: #fafafa;
		padding: 0 0.5rem;
		color: black;
		font-weight: var(--font-weight-semi-bold);
		user-select: none;
	}

	#coffee-banner-container {
		position: relative;
		cursor: help;
		margin: -1rem -1rem 1rem -1rem;
		border-radius: 2.25rem 2.25rem 0 0;
		height: 8rem;
		overflow: hidden;

		&:active {
			#blobfox {
				transform: translateY(0) scaleY(-1);
				opacity: 1;
			}

			#blobfox-message {
				transform: none;
				opacity: 1;
			}
		}

		#coffee-banner {
			transition: var(--transition-longer);
			margin: 0;
			box-shadow: none;
			border-radius: 0;
			height: 100%;
			object-fit: cover;

			&:active {
				transform: translateY(-100%);
			}
		}
	}

	#title {
		display: inline-block;
		margin-block-start: 0.5rem;
		font-size: var(--font-size-x-large);
	}

	#avatar-container {
		position: relative;
		margin-block-start: -1rem;

		&::after {
			position: absolute;
			transform: translateY(-50%);
			opacity: 0;
			z-index: 2;
			transition: var(--transition-bezier);
			margin: 0 auto;
			inset-inline-end: 0;
			inset-inline-start: 0;
			background-image: url("blush.svg");
			background-size: cover;
			width: 6rem;
			height: 6rem;
			pointer-events: none;
			content: "";
		}

		&:has(#avatar:active)::after {
			transform: translateY(-50%) scale(0.75);
			opacity: 1;
		}

		#avatar {
			position: absolute;
			transform: translateY(-50%);
			z-index: 1;
			transition: var(--transition-bezier);
			cursor: pointer;
			margin: 0 auto;
			inset-inline-end: 0;
			inset-inline-start: 0;
			border-radius: 50%;
			width: 6rem;
			height: 6rem;

			&:active {
				transform: translateY(-50%) scale(0.75);
			}
		}
	}

	#buttons {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
		margin-block-start: 2rem;

		a {
			border-radius: 999px;

			&:hover {
				transform: var(--hover);
			}

			&:active {
				transform: var(--active);
			}

			&#ko-fi {
				background-color: #ff5e5b;
				color: white;
			}

			&#liberapay {
				background-color: #f6c915;
				color: black;
			}

			&#monero {
				background-color: #ff6600;
				color: white;
			}

			&#paypal {
				background-color: #003087;
				color: white;
			}
		}
	}
}
