@charset "utf-8";

@font-face {
	font-family: "Atkinson";
	src: url("../fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

html { font-size: 100%; }
body { font-family: "Inter" !important; }

:root {
	--bg-color: #303030;
	--card-bg-color: #424242;
	--card-content-bg-color: #484848;
	--card-header-bg-color: #404040;
	--window-header-bg-color: #606060;

	--disabled-card-color: rgba(10, 10, 10, 0.6);
	--primary-color: #58a5b3;
	--highlighted-primary-color: #79b7c2;
	--disabled-primary-color: #3d737d;

	--positive-color: #4caf50;
	--negative-color: #f6685e;

	--error-box-color:#FFB6B6;
	--error-box-text: #000000;

	--warning-box-color:#FFC107;
	--warning-box-text: #000000;

	--highlighted-negative-color: #f77f76;
	--warning-color: #FFC107;
	--negative-dim-color: rgba(246, 104, 94, 0.5);

	--text-color: #ffffff;
	--subtitle-text-color: rgba(255, 255, 255, 0.7);
	--disabled-text-color: rgba(255, 255, 255, 0.5);
	--disabled-negative-text-color: rgba(246, 104, 94, 0.5);
	--unimportant-text-color: rgba(255, 255, 255, 0.2);
	--importance-box-color: rgba(109, 109, 109);
	--dim-text-color: rgba(255, 255, 255, 0.8);
	--alpha-005: rgba(255, 255, 255, 0.05);
	--alpha-015: rgba(255, 255, 255, 0.15);

	--big-font-size: 28px;
	--normal-font-size: 14px;
	--modal-background-color: rgba(10, 10, 10, .7)
}

* {
    color-scheme: dark;
}

:where(svg[role=img], figure > svg, figure > img) { display: block }

data {
	font: normal 1em "Inter";
	font-feature-settings: 'zero' 1, 'ss01' 1;
}

/* Utility */
.relative { position: relative }

button:where(:not(.btn)) {
	font-family: "Inter";
	background-color: var(--primary-color);
}

button:where(:not(.btn)):hover {
	background-color: var(--highlighted-primary-color);
}

button:not(.btn):disabled, button:not(.btn)[disabled] {
	background-color: var(--disabled-primary-color);
	border-color: transparent;
}

svg[role="img"] {
	display: block;
}

.form-control {
	display: grid;
	grid-template-columns: 1em auto;
	gap: 0.5em;
	color: var(--text-color);
	font-size: 0.8em;
}

input[type=checkbox]:not([role=switch]) {
	appearance: none;
	background-color: #fff;
	margin: 0;
	font-size: 1.2em;
	color: black;
	place-content: center;
	width: 1.15em;
	height: 1.15em;
	display: grid;
	border-radius: 3px;
	background-color: var(--unimportant-text-color);
	border: 1px solid black;
}

input[type=checkbox]:not([role=switch])::before {
	content: '✔';
	place-content: center;
	display: flex;
	margin-bottom: 2;
	color: black;
	line-height: 1.15em;
	width: 1.15em;
	height: 1.15em;
	transform: scale(0);
	border-radius: 3px;
	transition: 120ms transform ease-in-out;
	background-color: var(--primary-color);
	border: 1px solid black;
}

input[type=checkbox]:not([role=switch]):checked::before {
	transform: scale(1.0);
}

.preact-hint {
	position: fixed;
	z-index: 9999;
	cursor: default;
	border: 1px solid white;
	background-color: var(--card-bg-color);
	max-width: 100%;
	font-size: 0.75rem;
}

.preact-hint__content {
	padding: 2px;
	border-radius: 1px;
	color: var(--text-color);
	display: block;
	white-space: normal;
	max-width: 100%;
	word-break: break-word;
	font-size: 0.75rem;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.nopointer {
	pointer-events: none;
}

.unsetcursor {
	cursor: unset
}

.title {
	overflow: hidden;
	color: var(--text-color);
	white-space: unset;
	line-height: 1.3em;
}

.paragraph, .small-address-container {
	color: var(--text-color);
	font-size: 14px;
}

.card-header-title {
	color: var(--text-color);
}

.subtitle {
	white-space: nowrap;
	overflow: hidden;
	color: var(--subtitle-text-color);
}

html, body {
	height: fit-content
}

.input::placeholder {
	color: var(--disabled-text-color)
}

.media.media {
	border-top: unset;
	padding-top: unset;
}
.card .media:not(:last-child) {
	margin-bottom: unset;
}

.hoverable:hover {
	background-color: var(--highlighted-primary-color)
}

.input {
	background: rgba(0, 0, 0, 0);
	color: var(--text-color);
	padding: 0px;
	height: unset;
	border: unset;
	border-radius: unset;
	border-bottom: 2px solid white;
	box-shadow: none;
	font-size: 13px;
	font-family: 'Inter';
}

.input:hover {
	border: unset;
	border-bottom: 2px solid var(--highlighted-primary-color);
	box-shadow: none;
}

.input:focus {
	border: unset;
	border-radius: unset;
	border-bottom: 2px solid var(--primary-color);
	box-shadow: none;
 }

.input:not([type='checkbox']):disabled, input:not([type='checkbox'])[disabled] {
	border-bottom: unset
}

.button.is-focused:not(:active), .button:focus:not(:active) {
	box-shadow: none;
}
.modal-background {
	background-color: var(--modal-background-color);
}

.interceptor-modal-head {
	padding: 0px;
	background-color: var(--card-bg-color);
	border-top-left-radius: unset;
	border-top-right-radius: unset;
	border-bottom: unset;
}

.modal-card {
	max-width: 90%;
}

.modal-card-body {
	background-color: var(--bg-color);
	padding: 0px;
}

li {
	margin: 10px;
}

.card {
	background-color: var(--card-bg-color);
	box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}

.card-content {
	padding: 10px;
	background-color: var(--card-content-bg-color);
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
	border-left: 2px solid var(--card-bg-color);
	border-right: 2px solid var(--card-bg-color);
	border-bottom: 2px solid var(--card-bg-color);
}

.card-header {
	column-gap: 1rem;
	background-color: var(--card-header-bg-color);
}

.card-header.window-header {
	background-color: var(--window-header-bg-color);
}

.window-header {
	background-color: var(--window-header-bg-color);
}
.modal-card-foot.window-header {
	background-color: var(--window-header-bg-color);
}

.window-footer {
	background-color: var(--window-header-bg-color);
	display: block;
}

.h1 {
	color: var(--text-color);
}

.h2 {
	color: var(--text-color);
}

.vertical-center {
	display: inline-block;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	vertical-align: middle;
}

.token-box {
	padding: 4px;
	background-color: var(--highlighted-primary-color);
	box-shadow: unset;
	margin-bottom: 5px;
	margin-top: 5px;
}

.content p:not(:last-child), .content dl:not(:last-child), .content ol:not(:last-child), .content ul:not(:last-child), .content blockquote:not(:last-child), .content pre:not(:last-child) {
	margin-bottom: 10px;
}

.content p:not(:last-child), .content table:not(:last-child) {
	margin-bottom: 0px;
}

.tokentext {
	margin-bottom: 0px;
}

.log-column {
	padding-right: 5px;
	padding-left: 5px;
}

.positive-box {
	background-color: var(--positive-color);
	color: var(--text-color);
}

.negative-box {
	background-color: var(--negative-color);
	color: var(--text-color);
}

.importance-box-content {
	overflow-y: hidden;
	margin-bottom: 0px;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

.button.is-reveal:after {
	content: '';
	border-style: solid;
	border-width: 2px 2px 0 0;
	display: inline-block;
	height: 0.6em;
	width: 0.6em;
	position: relative;
	top: 6%;
	transform: rotate(135deg);
	transform-origin: 66% 33%;
	transition: transform 150ms;
	flex-shrink: 0;
}

.dropdown.is-active > .dropdown-trigger > button:after {
	transform: rotate(-45deg);
}

.dropdown-trigger > button.is-danger:before {
	content: '!';
	width: 1.1em;
	height: 1.1em;
	font-size: 0.9em;
	background: white;
	color: var(--negative-color);
	flex: 0 0 auto;
	align-items: center;
	display: flex;
	justify-content: center;
	border-radius: 100%;
}

.dropdown-content {
	background-color: var(--card-content-bg-color);
	box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
	position: absolute;
	z-index: 20;
}

.dropdown-item {
	color: var(--text-color);
	background: transparent;
	border: initial;
	cursor: pointer;
}

a.dropdown-item.is-active, button.dropdown-item.is-active {
	background-color: var(--primary-color);
}

.card-header-icon {
	background-color: transparent;
	color: var(--text-color);

	.icon:has(svg[aria-label=chevron-icon]) {
		width: 1rem;
		height: 1rem;
		transition: transform 200ms;

		.card-header:has(+ .card-content) & {
			transform: rotateX(180deg);
		}
	}
}

.card-header-icon:disabled {
	cursor: not-allowed;
	background-color: transparent;
	color: var(--disabled-text-color);
}

.unset-cursor {
	cursor: unset
}

svg.spinner {
	animation: 2s linear infinite svg-animation;
	max-width: 100px;
}

@keyframes svg-animation {
	0% { transform: rotateZ(0deg); }
	100% { transform: rotateZ(360deg); }
}

svg.spinner > circle {
	animation: 1.4s ease-in-out infinite both circle-animation;
	display: block;
	fill: transparent;
	stroke: var(--primary-color);
	stroke-linecap: round;
	stroke-dasharray: 283;
	stroke-dashoffset: 280;
	stroke-width: 10px;
	transform-origin: 50% 50%;
}

@keyframes circle-animation {
	0%,
	25% { stroke-dashoffset: 280; transform: rotate(0); }
	50%,
	75% { stroke-dashoffset: 75; transform: rotate(45deg); }
	100% { stroke-dashoffset: 280; transform: rotate(360deg); }
}

.center-to-page {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Scrollbar */

:root {
	scrollbar-color: var(--window-header-bg-color) var(--card-bg-color) !important;
}

::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
	background-color: var(--card-bg-color);
}

::-webkit-scrollbar-thumb {
	background-color: var(--window-header-bg-color);
	background-clip: padding-box;
	border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgb(112, 112, 112);
}

::-webkit-scrollbar-thumb:active {
	background-color: var(--window-header-bg-color);
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
	background-color: var(--card-bg-color);

	display: block;
	background-size: 10px;
	background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
	height: 12px;
	width: 16px;
	background-position: center 4px;
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--card-content-bg-color)'><polygon points = '50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'rgb(112, 112, 112)'><polygon points = '50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--window-header-bg-color)'><polygon points = '50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
	height: 12px;
	width: 16px;
	background-position: center 2px;
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--card-content-bg-color)'><polygon points = '0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'rgb(112, 112, 112)'><polygon points = '0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--window-header-bg-color)'><polygon points = '0,0 100,0 50,50'/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
	height: 12px;
	width: 12px;
	background-position: 3px 3px;
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--card-content-bg-color)'><polygon points = '0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'rgb(112, 112, 112)'><polygon points = '0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--window-header-bg-color)'><polygon points = '0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
	height: 12px;
	width: 12px;
	background-position: 3px 3px;
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--card-content-bg-color)'><polygon points = '0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'rgb(112, 112, 112)'><polygon points = '0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns = 'http://www.w3.org/2000/svg' width = '100' height = '100' fill = 'var(--window-header-bg-color)'><polygon points = '0,0 0,100 50,50'/></svg>");
}

