/* ====================

Table of Contents

1. Popup
2. Content
3. Navigation
4. Close button
5. Copy button
6. Tabs
7. Overlay

==================== */



/* 1. Popup */

.get-code-popup {
	display: none;
	position: fixed;
	z-index: 9000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}



/* 2. Content  */

.get-code-content {
	display: block;
	box-sizing: border-box;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: calc(100% - 20px);
	max-width: 1024px;
	height: auto;
	max-height: calc(100vh - 40px);
	padding: 10px;
	background-color: #242526;
	border-radius: 6px;
	transform: translate(-50%, -50%);
}



/* 3. Navigation */

.get-code-navigation {
	display: flex;
}

.get-code-navigation > div {
	display: block;
	position: relative;
	font-size: 13px;
	font-weight: 600;
	color: #585c60;
	padding: 7px 20px;
	border-radius: 6px;
	margin: 0 5px 10px 0;
	background-color: #18191a;
	cursor: pointer;
	transition: color .2s ease-in-out;
}

.get-code-navigation > div:hover {
	color: #e4e6eb;
}

.get-code-navigation > div.active {
	pointer-events: none;
	color: #e4e6eb;
}



/* 4. Close button */

.get-code-close {
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: 34px;
	height: 34px;
	margin: 0;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.get-code-close.button {
	box-shadow: none;
}

.get-code-close:before, 
.get-code-close:after {
	content: '';
	position: absolute;
	top: 16px;
	left: 9px;
	width: 16px;
	height: 3px;
	background-color: #333333;
	transform: rotate(45deg);
	transition: all .25s ease-in-out;
}

.get-code-close:after {
	transform: rotate(-45deg);
}

.get-code-close:hover:before, 
.get-code-close:hover:after {
	background-color: #e4e6eb;
}

.get-code-close:hover:before {
	transform: rotate(45deg) scale(0.8);
}

.get-code-close:hover:after {
	transform: rotate(-45deg) scale(0.8);
}



/* 5. Copy button */

.get-code-copy {
	position: absolute;
	z-index: 2;
	top: 64px;
	right: 20px;
	box-sizing: border-box;
	padding: 7px 20px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #adb0b5;
	background-color: #242526;
	cursor: pointer;
	transition: .2s ease-in-out;
}

.get-code-copy:hover {
	color: #e4e6eb;
}

.get-code-copy.copied,
.get-code-copy.copied:hover {
	color: #585c60;
	pointer-events: none;
	transition: 0s ease-in-out;
}



/* 6. Tabs */

.get-code-tabs {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
}

.get-code-tabs > code {
	display: none;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	overflow: auto;
	max-height: calc(100vh - 104px);
	word-wrap: break-word;
	white-space: pre-wrap;
	overflow: auto;
	color: #e4e6eb;
	font-size: 14px;
	line-height: 1.5;
	padding: 20px;
	margin: 0;
	border-radius: 6px;
	background-color: #18191a;
}

.get-code-tabs > code.active {
	display: block;
}

.get-code-tabs > code .comment {
	font-style: italic;
	color: #666;
}

.tag,
.tag .nbr {
	color: #f92472;
}

.atn {
	color: #a6e22c;
}

.atv {
	color: #e7db74;
}

.ftn {
	color: #67d8ef;
}

.vrl {
	color: #fd9621;
}

.nbr {
	color: #a083ed;
}



/* 7. Overlay */

.get-code-overlay {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.9);
}