/*
 * Sticky Copy Button for Code Blocks - Main Styles
 */

.code-block-wrapper { 
	position: relative; 
	padding-right: 50px; 
	margin-bottom: 1em; 
	display: flex;
	align-items: stretch;
}

.code-block-wrapper pre { 
	position: relative; 
	padding: 0.75em; 
	margin: 0; 
	margin-left: 0.1em !important;
	word-break: normal;
	word-wrap: normal;
	overflow-x: auto; 
	overflow-y: auto; 
	flex: 1 1 auto; 
	box-sizing: border-box; 
	min-width: 0; 
}

.entry-content .code-block-wrapper pre,
.article .code-block-wrapper pre {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-right: 0 !important;
}

.copy-code-btn {
	all: revert;
	position: absolute !important;
	outline: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	opacity: 0.8 !important;
	transition: opacity 0.2s, background-color 0.2s, color 0.2s !important;
	z-index: 10 !important;
	box-sizing: border-box !important;
	line-height: normal !important;
	text-align: center !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	font-family: inherit !important;
}

.copy-code-btn:hover {
	opacity: 1;
}

.copy-code-btn.copied {
	animation: pulse 0.4s ease;
	outline: none !important;
}

.line-numbers {
	text-align: right;
	user-select: none;
	opacity: 0.6;
	overflow-x: hidden;
	overflow-y: hidden;
	flex-shrink: 0;
	scrollbar-width: none;
	/* border-right: 1px solid currentColor; */
	padding-right: 0.4em;
	padding-left: 0.3em;
}

.code-block-wrapper .line-numbers,
.code-block-wrapper .line-numbers span {
	font-size: 0.875em !important;
	font-family: inherit !important;
}

.line-numbers span {
	box-sizing: border-box;
	position: absolute;
}

.line-numbers > span {
	position: absolute;
	right: 0.2em;
	white-space: nowrap;
}

.line-numbers, .line-numbers span,
pre code {
	line-height: 1.5 !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

.code-block-wrapper .line-numbers::-webkit-scrollbar { 
	display: none; 
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