.ens-table {
	display: grid;
	grid-template-columns: max-content;
	grid-auto-columns: auto;
	grid-auto-flow: column;
	width: 100%;
}

.log-table {
	display: grid;
	grid-template-columns: max-content auto auto auto auto;
	width: 100%;
	gap: 0.45ch;
}

.log-table-4 {
	display: grid;
	grid-template-columns: max-content auto auto auto;
	width: 100%;
	gap: 0.45ch;
}
.log-table-3 {
	display: grid;
	grid-template-columns: max-content auto auto;
	width: 100%;
	gap: 0.45ch;
}
.log-table-1 {
	display: grid;
	grid-template-columns: auto;
	width: 100%;
	gap: 0.45ch;
}

.nontoken-log-table {
	display: grid;
	grid-template-columns: auto auto auto;
	width: 100%;
}

.log-cell {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	vertical-align: middle;
}

.log-cell-flexless {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	vertical-align: middle;
}

.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
}

.menu-list.a {
	color: var(--text-color);
}

.addressbook-input {
	max-width: unset;
	width: unset;
}

.big-address-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.big-address-container::after {
	content: attr(data-value);
	display: block;
	visibility: hidden;
	height: 0px;
}

.big-address-container:hover > .address-text-holder > .rename-address-button {
	display: flex;
}

