/**
 * RetroArch Web Player
 *
 * This provides the basic styling for the RetroArch web player.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap");

@keyframes loaded {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 1;
	}
}

@keyframes loading {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 0.35;
	}
}

/* real ozone */
@keyframes hover {
	from {
		box-shadow: 0px 0px 1px 1px #198AC6, inset 0px 0px 1px 1px #198AC6;
	}
	to {
		box-shadow: 0px 0px 1px 1px #89F1F2, inset 0px 0px 1px 1px #89F1F2;
	}
}

@keyframes hover-danger {
	from {
		box-shadow: 0px 0px 1px 1px #C7261A, inset 0px 0px 1px 1px #C7261A;
	}
	to {
		box-shadow: 0px 0px 1px 1px #F75C4A, inset 0px 0px 1px 1px #F75C4A;
	}
}

body {
	margin: 0px;
	background-color: black;
	font-family: "Inter", sans-serif;
	font-variant-ligatures: no-contextual;
	scrollbar-color: #505050 #2e2e2e;

	--menuheight: 65px;
	--menumarginy: 14px;
	--menumarginx: 7px;
	--menupaddingy: 8px;
	--menupaddingx: 16px;
	--submarginy: 0px;
	--submarginx: 0px;
	--subpaddingy: 5px;
	--subpaddingx: 8px;
	--rounding: 1px;
	--barcolor: #2e2e2e;
	--subcolor: #282828;
	--barbuttoncolor: var(--barcolor);
	--barbuttonhovercolor: #212227;
	--barbuttonoutline: 1px;
	--barbuttonoutlinecolor: #51514f;
	--barfontcolor: #ffffff;
	--bardisabledfontcolor: #b6b6b6;

	/* do not modify */
	--actualmenuheight: var(--menuheight);
	--menubuttonbordery: calc(var(--menuheight) - calc(var(--menumarginy) * 2));
	--menubuttoncontenty: calc(var(--menubuttonbordery) - calc(var(--menupaddingy) * 2));
}

canvas.webplayer, #webplayer-preview {
	display: block;
	position: fixed;
	top: var(--actualmenuheight);
	width: 100vw;
	height: calc(100vh - var(--actualmenuheight));
	outline: none;
	z-index: 4;
}

#webplayer-preview {
	background-image: url(media/canvas.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: wait;
	opacity: 0.2;
	transition: opacity 0.8s;
	animation: loading 0.8s ease-in-out infinite alternate;
	z-index: 5;
}

#webplayer-preview.loaded {
	cursor: pointer;
	opacity: 1;
	animation: loaded 0.8s ease-in-out;
}

/**
 * Hack to make emscripten stop messing with the canvas size while in fullscreen.
 * Foiled again!
 */
:fullscreen canvas.webplayer {
	top: 0px;
	min-width: 100vw;
	max-width: 100vw;
	min-height: 100vh;
	max-height: 100vh;
}

a {
	color: #3ec3f0;
}

/* menu bar */

#navbar {
	position: fixed;
	width: 100vw;
	height: var(--actualmenuheight);
	background-color: var(--barcolor);
	color: var(--barfontcolor);
	z-index: 20;
	user-select: none;
}

#menu {
	float: left;
	list-style: none;
	margin: 0px;
	width: max-content;
	height: 100%;
	padding: 0px var(--menumarginx);
}

.progressContainer {
	width: 100%;
	float: left;
}

.progressBar {
	width: 100%;
	height: 0px;
	--progressbarpercent: 0%;
	--progressbarcolor: #1fb01a;
}

.progressBar::after {
	content: "";
	display: block;
	width: var(--progressbarpercent);
	height: 100%;
	transition: width 0.2s ease-out;
	background-color: var(--progressbarcolor);
}

.progressText {
	padding: 0px 4px;
}

#menu li {
	white-space: nowrap;
	max-width: 500px;
	position: relative;
	outline: none;
}

#menu>li {
	margin: var(--menumarginy) var(--menumarginx);
	display: inline-block;
	float: left;
	height: var(--menubuttoncontenty);
	line-height: var(--menubuttoncontenty);
	border-radius: var(--rounding);
	background-color: var(--barbuttoncolor);
	outline: var(--barbuttonoutline) solid var(--barbuttonoutlinecolor);
	font-size: 12pt;
}

.dropdown-parent {
	height: var(--menubuttonbordery) !important;
}

.dropdown-parent>label {
	display: inline-block;
}

#menu>li:not(.dropdown-parent),
.dropdown-parent>label {
	padding: var(--menupaddingy) var(--menupaddingx);
}

label {
	cursor: inherit;
}

