.winbox.modern {
	& {
		background: linear-gradient(90deg, #ff00f0, #0050ff);
		border-radius: 12px 12px 0 0;
		animation: popup 0.3s cubic-bezier(0.3, 1, 0.3, 1) forwards;
	}

	//&.min:not(:hover),
	&:not(.min, .focus) {
		background: #666;
		.winbox.modern {
			& {
				background: linear-gradient(90deg, #ff00f0, #0050ff);
				border-radius: 12px 12px 0 0;
				animation: popup 0.3s cubic-bezier(0.3, 1, 0.3, 1) forwards;
			}

			//&.min:not(:hover),
			&:not(.min, .focus) {
				background: #666;
			}

			// hover fix for mobile devices which keeps the :hover state when touched

			@media (hover: hover) {
				&.min:not(:hover) {
					background: #666;
				}

				.wb-control * {
					opacity: 0.65;
				}

				.wb-control *:hover {
					opacity: 1;
				}
			}

			@media (hover: none) {
				&.min {
					background: #666;
				}
			}

			//&.min,
			&.max {
				border-radius: 0;
			}

			.wb-title {
				font-size: 13px;
				text-transform: uppercase;
				font-weight: 600;
			}
		}

		@keyframes popup {
			0% {
				transform: scale(0.8);
			}
			100% {
				transform: scale(1);
			}
		}
	}

	// hover fix for mobile devices which keeps the :hover state when touched

	@media (hover: hover) {
		&.min:not(:hover) {
			background: #666;
		}

		.wb-control * {
			opacity: 0.65;
		}

		.wb-control *:hover {
			opacity: 1;
		}
	}

	@media (hover: none) {
		&.min {
			background: #666;
		}
	}

	//&.min,
	&.max {
		border-radius: 0;
	}

	.wb-title {
		font-size: 13px;
		text-transform: uppercase;
		font-weight: 600;
	}

	.wb-body {
		& {
			/* width of window border: */
			margin: 4px;
			background: #131820;
		}
	}
}

@keyframes popup {
	0% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}