.small-address-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0 0.2em;
}

.small-address-container::after {
	content: attr(data-value);
	display: block;
	visibility: hidden;
	height: 0px;
	padding-left: 39px;
}

.rename-address-button {
	display: none;
	flex-shrink: 0;
	margin-left: 5px;
	height: 18px;
}

.small-address-container:hover > .address-text-holder > .small-address-baggage-tag > .rename-address-button {
	display: flex;
}

.address-text-holder {
	display: flex;
	flex-direction: row;
	width: 0;
	min-width: 100%;
}

.address-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.small-address-baggage-tag {
	display: flex;
	flex-direction: row;
	position: relative;
	background-color: var(--alpha-005);
	padding-right: 10px;
	border-radius: 10px 40px 40px 10px;
	overflow: hidden;
}

.breadcrumb ul, .breadcrumb ol {
	align-items: center;
}

.breadcrumb li + li::before {
	margin-left: 0px;
	margin-right: 0px;
}

.button.is-primary:focus:not(:active) {
	box-shadow: unset
}

.button-overflow {
	overflow: hidden;
	white-space: nowrap;
	display: block;
	text-overflow: ellipsis;
}

.checkbox-text {
	padding-left: 0.2em;
}

.transaction-importance-box {
	background-color: var(--importance-box-color);
	padding: 10px;
	margin: auto;
	margin-bottom: 10px;
	max-width: fit-content;
	color: var(--text-color)
}

.notification-importance-box {
	background-color: var(--importance-box-color);
	padding: 10px;
	margin: auto;
	margin-bottom: 10px;
	max-width: fit-content;
	color: var(--text-color)
}

.swap-box {
	background-color: var(--alpha-005);
	box-shadow: unset;
	margin-bottom: 0px;
	display: grid;
	padding: 10px;
}

.swap-grid {
	grid-template-columns: auto auto;
	display: grid;
	place-content: space-between;
	column-gap: 0.25em;
}

.swap-grid-1 {
	grid-template-columns: auto;
	display: grid;
}

