$fg: deeppink;
$fg-bright: lightpink;
$fg-dark: #b3005f;

$bg: cyan;
$bg-bright: lightcyan;
$bg-dark: darkcyan;

@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-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; // variables don't work in this specific instance
	--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 $bg;
	background: transparent;
	box-shadow: 0 0 2px $bg-bright, 0 0 4px $bg, 0 0 8px $bg-dark;

	color: $fg;
}

.icon {
	fill: $fg; 
	width: 128;
	height: 128;
}

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

html, 
body {
	margin: 0;
	height: 100%;
	user-select: none;
	font-family: 'Electrolize', sans-serif;
	overflow-x: hidden;
}
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;

}

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

header.navbar {
	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);

	.navbar-brand {
		color: $bg;
		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;
			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
		}

	}
}

.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; 
		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-right: 0px;
		--aug-border-bottom: 0px;
		background: none !important;
	}

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

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

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

	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;
		width: 24px;
		height: 24px;
		margin-left: 3px;
		margin-right: 3px;


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

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

			.icon { fill: $fg-dark;	}

		}
	}

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

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

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


}

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

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

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

.badge.bg-danger {
	background: radial-gradient(circle at center, $fg, $fg-dark);

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

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

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

//	right: calc(-100vw);
//	transition: transform .25s ease-in-out;
	opacity: 0;
	right: 10px;
	transition: opacity .25s ease-in-out;
}

.seen {
//	transform: translateX(-100vw);
	opacity: 1;
}

/*.actions-button, .damage-button {
	transition: all .25s ease-in-out;
}

.actions-button:has(+ .seen),
.damage-button:has(+ .seen) {
	outline: none;
	border: 1px solid $bg !important;
	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
	filter: brightness(1.5);
} */

.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, $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 {
		border-radius: 50%;;
		background: radial-gradient(circle at center, $fg, $fg-dark);
		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;
	}

/*	&.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; // vars don't work here
	--aug-border-opacity: .5 !important;
	--aug-border-all: 2px !important;
	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
	height: 2.5em;

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

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

}


.sr2-modal {
	@include border;
	@include aug;
	color: $bg;
	pointer-events: auto;
//	width: 95vw; // 95 percent of viewport width

	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: $fg;
		user-select: text;

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

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

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

	 	&:invalid {
	 		border: 1px solid $fg;
			box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
			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;
	 		}
	 	}
	}

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

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




/*

th span{
    position: absolute;
    display: block;
}
th span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,$bg-dark);
    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,$bg-dark);
    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,$bg-dark);
    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,$bg-dark);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}*/