.ozone-list {
	background-color: var(--subcolor);
	width: max-content;
	padding: 1px;
}

.dropdown-child {
	position: absolute;
	overflow: hidden auto;
	max-height: calc(100vh - var(--actualmenuheight));
	display: none;
	top: calc(100% + 1px);
	left: 0px;
	border-radius: var(--rounding);
	box-sizing: border-box;
	z-index: 1;
}

#fileManagerPanel {
	margin: auto;
	margin-top: 10px;
}

.ozone-list>* {
	display: block;
	border-radius: var(--rounding);
	text-decoration: none;
	color: inherit;
	margin: var(--submarginy) var(--submarginx);
	padding: 8px 12px;
	line-height: initial;
	font-size: 10pt;
	outline: none;
	user-select: none;
}

.dropdown-child>* {
	padding: var(--subpaddingy) var(--subpaddingx);
}

.ozone-list>*:not(:last-child) {
	box-shadow: 0px 2px 0px -1px var(--barbuttonoutlinecolor);
}

#menu>li:not(.disabled),
.ozone-list>*:not(.disabled) {
	cursor: pointer;
}

#menu .disabled,
.ozone-list .disabled {
	cursor: not-allowed !important;
	color: var(--bardisabledfontcolor);
}

#menu>li:not(.disabled):not(.dropdown-parent:has(.dropdown-child:hover)):hover,
.ozone-list>*:hover,
.ozone-list>*:focus,
#menuhider:not(:checked) ~ .menuhiderlabel:hover {
	background-color: var(--barbuttonhovercolor);
	outline: none;
	animation: hover 0.5s ease-in-out infinite alternate;
}

.ozone-list>.danger:hover,
.ozone-list>.danger:focus {
	animation: hover-danger 0.5s ease-in-out infinite alternate;
}

/* hide/show the menu */

.menuhiderlabel {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	z-index: 1;
}

#menuhider:not(:checked) ~ .menuhiderlabel {
	margin: var(--menumarginy) 0px;
	margin-right: calc(var(--menumarginx) * 2);
	width: var(--menubuttonbordery) !important;
	height: var(--menubuttonbordery) !important;
	border-radius: var(--rounding);
	background-color: var(--barbuttoncolor);
	outline: var(--barbuttonoutline) solid var(--barbuttonoutlinecolor);
}

.menuhiderlabel span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

#menuhider:checked ~ .menuhiderlabel span {
	transform: translate(-50%, -50%) scaleY(-1);
	color: #dfdfdf !important;
}

#menuhider:checked ~ .menuhiderlabel:hover {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

.hide,
#dropdown-box,
#menuhider,
#menuhider:checked ~ #menu {
	display: none !important;
}

#dropdown-box:checked ~ .dropdown-child {
	display: block;
}

/* modals */

#modals {
	display: none;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(6px);
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 30;
}

#modal-window {
	background-color: var(--barcolor);
	color: var(--barfontcolor);
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	left: round(50%, 1px);
	top: round(50%, 1px);
	transform: translate(round(-50%, 1px), round(-50%, 1px));
	max-height: calc(100vh - 40px);
	max-width: calc(100vw - 40px);
	width: 750px;
	overflow: hidden;
}

.modal-header {
	height: 50px;
	line-height: 30px;
}

.modal-header .progressContainer {
	position: absolute;
	top: 50px;
}

.modal-header .progressText {
	white-space: nowrap;
	font-size: 10pt;
}

#modal-title {
	display: inline-block;
	margin: 10px;
}

#modal-close {
	float: right;
	width: 30px;
	text-align: center;
	cursor: pointer;
	font-size: 24px;
	margin: 10px;
}

.modal-body {
	display: none;
	width: calc(100% - 40px);
	max-height: calc(100vh - 135px);
	padding: 20px;
	padding-top: 0px;
	margin-top: 25px;
	overflow: auto;
}

.modal-body>*:first-child {
	margin-top: 0px;
}

/* debug */

.retroarchWebcamVideo, .retroarchWebcamCanvas {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 5000;
}

.retroarchWebcamCanvas {
	top: 112px;
}

/* mobile */

@media only screen and (max-width: 720px) {
	body {
		--subpaddingy: 8px;
	}

	#menu {
		width: calc(100% - calc(var(--menumarginx) * 2));
		height: max-content;
		padding-bottom: var(--menumarginy);
		background-color: var(--barcolor);
	}

	#menu>li {
		margin-bottom: 0px;
	}

	.dropdown-child {
		max-width: calc(100vw - calc(var(--menumarginx) * 4));
		width: max-content;
	}

	.dropdown-child a {
		white-space: normal;
	}
}