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

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

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

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

@mixin button() {
	border: 0;
	border-radius: none;;
	background: radial-gradient(circle at center, gold, goldenrod);
	box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod;
}

html, 
body {
	margin: 0;
	height: 100%;
//	overflow-x: hidden;
}

body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/circuit_board_by_xxaries1970xx_d9ut9nd.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: darkslategray;
	font-family: 'Electrolize', sans-serif !important;

}

header.navbar {
	@include border;
	--aug-br: 10px;
	--aug-tl: 10px;
	--aug-inlay-bg: rgba(0, 0, 0, .3);
}

span.navbar-brand {
//	position: absolute;
//	right: 110px;
//	color: $sr2-fg;
//	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

div.container {
	position: relative;
}

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

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

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

	.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;
		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;
	}

	> tbody > tr > td > button,
	> tbody > tr > td > div > button, {
		padding: 0px;
		padding-right: 2px;
		padding-left: 2px;

		@include button;

		img {
			width: 20px;
			height: 20px;
//			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%) drop-shadow(1 1 1px cyan) drop-shadow(2 2 2px darkcyan);
	//		animation: glitch 1s ease infinite;
		}

	/*	@keyframes glitch {
			// twitch
			0%, 33% {
			    transform: scale(.97, 1.01); 
			}
			18%, 60% {
			    transform: scaleX(.98), 
			}
			48%, 76% {
				transform: scaleY(1.02); 
			}
			68%, 100% {
				transform: scale(1, .96); 
			}

			// skew
			20%, 75% {
			    transform: skew(2deg);
			}
			12%,80%{
				transform: skew(1.4deg);
			}
		}

		&:nth-of-type(2) img {
			animation-direction: reverse;
		}
	*/
	}
}

.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);
}

.ko-or-dead {
	color: coral;
	text-decoration: line-through;
	background-color: darkslategray;
}

.max-ini {
	font-weight: bold;
}

.zero-ini td {
	color: lightgray !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 {
	display: inline-block;
}

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

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

	@include aug;

	--aug-inlay-bg: rgba(0, 0, 0, .5);

	--aug-border-all: 2px;
	--aug-border-bg: cyan; // "sr2-border doesn't work"
	--aug-border-opacity: .75;

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

	button {

		font-size: smaller;
		width: 24px;
		height: 24px;

		border: none;
		margin: 0px 2px;
		border-radius: 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;
	}

	.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;
	}

	.remove-button {
		width: 56px;
		height: 28px;
		margin-top: 4px;
		@include button;
//		background: radial-gradient(circle at center, gold, goldenrod);
//		box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod;
	}

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

}

/*
.damage-monitor.d-none {
	opacity: 0;
	animation-name: dmg-mon;
	animation-duration: 1s;
	animation-direction: reverse;
}

.damage-monitor:not(.d-none) {
	opacity: 1;
	animation-name: dmg-mon;
	animation-duration: 1s;
	animation-direction: normal;
}

@keyframes dmg-mon {
	from { 
		opacity: 0;
	}
	1% {
		opacity: 0;
	}
	100% { 
		opacity: 1;
	}
}
*/
footer {
	z-index: -10 !important;

	p {
		font-size: x-small;
		margin-bottom: .5rem;
	}

	hr {
		margin: .5rem 0;
	}
}

input:invalid {
	border: 2px solid red;
}


/*
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%;
    }
}*/