/* Colors & Typography */

:root {
	--item-bg: #222;
	--corner-roundness: 0.8em;
	--bar-text-padding: 0.3em;
	--pending-bar-opacity: 0.7;
	--channel-size: 2em;

	margin: auto;
	font-size: 1.3em;
	padding: 0 0.5em 5em 0.5em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Noto Sans, Helvetica, Arial, sans-serif;
	font-variant-emoji: text;
}

:link, :visited {
	color:black;
}


.us {
	 --background: orange;
	 --text: black
}
.them {
	 --background: black;
	 --text: white;
}

/* Details */

details[open] {
	 padding: 1rem;
}

details[open] summary {
	margin: -0.5rem 0 0.5em;
	border-bottom: solid 1px;
	font: inherit;
	font-weight: bold;
	font-variant: small-caps;
}

/* Console Styling */

#console[open] {
	background: black;
	color: white;
}

#console label {
	font-size: smaller;
	font-variant: small-caps;
}

input, textarea {
	background: #333;
	color: white;
	border: solid 1px;
}
button {
	background: white;
	color: black;
	border: solid 3px white;
	border-radius: 10em;
}
#console > :not(summary) {
	 display: block;
	 margin: 1em 0;
	 border: none;
	 padding: 0;
}

/* Horizontal Layout */
#console :is(nav, fieldset) {
	 display: flex;
}
#console fieldset label {
	display: flex;
}
#console :is(fieldset, nav) :is(input, label) {
	 flex: 1;
}
#console :is(fieldset, nav) input {
	margin: 0 1em;
	text-align: center;
}

/* Onchain Activity */

#onchain_activity[open] summary {
	color: orange;
}

#chain_activity {
	padding: 0;
}
#chain_activity > li {
	list-style: none;
	border: solid orange;
	border-width: 2px 0.5em;
	margin: -2px 0 0;
	padding: 0.5rem 1rem;
}
#chain_activity > li:nth-child(odd) {
	background: #0001;
}
#chain_activity h3 {
	margin: 0 0 0.5rem;
	font: inherit;
	font-size: smaller;
	font-variant: small-caps;
}
#chain_activity ul {
	list-style: none;
	font-weight: bold;
}

/* Balance Graphs */


#all-channels {
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 0;
}
.channel {
	display: grid;
	grid-template-columns: auto 1fr 1fr auto;
	margin: 0.7em 0;
	text-align: center;
	font-size: var(--channel-size, 1em);
}

.node {
	position: relative;
	width: 2em;
	height: 2em;
	color: var(--text);
	display: grid;
	place-content: center;
	margin: 0 0.4em;
}

.node::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: inherit;
	height: inherit;
	transform-origin: center;
	transform:rotate(45deg);

	background: var(--background);
}

.pending.bar {
	 opacity: var(--pending-bar-opacity, 0.7);
}

.bar.us {
	display: grid;
	grid-template-columns: 1fr auto;
}
.bar.them {
	display: grid;
	grid-template-columns: auto 1fr;
}

.bar::before,
.bar::after {
	background: var(--background);
	width:0.5em;
	height:100%;
}
.bar.us::after {
	content: "";
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
.bar.them::before {
	content: "";
	clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.text {
	display: grid;
	place-content: center;
	color: var(--text);
	background: var(--background);
}
.us .text {
	padding-left: var(--bar-text-padding);
	border-radius: var(--corner-roundness) 0 0 var(--corner-roundness);
	margin-right: -0.5px;
}
.them .text {
	padding-right: var(--bar-text-padding);
	border-radius: 0 var(--corner-roundness) var(--corner-roundness) 0;
	margin-left: -0.5px;
}