/*$fg: deeppink;				// #ff1493
$fg-bright: lightpink;		// #ffb6c1
$fg-dark: #b3005f;*/
$fg: gold;
$fg-bright: yellow;
$fg-dark: orange;

$bg: cyan;					// #00ffff
$bg-bright: lightcyan;		// #e0ffff
$bg-dark: darkcyan;			// #008b8b

@font-face {
	font-family: "Electrolize";
	src: local("Electrolize"), url("../img/Electrolize-Regular.ttf") format("truetype"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
}

@mixin aug() {
	--aug-b: 5px;
	--aug-bl: 5px;
	--aug-br: 5px;
	--aug-l: 5px;
	--aug-r: 5px;
	--aug-tl: 5px;
	--aug-tr: 5px;
}

@mixin border() {
	--aug-border-all: 2px;
	--aug-border-bg: cyan; // variables don't work in this specific instance
	--aug-border-opacity: .5;
}

@mixin inlay() {
	--aug-inlay-bg: rgba(0, 0, 0, .5);
	--aug-inlay-y: 10%;
}

@mixin button() {
	background: transparent;
	border: 1px solid $bg;
	border-radius: 1px;
	box-shadow: 0 0 2px $bg-bright, 0 0 4px $bg, 0 0 8px $bg-dark;
	color: $fg;
	padding-inline: 0px;
}

html {
	font-family: 'Electrolize', sans-serif;
	height: 100%;
	margin: 0;
	overflow-x: hidden;
	user-select: none;
}

body {
	background-color: darkslategray;
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.svg-icons { display: none; }

.icon { fill: $fg; }

.sr2-button:focus-visible {
	border: 1px solid $bg !important;
	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
	outline: none;
}

.container {
	padding: 4px;
	position: relative;
}

header.navbar {
	@include border;
	@include inlay;

	--aug-b: 7px;
	--aug-bl: 7px;
	--aug-br: 7px;
	--aug-inlay-bg: rgba(0, 0, 0, .75);
	--aug-l: 7px;
	--aug-r: 7px;
	--aug-tl: 7px;
	--aug-tr: 7px;
	padding-right: .6rem;;

	.navbar-brand {
		color: $bg;
		text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px;
	}

	button {
		@include button;

		height: 38px;
		margin-left: 3px;
		margin-right: 3px;
		width: 38px;

		svg {
			width: 32px;
			height: 32px;
			fill: $fg;
		}

	}
}

.table-responsive { margin-bottom: 1px; }

#combatants-table {
	margin-top: .5rem;

	tr {
		@include aug;
		@include border;
		@include inlay;

		--aug-border-bottom: 0px;
		--aug-border-right: 0px;
	}

	.combatant-row { 
		clip-path: none; 
		vertical-align: middle !important;
	}

	th:not(:first-of-type) { text-align: center; }

	.th-ini { min-width: 3rem; }

	.th-dice-and-rea { min-width: 3.75rem; }

	.th-actions { min-width: 6.5rem; }

	th, 
	td {
		@include aug;
		@include border;
		@include inlay;

		--aug-border-bottom: 0px;
		--aug-border-right: 0px;
		background: none !important;
	}

	th {
		color: $bg;
		text-transform: uppercase; 
	}

	td {
		clip-path: none;
		color: $fg;
		font-weight: bold;
	}

	th:first-of-type, 
	td:first-of-type {
		padding-left: 1rem !important;
	}

	th:last-of-type, 
	td:last-of-type {
		--aug-border-right: 2px;
		padding-right: .75rem;
	}

	tr:last-of-type td,
	tr:last-of-type th {
		--aug-border-bottom: 2px;
	}

	.combatant-actions {
		display: flex;
		justify-content: flex-end;
	}

	.sr2-button {
		@include button;

		height: 24px;
		margin-left: 3px;
		margin-right: 3px;
		width: 24px;

		svg, 
		.icon {
			bottom: 3px;
			height: 16px;
			position: relative;
			width: 16px;
		}

		&:disabled {
			box-shadow: none;
			border-color: $bg-dark;

			.icon { fill: $fg-dark;	}

		}
	}

	.combatant-ini {
		padding-right: 1rem !important;
		text-align: center;
	}

	.combatant-dice-and-rea { text-align: center; }

	.combatant-dice::before { content: attr(data-combatant-dice); }

	.combatant-rea::before { content: attr(data-combatant-rea); }

	.actions-menu {
		display: flex;
		flex-flow: column;
		padding: 6px;

		button {
			@include button;

			height: 24px;
			margin: 4px;
			width: 24px;
		}
	}
}

.max-ini td {
	text-shadow: 0 0 .15em $fg;
}

.zero-ini td {
	color: $fg-dark !important;

	.icon { fill: $fg-dark !important; }
}

.ko-or-dead td {
	background-color: rgba(0, 0, 0, .5);
	color: $fg-dark !important;
	text-decoration: line-through .1em $fg;

	.icon { fill: $fg-dark !important; }
}

.badge.bg-warning {
	background: radial-gradient(circle at center, $bg, $bg-dark);
	color: black;
	bottom: -4px;
	left: 12px;
	width: 20px;
}

.badge.bg-danger {
	background: radial-gradient(circle at center, $fg, $fg-dark);
	color: black;
	left: 12px;
	top: 12px;
	width: 20px;
}

.damage-dropdown, 
.actions-dropdown { 
	display: inline-block; 
	position: relative;	// required in order to center dropdowns vertically
}

.damage-monitor, 
.actions-menu {
	@include aug;
	@include border;

	--aug-inlay-bg: rgba(0, 0, 0, .5);
	--aug-border-opacity: .75;
	padding-top: 10px;
	padding-bottom: 10px;
	position: absolute;
	z-index: 200;

	// center element horizontally w/ respect to parent 
	right: 50%;
	transform: translateX(50%);

	// transition: fade in/out
	transition: opacity .2s ease-in-out, visibility .2s;
	opacity: 0%;
	visibility: hidden;
}

.seen { 
	visibility: visible;
	opacity: 100%;
 }

.damage-monitor {
	button {
		border: none;
		border-radius: 0;
		font-size: smaller;
		height: 24px;
		margin: 0px 2px;
		width: 24px;

		&:focus-visible {
			filter: brightness(150%) !important;
			outline: none;
		}
	}

	.damage-stun {
		background: radial-gradient(circle at center, $bg, $bg-dark);
		box-shadow: none;
		transition: background .5s, box-shadow .5s;
	}

	.damage-stun.active {
		background: radial-gradient(circle at center, $bg-bright, $bg);
		box-shadow: 0 0 3px $bg-bright, 0 0 6px $bg, 0 0 12px $bg-dark;
	}

	.damage-physical {
		background: radial-gradient(circle at center, $fg, $fg-dark);
		border-radius: 50%;;
		box-shadow: none;
		transition: background .5s, box-shadow .5s;

		&:focus-visible { outline: $fg !important;	}
	}

	.damage-physical.active {
		background: radial-gradient(circle at center, $fg-bright, $fg);
		box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
	}

	svg { 
		height: 16px;
		width: 16px;
	}
}



.footer-container {
	bottom: 0px;
	left: 0px;
	position: fixed;
	right: 0px;
}

footer {
	@include aug;
	@include inlay;

	--aug-border-all: 2px !important;
	--aug-border-bg: cyan !important; // vars don't work here
	--aug-border-opacity: .5 !important;
	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
	--aug-tl: 10px;
	--aug-tr: 10px;
	height: 2.5em;

	p {
		color: $bg;
		font-size: xx-small;
		margin: .25rem;
		padding-top: .65em;
		text-align: center;
		user-select: auto;

		a {
			color: $fg;
			text-decoration: none;
		}
	}
}


.sr2-modal {
	@include border;
	@include aug;

	color: $bg;
	pointer-events: auto;

	button { @include button; }

	.modal-header {
		@include inlay;
		@include border;

		--aug-inlay-bottom: 0;
		border-bottom: none;
		text-transform: uppercase;

		button { width: 30px; }
	}

	.modal-body {
		@include inlay;
		@include border;

		--aug-inlay-y: 0;
	}

	.modal-footer {
		@include inlay;
		@include border;

		--aug-inlay-top: 0;
		border-top: none;

		button { width: 4rem; }
	}

	label { margin: 0; }

	.label-swap {
		display: flex;
		flex-flow: column;
	
		label { order: 2; }

		input { order: 1; }

	}

	input {
		background-color: transparent;
		color: $fg;
		user-select: text;

		&::selection {
			background-color: $fg;
			color: black;
		}
	
		&:focus {
			background-color: transparent;
			color: $fg;
		}

		&:focus-visible {
			background-color: transparent;
			color: $fg;
		}

	 	&:not([type=range]):valid {
			background-image: none !important;
	 		border: 1px solid $bg !important	;
	 	}

	 	&:invalid {
			background-image: none !important;
	 		border: 1px solid $fg;
			box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
	 	}

		&[type=number]::-webkit-inner-spin-button,
		&[type=number]::-webkit-outer-spin-button { 
			-webkit-appearance: none; 
			margin: 0; 
		}

		&[type=number] { 
			-moz-appearance: textfield;
			appearance: textfield;
	 		margin: 0; 
	 	}

	 	&[type=range] {
//			-webkit-appearance: none;
			margin-left: calc(4.5% - 2px);
			width: 91%;

	 		+ datalist {
	 			display: block;
	 			width: 100%;

	 			option {
	 				display: inline-block;
	 				margin: 0;
	 				text-align: center;
	 				width: 9%;
	 			}
	 		}

	 		&::-moz-range-track {
	 			border: 1px;
	 			border-radius: 1px;
	 			height: 2px;
	 		}
	 		
 			&::-moz-range-thumb {
	 			height: 20px;
 				width: 4px;
	 		}
	 	}
	}

 	.input-group-text {
 		background-color: transparent;
 		border: none;
 		color: $fg;
 	}

 	hr {
 		border-top: 2px solid $bg;
 		opacity: .5;
 	}
 }

#combatant-modal-stun {
	&::-moz-range-track { background-color: $bg-dark; }
	&::-moz-range-thumb { background-color: $bg; }
}

#combatant-modal-physical {
	&::-moz-range-track { background-color: $fg-dark; }
	&::-moz-range-thumb { background-color: $fg; }
}