/*
	Restyle Prism code highlighting toolbar
	plugin buttons to our own button style.
	
	We have to use really specific selectors
	because of how specific prism.css is.
*/
div.code-toolbar > div.toolbar {
	margin-right: 0.5rem;
	display: flex;
	gap: 0.25rem;

	> div.toolbar-item {
		> span, > button {
			color: $button-fg;
			background: $button-bg;
			font-weight: bold;
			box-shadow: $boxshadow;

			&:hover, &:focus {
				color: $button-fg;
			}
		}

		.copy-to-clipboard-button:hover {
			background: $button-hover-bg;
		}
	}
}

pre, pre[class*="language-"] {
	border-radius: $br;
	padding: 0.5rem;
	white-space: pre;
	overflow-x: auto;

	/* 
		Code inside a pre block, ie.,
		
		```
		here is some code
		```
	*/
	code {
		width: 100%;
		padding: 0;
		white-space: pre;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}