$sr-border: cyan;
$sr2-btn: darkcyan;
$sr2-fg: deeppink;

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

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

@mixin border() {
	--aug-border-bg: cyan; // "sr2-border doesn't work"
	--aug-border-opacity: .5;
	--aug-border-all: 2px;
}

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

@mixin button() {
	border-radius: 1px;
	padding-inline: 0px;

	border: 1px solid cyan;
	background: transparent;
	box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan;

	color: deeppink;

	img {
		filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
	}
}

.sr2-button:focus-visible {
	outline: none;
	border: 2px solid cyan !important;
	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
}

html, 
body {
	margin: 0;
	height: 100%;
	user-select: none;
	font-family: 'Electrolize', sans-serif;
}
body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: darkslategray;
	font-family: 'Electrolize', sans-serif !important;

}

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

header.navbar {
//	margin-top: 4px;
	padding-right: .6rem;;
	@include border;
	@include inlay;
	--aug-br: 7px;
	--aug-tr: 7px;
	--aug-bl: 7px;
	--aug-tl: 7px;
	--aug-b: 7px;
	--aug-l: 7px;
	--aug-r: 7px;
	--aug-inlay-bg: rgba(0, 0, 0, .75);

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

	button {
		@include button;
		width: 38px;
		height: 38px;
		margin-right: 3px;
		margin-left: 3px;

		img {
			width: 32px;
			height: 32px;
		}

	}
}

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

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

	tr {
		@include aug;
		@include border;
		@include inlay;
		--aug-border-right: 0px;
		--aug-border-bottom: 0px;
	}

	.combatant-row {
		clip-path: none;
	}

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

/*		> img {
			filter: invert(72%) sepia(100%) saturate(778%) hue-rotate(119deg) brightness(102%) contrast(102%);
			width: 16px;
			height: 16px;
		}		*/
	}
	.th-actions { 
		min-width: 6.5rem;
	}

	th, 
	td {
		@include aug;
		@include border;
		@include inlay;
		--aug-border-right: 0px;
		--aug-border-bottom: 0px;
		background: none !important;
//		text-shadow: 2px 2px 3px black;
	}

	th {
		color: cyan;
		text-transform: uppercase; 
//		text-shadow: 0 0 3px deeppink, 0 0 6px deeppink, 0 0 12px deeppink, 0 0 24 deeppink;
	}

	td {
		color: $sr2-fg;
		clip-path: none;
	}

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

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

	td.combatant-actions {
	}

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

	.sr2-button {
		@include button;
		width: 24px;
		height: 24px;


		img {
			position: relative;
			bottom: 3px;
			width: 16px;
			height: 16px;
		}

		&:disabled {
			box-shadow: none;
			border-color: darkcyan;

			img {
				filter: invert(6%) sepia(93%) saturate(7363%) hue-rotate(2deg) brightness(80%) contrast(105%);
			}

		}
	}

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

	.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;
			width: 24px;
			height: 24px;
			margin: 4px;

			img {
				position: relative;
				bottom: 3px;
				width: 16px;
				height: 16px;
			}
		}
	}


}

.max-ini {
	font-weight: bold;
//	filter: brightness(1.1);
	text-shadow: 0 0 1px deeppink, 0 0 2 hotpink;
}

.zero-ini td {
	color: #990052 !important;
}

.ko-or-dead {
	background-color: rgba(0, 0, 0, .5);

	td {
		color:maroon !important;
		text-decoration: line-through;

		img {
			filter: invert(14%) sepia(45%) saturate(4680%) hue-rotate(350deg) brightness(85%) contrast(123%) !important;
		}
	}

}

.badge.bg-warning {
	background: radial-gradient(circle at center, cyan, darkcyan);

	left: 12px;
	bottom: -4px;
	width: 20px;
}

.badge.bg-danger {
	background: radial-gradient(circle at center, deeppink, maroon);

	left: 12px;
	top: 12px;
	width: 20px;
}

.damage-dropdown, .actions-dropdown {
	display: inline-block;
}

.damage-monitor, .actions-menu {
	position: absolute;
	z-index: 200;

	top: calc(100% - 2px);
	right: 10px;

	@include aug;
	@include border;
	--aug-inlay-bg: rgba(0, 0, 0, .5);
	--aug-border-opacity: .75;

	padding-top: 10px;
	padding-bottom: 10px;
}

.damage-monitor {
	button {
		font-size: smaller;
		width: 24px;
		height: 24px;

		border: none;
		margin: 0px 2px;
		border-radius: 0;

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

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

	.damage-stun.active {
		background: radial-gradient(circle at center, lightcyan, cyan);
		box-shadow: 0 0 3px lightcyan, 0 0 6px cyan, 0 0 12px darkcyan;
	}

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

		&:focus-visible {
			outline: deeppink !important;
		}
	}

	.damage-physical.active {
		background: radial-gradient(circle at center, lightpink, deeppink);
		box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
	}

	td button img {
		position: relative;
		top: -2px;
	}

/*	&.d-none {
		transform: translateY(100%); 
	}

	&:not(.d-none) {
		transform: translateY(0);; 
		transition: transform .4s; 
	}
*/
}



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

footer {
	@include aug;
	@include inlay;
	--aug-tl: 10px;
	--aug-tr: 10px;
	--aug-border-bg: cyan !important; // "sr2-border doesn't work"
	--aug-border-opacity: .5 !important;
	--aug-border-all: 2px !important;
	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;

	p {
		font-size: xx-small;
		margin: .25rem;
		color: cyan;
		user-select: auto;

		a {
			color: hotpink;
			text-decoration: none;
		}
	}

}


.sr2-modal {
	@include border;
	@include aug;
	color: cyan;
	pointer-events: auto;

	button {
		@include button;
	}

	.modal-header {
		text-transform: uppercase;
		border-bottom: none;
		@include inlay;
		@include border;
		--aug-inlay-bottom: 0;

		button {
			width: 30px;
		}
	}

	.modal-body {
		@include inlay;
		@include border;
		--aug-inlay-y: 0;
	}

	.modal-footer {
		border-top: none;
		@include inlay;
		@include border;
		--aug-inlay-top: 0;

		button {
			width: 4rem;
		}
	}

	label {
		margin: 0;
	}

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

		input {
			order: 1;
		}

	}

	input {
		background-color: transparent;
		color: deeppink;
		user-select: text;

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

		&:focus-visible {
			background-color: transparent;
			color: deeppink;
		}

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

	 	&:invalid {
	 		border: 1px solid deeppink;
			box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
			background-image: none !important;
	 	}

		&[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;
			width: 91%;
			margin-left: calc(4.5% - 2px);

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

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

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

	 		&#combatant-modal-stun {

		 		&::-moz-range-track {
		 			background-color: darkcyan;
		 		}

	 			&::-moz-range-thumb {
		 			background-color: cyan;
		 		}
	 		}

 	 		&#combatant-modal-physical {

		 		&::-moz-range-track {
		 			background-color: maroon;
		 		}

 	 			&::-moz-range-thumb {
	 				background-color: deeppink;
	 			}
	 		}
	 	}
	}

 	span.input-group-text {
 		color: deeppink;
 		background-color: transparent;
 		border: none;
 	}

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



/*

th span{
    position: absolute;
    display: block;
}
th span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,darkcyan);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
th span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,darkcyan);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
th span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,darkcyan);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}


th span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,darkcyan);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}*/