@import (reference) "../ModalBase/common.less";
@import (reference) "../../App/common.less";

.modal {
	& > .modal-content#export {
		top: 10%;
		left: 10%;
		right: 10%;
		bottom: 10%;
		flex-direction: column;
		background-color: @modal-background-color;
		border-radius: 3px;
		padding: 30px;
		overflow: hidden;

		box-shadow: 0px 0px 10px 0px #131313;

		& h2 {
			margin: 10px 0 0;
			font-size: 3em;
			letter-spacing: 3px;
			transition: all 0.5s ease-in-out 1.5s;
			position: relative;

			&:hover {
				cursor: wait;

				&,
				& > span {
					letter-spacing: 20px;
					text-shadow: 0 1px 8px #000;
				}

				& span {
					transition: width 0.5s ease-in-out 3s, opacity 0.5s ease-in-out 3.2s;
					opacity: 1;
					width: 190px;
				}
			}

			&:not(:hover) {
				transition: all 0.5s ease-in-out 3s;

				& span {
					transition: opacity 0.5s ease-in-out 1s, width 0.5s ease-in-out 1.5s;
				}
			}

			& span {
				opacity: 0;
				width: 0px;
				display: inline-block;

				&:hover {
					animation-name: brue-rotate;
					animation-delay: 1s;
					animation-duration: 1.5s;
					animation-iteration-count: infinite;
					animation-fill-mode: forwards;
					animation-timing-function: linear;
				}
			}
		}

		& p {
			text-align: justify;
		}

		& .tabs {
			margin: 0 -30px;
			padding: 0 28px;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #e6e6e6;

			& .tab {
				padding: 5px;
				position: relative;

				&:not(.active) {
					cursor: pointer;
				}

				&.active {
					border-bottom: 1px solid orange;
					bottom: -1px;
					margin-top: -1px;
				}
			}
		}

		& .partner-example {
			overflow: hidden;
		}

		& pre {
			overflow: scroll;
			height: 100%;
			padding-bottom: 16px;
			padding-top: 10px;
			box-sizing: border-box;

			.scrollableWithoutScrollbars(both);
		}

		& code[class*="language-"],
		& pre[class*="language-"] {
			text-shadow: none;
			border-radius: 3px;

			& .token.operator {
				background: none;
			}
		}
	}
}

@keyframes brue-rotate {
	from {
		cursor: initial;
		color: #ff0000;
		filter: hue-rotate(0deg);
	}

	to {
		cursor: initial;
		color: #ff0000;
		filter: hue-rotate(360deg);
	}
}