.textbox {
	background-color: var(--alpha-005);
	padding: 5px;
	word-break: break-all;
	white-space: pre-wrap;
	border-radius: 4px;
}

.dialog-button-left {
	flex-grow: 1;
	margin-left: 10px;
	margin-right: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.dialog-button-right {
	flex-grow: 1;
	margin-left: 5px;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.eip-712-table {
	display: grid;
	grid-template-columns: max-content auto auto auto auto;
	justify-content: center;
	column-gap: 5px;
	grid-template-columns: auto auto;
	background-color: var(--alpha-005);
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
}

.popup-block {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: fixed;
	width: 100%
}

.popup-block-scroll {
	overflow-y: auto;
	padding: 10px;
}

.popup-button-row {
	display: flex;
	justify-content: space-around;
	width: 100%;
	flex-direction: column;
	padding-bottom: 10px;
	padding-top: 10px;
	border-radius: 10px 10px 0 0;
}

.popup-contents {
	display: flex;
	justify-content:
	space-between;
	height: 100%;
	flex-direction: column;
}

.blur {
	filter: blur(3px);
}

.blink {
	animation: blinker 1s linear infinite;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

.token-name-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.token-name-container::after {
	content: attr(data-value);
	display: block;
	visibility: hidden;
	height: 0px;
	padding-left: 27px;
	font-size: 14px;
}

.rename-token-button {
	display: none;
	flex-shrink: 0;
	margin-left: 5px;
	height: 18px;
}

.token-name-container:hover > .token-name-holder > .rename-token-button {
	display: flex;
}

.token-name-holder {
	display: flex;
	flex-direction: row;
	width: 48px;
	min-width: 100%;
	align-items: center;
}

.token-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.big-token-name-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.big-token-name-container::after {
	content: attr(data-value);
	display: block;
	visibility: hidden;
	height: 0px;
	margin-left: 27px;
	font-size: 28px;
	font-weight: 500
}

.big-token-name-container:hover > .token-name-holder > .rename-token-button {
	display: flex;
}

.big-token-name-container > .token-name-holder {
	justify-content: flex-end;
	align-items: center;
}

.dashed-notification {
	border-style: dashed;
	background: unset;
	border-width: medium;
	border-color: white;
}

.popup-footer {
	position: fixed;
	left: 20px;
	bottom: 0;
	width: 480px;
	height: 40px;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	background-color: var(--window-header-bg-color);
}


/* TODO: remove override once bulma dependency is minimized */
strong { color: inherit }

:where(.btn) {
	--s-justify: var(--btn-justify, center);
	--s-bg: var(--btn-bg-color, gray);
	--s-fg: var(--btn-text-color, var(--text-color));
	--s-size: var(--btn-text-size , 1em);
	--s-outline: var(--btn-outline, none);
	--s-brightness: var(--btn-brightness, 1);
	--s-saturation: var(--btn-saturation, 1);
	--s-contrast: var(--btn-contrast, 1);
	font: inherit;
	outline: none;
	background-color: var(--s-bg);
	color: var(--s-fg, var(--text-color));
	font-size: var(--s-size, inherit);
	filter: saturate(var(--s-saturation)) brightness(var(--s-brightness));
	justify-content: var(--s-justify);
	height: 2.25em;
	padding: 0 0.75em;
	border: var(--s-outline);
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.btn:disabled { cursor: not-allowed; --btn-brightness: 0.6; --btn-saturation: 0.2 }
.btn:not(:disabled):hover { --btn-brightness: 1.25 }
.btn:not(:disabled):focus { --btn-outline: 1px solid var(--s-fg) }

/* Primary Button */
.btn--primary { --btn-bg-color: var(--primary-color) }
.btn--primary:not(:disabled):hover { --btn-saturation: 1.5 }

/* Danger Button */
.btn--destructive { --btn-bg-color: var(--negative-color) }
.btn--destructive:not(:disabled):hover { --btn-saturation: 1.5 }

.btn--outline {
	--btn-bg-color: transparent;
	--btn-outline: 1px solid #ffffff20;
}

.btn--outline:hover:not(:disabled) { --btn-bg-color: #ffffff10 }
.btn--ghost { --btn-bg-color: transparent; }
.btn--ghost:hover:not(:disabled) { --btn-bg-color: #ffffff10; }


:where(.actions:has(.btn), .flex) {
	--gap-x: 0.5rem;
	--justify: end;
	column-gap: var(--gap-x);
	justify-content: var(--justify);
	display: flex;
}

/* Default styles for details element */

details {
	--s-text-size: var(--text-size, 0.85rem);
	--s-base-color: color(srgb .4 .4 .4);
	--s-icon-order: var(--icon-order);
	--s-rule-color: transparent;
	outline: none;
}

summary {
	color: var(--s-base-color);
	font-size: var(--s-text-size);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	outline: none;
}

summary:hover {
	--s-base-color: color( srgb .6 .6 .6);
	--s-rule-color: currentColor;
}

summary:focus {
	--s-base-color: var(--text-color);
}

summary:after {
	content: ' ';
	margin: 0;
	flex-grow: 1;
	border-bottom: 1px solid var(--s-rule-color);
}

summary:where(details[open] > *) {
	--s-rule-color: currentColor;
}

.svg-icon {
	--s-rotate: var(--icon-rotate, 0deg);
	--s-size: var(--icon-size, 1em);
	/* avoid conflicts with other .icon classes */
	all: revert;
	fill: none;
	display: block;
	transition: transform 150ms;
	width: var(--s-size);
	height: var(--s-size);
	transform: rotate(var(--s-rotate));
}

/* Fix svg sub-pixel rendering for icons */
.svg-icon *:where(path, rect) { shape-rendering: geometicprecision }

.svg-icon:where(details:not([open]) .details--arrow) { --icon-rotate: -90deg }

:where(.grid, .flex) {
	--gap-y: 0;
	--gap-x: 0;
	--align-items: center;
	align-items: var(--align-items, center);
	column-gap: var(--gap-x);
}

:where(.grid) {
	--grid-cols: auto;
	display: grid;
	row-gap: var(--gap-y);
	grid-template-columns: var(--grid-cols);
}

:where(.flex) { display: flex }

:where(.grid > *) {
	--area: auto;
	grid-area: var(--area);
}

.brief {
	--grid-cols: 1fr max-content;
	--gap-x: 1rem;
	--hl-color: white;
	background-color: color(srgb .3 .3 .3);
	color: color(srgb .6 .6 .6);
	font-size: var(--text-size, inherit);
	font-weight: var(--font-weight, normal);
	padding: 0.5rem 1em;
	border-radius: 4px;
	margin: 0;
}

.brief strong { color: var(--hl-color) }

.brief .actions > .btn { --s-size: 0.8rem; }

.dialog {
	background: var(--bg-color);
	color: var(--text-color);
	border: 0 none;
	padding: 1em;
	border-radius: 6px;
	width: calc(100vw - 4em);
	max-width: 36em;
}

.dialog header, .dialog footer { display: grid; }

.dialog::backdrop {
	background: #00000090;
	backdrop-filter: blur(1px);
}

.text-input {
	--text-size: 1em;
	--label-color: color(srgb .3 .3 .3);
	--border-color: color(srgb .4 .4 .4);
	--columns: 1fr min-content;
	display: grid;
	grid-template-columns: var(--columns);
	border-bottom: 1px solid var(--border-color);
	align-items: center;
}

.text-input:focus-within { --border-color: white }

.text-input > input {
	font: inherit;
	grid-area: 2 / 1;
	background-color: var(--bg-color, transparent);
	color: var(--text-color);
	outline: none;
	padding: 0.2em 0;
	border: 0 none;
}

/* remove browser autofill styles */
.text-input > input:where(:-internal-autofill-selected, :autofill) {
	background-clip: text;
	-webkit-text-fill-color: var(--text-color, initial);
}

.text-input > input::placeholder { color: transparent; }

.text-input > input:where(:disabled, :read-only) { --text-color: var(--border-color) }
.text-input > input:where(:invalid) { --text-color: var(--negative-color) }

:where(.text-input:has(input) > span) {
	grid-area: 1 / span 2;
	color: var(--label-color);
	transform-origin: bottom left;
	transition: transform 150ms;
	transform: translateY(1.525em);
}

:where(.text-input:focus-within span, .text-input input:not(:placeholder-shown) + span) {
	transform: translateY(0) scale(0.75);
	--label-color: color(srgb .5 .5 .5);
}

.spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.disclosure {
	border: 1px dashed var(--negative-color);
	color: var(--negative-color);
	padding: 1rem;
	border-radius: 6px;
}

.report {
	padding: 0 2rem;
	border-radius: 6px;
	background: #3e3e3e;
	place-content: center;
	justify-items: center;
}

.text-legible {
	font-family: 'Atkinson';
}

.truncate {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
}

.key-value-pair {
	--grid-cols: minmax(min-content, max-content) minmax(50%, 1fr);
	--gap-x: 1rem;
	--gap-y: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.2;
	width: fit-content;
	margin: 0 auto;
}

.key-value-pair > * {
	max-width: 100%;
	min-width: 0;
}

.key-value-pair dt {
	justify-self: end;
	text-align: right;
	color: var(--subtitle-text-color);
}

.key-value-pair dd {
	justify-self: start;
	text-align: left;
	color: white;
}

pre {
	display: inline-block;
	font: inherit;
	font-family: 'Atkinson';
	font-size: 0.875rem;
	line-height: 1.2;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	background-color: var(--alpha-005);
	color: var(--subtitle-text-color);
	word-break: break-all;
	white-space: pre-wrap;
}

fieldset:has([type='radio']) {
	display: flex;
	column-gap: 0.5rem;
}

fieldset label:has([type=radio]) {
	display: flex;
	align-items: center;
	column-gap: 0.3125rem;
	font-size: 0.875rem;
	padding: 0.25rem 0.4375rem;
	border-radius: 0.25rem;
	color: var(--subtitle-text-color);
}

fieldset label:has([type=radio]):focus-within {
	background: #ffffff10;
}

fieldset label:has([type=radio]):before {
	content: '';
	background: transparent;
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 100%;
	outline: 1px solid white;
	outline-offset: 0.1875rem;
	margin: 0.1875rem;
}

fieldset label:has([type=radio]:checked):before {
	background: white;
}

[type=radio]:where(label > *) {
	position: absolute;
	opacity: 0;
}

.view-selector {
	display: grid;
	--grid-cols: 1fr;
	--gap-y: 0.5rem;
	border: 1px solid #ffffff20;
	border-radius: 0.25rem;
	padding: 0.5rem;
	align-items: start;
}

/* Flexy Component */
[class*=flexy] {
	--gx: var(--gap-x, 0);
	--gy: var(--gap-y, 0);
	--px: var(--pad-x, 0);
	--py: var(--pad-y, 0);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gy) var(--gx);
	align-items: center;
	padding: var(--py) var(--px);
}
.flexy-none {
	--gap-x: 0;
	--gap-y: 0;
	--pad-x: 0;
	--pad-y: 0;
}

.flexy-sm {
	--pad-y: 0.5rem;
	--gap-x: 1rem;
}
.flexy-lg {
	--pad-y: 1rem;
	--gap-x: 2rem;
}

/* Layout Component */
:has(> .layout:first-child):not(dialog:not([open])) {
	background: var(--bg-color);
	display: grid;
	grid-template-columns: var(--grid-columns, minmax(1rem,auto) minmax(min-content,800px) minmax(1rem,auto));

	.layout {
		--grid-col: var(--grid-column, 2);
		--line-color: #505050;
		display: grid;
		grid-column: var(--grid-col);
		min-height: 100vh;
		grid-template-rows: min-content 1fr;

		&:has(header + article) {
			grid-template-rows: min-content 1fr;

			> header {
				background-color: var(--bg-color);
				position: sticky;
				top: 0;
				z-index: 10;
			}
		}

		&:is(main > .layout) > header {
			border-bottom: 1px solid var(--line-color);
		}

	}
}

/* Search Component */
form[role='search'] { flex: 1 0 auto }

form[role='search'] fieldset {
	color: var(--text-color);
	display: grid;
	grid-template-columns: min-content auto min-content;
	column-gap: 0.25rem;
	align-items: center;
	border: 1px solid var(--line-color);
	padding: 0.25rem;
	border-radius: 2px;
}

form[role='search'] fieldset:focus-within {
	border-color: var(--text-color);
}

form[role='search'] svg { display: block }

form[role='search'] label {
	padding: 0.25rem;
	color: var(--line-color);
}

form[role='search'] input[type='search'] {
	font: inherit;
	background: transparent;
	outline: none;
	border: 0 none;
	color: var(--text-color);
}

form[role='search'] input[type='search']::-webkit-search-cancel-button { appearance: none }

form[role='search'] input[type='search']:placeholder-shown ~ button { display: none }

form[role='search'] input[type='search'] ~ button {
	font: inherit;
	appearance: none;
	outline: none;
	background: transparent;
	border: 0 none;
	padding: 0.25rem;
	color: var(--disabled-text-color);
}

form[role='search'] input[type='search'] ~ button:focus {
	color: var(--text-color);
	outline: 1px solid;
}

/* Switch Component */
input[role=switch] {
	--bg-color: #922929;
	--checked-bg-color: #378b37;
	appearance: none;
	width: 1.75rem;
	background: var(--bg-color);
	display: block;
	border-radius: 1rem;
	padding: 4px;
	border: 0 none;
	cursor: pointer;
	transition: background 400ms;
	box-shadow: 0 0 1px inset #000000d6;
}

input[role=switch]:focus-visible {
	outline: 1px solid var(--text-color);
	outline-offset: 2px;
}

input[role=switch]:checked {
	background: var(--checked-bg-color);
}

input[role=switch]:before {
	content: '';
	display: block;
	background: white;
	height: 1rem;
	border-radius: 100%;
	width: 1rem;
	border: none;
	transition: transform 200ms;
	transform: scale(1);
	box-shadow: 0 0 3px #000000d6;
}

input[role=switch]:checked:before {
	transform: translateX(0.75rem) scale(1);
}

/* Status Icon */
[class*=status-] {
	--bg-color: transparent;
	--fg-color: var(--disabled-text-color);
	--outline: none;

	color: var(--fg-color);
	background-color: var(--bg-color);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0.25em;
	border-radius: 2px;
	border: var(--outline);
}

.status-warn {
	--bg-color: #F5934B;
	--fg-color: #753100;
}

.status-danger {
	--bg-color: #FF7272;
	--fg-color: #6B2626;
}

.status-outline { --outline: #FF7272 }
.status-lg { font-size: 1.5rem }

/* Customizations */

header:has(form[role='search']) {
	display: flex;
	column-gap: 1rem;
	row-gap: 0.25rem;
	justify-content: space-between;
	flex-wrap: wrap;
	place-content: center;
	padding: 1rem 0;
}

header:has(form[role='search']) h1 {
	color: var(--text-color);
	font-size: 1.5rem;
	flex: 1 0 auto;
}

[role=option]:has([type=radio]) {
	--heading-color: var(--text-color);
	--heading-weight: normal;
	--subheading-color: var(--disabled-text-color);
	margin: 0;
	border-bottom: 1px solid #ffffff10;
	position: relative;
}

[role=option]:has([type=radio]):focus-within,
[role=option]:has([type=radio]):hover {
	background: linear-gradient(to right, transparent 0%, #ffffff08 50%, transparent 100%);
}

[role=option] [type=radio] {
	position: absolute;
	opacity: 0;
}

.access-details {
	position: fixed;
	inset: 0;
	background: var(--bg-color);
	overflow-y: scroll;
	overscroll-behavior: contain;
	z-index: 10;
}

.input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.autosizing-span,
.autosizing-label,
.autosizing-input,
.autosizing-span::before,
.autosizing-label::before,
.autosizing-input::before,
.autosizing-span::after,
.autosizing-label::after,
.autosizing-input::after {
	box-sizing: border-box;
}
.autosizing-span {
	/* we want our input box to be able to shrink, even if it has no spaces */
	box-sizing: border-box;
	line-break: anywhere;
}
.autosizing-input:focus-within {
	outline-color: var(--negative-color);
}
.autosizing-span,
.autosizing-label {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	column-gap: 0.25em;
}
.autosizing-label {
	min-width: 100%;
	font: inherit;
}
.autosizing-span::after,
.autosizing-label::after,
.autosizing-input {
	width: 100%;
	min-width: 0;
	font: inherit;
	padding: 0px;
	margin: 0;
	resize: none;
	background: none;
	border: none;
	color: var(--text-color);
}
.autosizing-span::after,
.autosizing-label::after {
	content: attr(data-value);
	visibility: hidden;
	white-space: pre-wrap;
	height: 0;
	padding-inline: 2px;
}
.autosizing-label .autosizing-input:invalid {
	outline-color: var(--negative-color);
}
.autosizing-input:focus {
	outline: none;
}
[list]::-webkit-calendar-picker-indicator {
	display: none !important;
}

.inline-card {
	--bg-color: transparent;
	--button-color: #77738ccc;
	--button-color-hilite: white;
	--bg-inline-padding: 4px;
	--bg-block-padding: 1px;
	--image-size: 1em;
	--text-size: 1em;
	--min-text-width: calc(var(--text-size) * 2.5);

	font: inherit;
	display: inline-grid;
	align-items: baseline;
	grid-template-columns: minmax(0, min-content) [start] minmax(0, min-content) [copy] minmax(0, min-content) [end] minmax(0, min-content);
	grid-template-rows: [start] min-content [end];

	margin-block: 1px;
	padding-block: var(--bg-block-padding);
	background: var(--bg-status-color, var(--bg-color));
	border-radius: 0.15em;
	min-width: calc(var(--image-size) + var(--min-text-width) + (var(--bg-inline-padding) * 2));

	> data { min-width: var(--min-text-width) }

	data {
		line-height: 1em;
		color: var(--text-color);
		padding-inline: 0.25em;
		padding-right: 0px;
		text-align: center;
		pointer-events: none;
	}

	svg, img { font-size: var(--image-size); }

	[role=img] :only-child {
		display: inline-block;
		vertical-align: -0.15em;
		font-size: var(--text-size);

		&:is(img) {
			aspect-ratio: 1;
			max-width: var(--image-size);
		}
	}

	> [role=img] {
		grid-area: start / start / end / copy;
		:focus-within > &, :hover > & { opacity: 0 }
	}

	> data {
		grid-area: start / copy / end / end;
		font-size: var(--text-size);
		:focus-within > &, :hover > & { opacity: 0 }
	}

	> [role=menu] {
		background: var(--bg-status-color, var(--bg-color));
		display: inline-grid;
		grid-area: start / start / end / end;
		grid-template-columns: minmax(0, max-content) max-content;
		align-items: baseline;

		opacity: 0;
		:hover > &, :focus-within > & { opacity: 1 }

		> button {
			font: inherit;
			appearance: none;
			background: transparent;
			padding: 0;
			border: 0 none;
			outline: none;

			display: grid;
			grid-template-columns: minmax(0, min-content) 1fr min-content;
			align-items: baseline;
			cursor: pointer;
			pointer-events: all;

			&:is(button + *) { margin-left: 0.25em }

			> :has(data) {
				overflow: hidden;
				font-size: var(--text-size);
			}

			> :has(svg):has(span) {
				font-size: 0.9em;
				background: var(--button-color);
				color: var(--text-color);
				border: 0 none;
				border-radius: 3px;
				padding: 0 0.25em;
				vertical-align: text-bottom;

				svg {
					display: inline-block;
					vertical-align: -0.125em;
				}

				span {
					display: none;
					text-transform: uppercase;
					font-weight: bold;
					font-size: 0.8em;
					vertical-align: 0.05em;
				}

				&:is(:is(:hover,:focus) > *) {
					color: black;
					background: var(--button-color-hilite);
					outline: none;

					&:is([aria-label="Spell-out actions"] *) {
						svg { display: none }
						span { display: inline-block }
					}
				}
			}
		}
	}

	&:has([role=alert]) {
		--bg-status-color: #c05858; /* dark red */
		min-width: calc(var(--image-size) + var(--min-text-width) + (var(--bg-inline-padding) * 2) + 4ch);

	}

	[role=alert] {
		color: #e6cb1f; /* bright yellow */
		cursor: pointer;

		&:has(+ *) { margin-right: 0.25em }
		&:is(* + [role=alert]) { margin-left: 0.25em }
	}
}

.multiline-card {
	--bg-color: transparent;
	--button-color: #77738ccc;
	--image-size: 2.25rem;
	--min-text-width: 0;
	--pad-x: 0;
	--pad-y: 0;
	--gap-x: 0.5rem;
	--gap-y: 0.0625rem;
	--edge-roundness: 3px;

	font: inherit;
	display: inline-grid;
	grid-template-columns: [left] minmax(0, min-content) [data] minmax(0, max-content) [right];
	grid-template-rows: [top] min-content [sub] min-content [bottom];
	column-gap: var(--gap-x);
	row-gap: var(--gap-y);
	padding-block: var(--pad-y);
	padding-inline: var(--pad-x);
	background-color: var(--bg-color);
	border-radius: var(--edge-roundness);
	min-width: calc(var(--min-text-width) + var(--image-size) + (var(--pad-x) * 2) + var(--gap-x));

	data {
		line-height: 1em;
		color: var(--text-color);
		text-align: left;
		min-width: var(--min-text-width);
	}

	button {
		font: inherit;
		background: var(--bg-color);
		border: 0 none;
		padding: 0;

		&:not(:disabled) { cursor: pointer }
		&:hover, &:focus { background: var(--bg-color) }
	}

	> [role=img] {
		grid-area: top / left / bottom / data;
		align-self: center;
		font-size: var(--image-size);
		line-height: 1;

		& svg, img {
			display: inline-block;
			vertical-align: -0.15em;
		}
	}

	> :has(data ~ button) {
		display: inline-grid;
		align-items: baseline;
		grid-template-columns: [left] minmax(0, min-content) [right];
		grid-template-rows: [top] min-content [bottom];

		/* title */
		&:nth-of-type(2) {
			grid-area: top / data / sub / right;
			data {
				font-weight: 600;
			}
		}

		/* subtitle */
		&:nth-of-type(3) {
			grid-area: sub / data / bottom / right;
			data {
				font-size: 0.825em;
				color: var(--disabled-text-color);
			}
		}

		> data {
			grid-area: top / left / bottom / right;

			&:not(:has(+:disabled)) {
				.multiline-card:hover &, .multiline-card:focus-within & { visibility: hidden }
			}
		}

		> button {
			grid-area: top / left / bottom / right;
			display: inline-grid;
			align-items: baseline;
			grid-template-columns: minmax(0, 1fr) min-content;
			background-color: var(--bg-color);
			outline: none;
			position: relative;
			visibility: hidden;

			&:not(:disabled) {
				.multiline-card:hover &, .multiline-card:focus-within & { visibility: visible }
			}

			&:hover, &:focus {
				> span {
					background: white;
					color: black;

					span { display: inline }
					svg { display: none }
				}
			}

			> span {
				background: var(--button-color);
				color: white;
				font-size: 0.8em;
				font-weight: 600;
				padding-inline: 0.25em;
				border-radius: 2px;
				text-transform: uppercase;
				line-height: 1.4;

				span {
					display: none;
					font-size: 0.8em;
				}

				svg {
					display: inline-block;
					vertical-align: -0.125em;
				}
			}
		}
	}
}

.tooltip {
	background: #222222;
	color: #ffffff;
	padding: 0.3125rem 0.6875rem;
	border: 0 none;
	border-radius: 4px;
	font-size: 0.8125rem;
	white-space: nowrap;
	pointer-events: none;
	margin: 0;
}

.timepicker:after {
	content: '';
	border-style: solid;
	border-width: 2px 2px 0 0;
	display: inline-block;
	height: 0.6em;
	width: 0.6em;
	position: relative;
	top: 6%;
	transform: rotate(135deg);
	transform-origin: 66% 33%;
	transition: transform 150ms;
	flex-shrink: 0;
}

.datetime {
	background: unset;
	color: var(--text-color);
	border: 1px solid #ffffff20;
	border-radius: 2px;
	width: 135px;
}

.chainSelector {
	padding-left: 0.5em;
	padding-right: 0.5em;
}
