.v-code-block {
	display: block;
	max-width: 100%;

	&--header {
		align-items: end;
		display: flex;
		justify-content: space-between;
		overflow: visible;
		position: relative;
		width: 100%;
	}

	&--label {
		overflow: auto;
	}

	&--tabs {
		align-items: end;
		display: flex;
		justify-content: flex-end;
	}

	&--tab {
		align-items: center;
		border-radius: 5px 5px 0 0;
		cursor: pointer;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 5px 15px;
		text-align: center;
		transition: background-color 0.35s ease;
		white-space: nowrap;
		width: fit-content;

		svg {
			height: 0.85rem;
			width: 0.85rem;
		}
	}

	&--code {
		position: relative;
		z-index: 1;

		pre {
			margin-top: 0;

			&[class*='language-'] {
				margin-top: 0;

				&::before,
				&::after {
					bottom: 0.95em;
				}
			}

			code {
				width: 100%;
			}
		}

		// Browser Window //
		&-browser {
			&::before {
				background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fillRule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="%23FF5F56" stroke="%23E0443E" strokeWidth=".5" /><circle cx="26" cy="6" r="6" fill="%23FFBD2E" stroke="%23DEA123" strokeWidth=".5" /><circle cx="46" cy="6" r="6" fill="%2327C93F" stroke="%231AAB29" strokeWidth=".5" /></g></svg>');
				background-position: 0.5em 0.5em;
				background-repeat: no-repeat;
				content: '';
				display: block;
				padding-right: 10em;
				padding-top: 3rem;
				width: 100%;
			}
		}

		// Copy Button //
		&:hover {
			.v-code-block--code-copy-button {
				opacity: 1;
			}
		}

		&-copy {
			&-button {
				align-items: center;
				color: #ccc;
				cursor: pointer;
				display: flex;
				fill: #ccc;
				height: 1.5em;
				justify-content: center;
				opacity: 0;
				position: absolute;
				right: 0.9rem;
				top: 0.7rem;
				transition: opacity 0.2s ease-in-out;
				width: auto;
				z-index: 2;

				&:hover {
					opacity: 1;
				}

				&-persist {
					opacity: .5;
				}

				svg {
					height: 1rem;
					width: 1rem;
				}
			}
		}
	}
}
