div.code-toolbar {
	position: relative;

	.toolbar {
		position: absolute;
		top: 1rem;
		right: 0.7rem;
		pointer-events: none;

		.toolbar-item {
			display: inline-block;

			a {
				cursor: pointer;
			}

			button {
				position: relative;
				padding: 4px;
				background: 0 0;
				min-width: auto;
				min-height: auto;
				background: url(https://static.pingcap.com/files/2024/11/05221601/copy.svg)
					no-repeat center;
				width: 18px;
				height: 18px;
				display: block;
				font-size: 0;
				border-radius: unset;
				opacity: 0.5;
				cursor: pointer;
				&:after {
					content: "";
					position: absolute;
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.1);
					left: -4px;
					top: -4px;
					opacity: 0;
					z-index: -1;
					cursor: pointer;
				}
				&:hover {
					&:after {
						opacity: 1;
					}
					span {
						display: block;
					}
				}
			}

			span {
				display: none;
				bottom: -32px;
				position: absolute;
				width: 42px;
				line-height: 24px;
				background: rgba(0, 0, 0, 0.8);
				color: #fff;
				font-size: 10px;
				font-weight: 400;
				right: 0;
				margin: auto;
				z-index: 2;
			}
		}
	}

	&:hover .toolbar {
		pointer-events: all;
	}

	/* Separate line b/c rules are thrown out if selector is invalid.
	   IE11 and old Edge versions don't support :focus-within. */
	&:focus-within .toolbar {
		opacity: 1;
		pointer-events: all;
	}
}