/**
 * Base64 Encoder/Decoder Styles
 */

#base64Input {
	font-family: 'Courier New', monospace;
	font-size: 0.95rem;
}

.result-box {
	background-color: var(--bs-light);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	overflow-x: auto;
}

.result-box pre {
	font-family: 'Courier New', monospace;
	color: var(--bs-primary);
	word-break: break-all;
	white-space: pre-wrap;
}

/* Example cards */
.example-btn {
	width: 100%;
	text-align: left;
}

.example-btn .material-icons {
	vertical-align: middle;
}

/* Length indicator */
.length-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: var(--bs-light);
	border-radius: 0.5rem;
	font-size: 0.9rem;
}

.length-indicator .material-icons {
	color: var(--bs-primary);
}

/* Dark mode support */
[data-bs-theme='dark'] .result-box {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme='dark'] .result-box pre {
	color: var(--bs-info);
}

[data-bs-theme='dark'] .length-indicator {
	background-color: rgba(255, 255, 255, 0.05);
}

/* Encoding/Decoding animation */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.result-box {
	animation: slideIn 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.result-box pre {
		font-size: 0.85rem;
	}

	.length-indicator {
		flex-direction: column;
		align-items: flex-start;
	}
}