.ts-ledger {
	--ts-ledger-text: #f6efe6;
	--ts-ledger-text-muted: #b7ac9d;
	--ts-ledger-border: #332712;
	--ts-ledger-accent: #ffb24d;
	--ts-ledger-positive: #5fd693;

	width: min(680px, calc(100% - 32px));
	max-height: min(760px, calc(100dvh - 32px));
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: transparent;
	color: var(--ts-ledger-text);
	overflow: hidden;
}

.ts-ledger::backdrop {
	background: rgba(8, 6, 3, 0.78);
	backdrop-filter: blur(6px);
}

html:has(.ts-ledger[open]) {
	overflow: hidden;
}

.ts-ledger[open] {
	animation: ts-ledger-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ts-ledger[open]::backdrop {
	animation: ts-ledger-fade-in 0.32s ease;
}

.ts-ledger.is-closing {
	animation: ts-ledger-out 0.22s ease forwards;
}

.ts-ledger.is-closing::backdrop {
	animation: ts-ledger-fade-out 0.22s ease forwards;
}

@keyframes ts-ledger-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
}

@keyframes ts-ledger-out {
	to {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
}

@keyframes ts-ledger-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes ts-ledger-fade-out {
	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ts-ledger,
	.ts-ledger::backdrop {
		animation: none !important;
	}
}

.ts-ledger__panel {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	border: 1px solid var(--ts-ledger-border);
	border-radius: inherit;
	background:
		radial-gradient(
			60% 50% at 15% -10%,
			rgba(55, 210, 122, 0.14) 0%,
			rgba(55, 210, 122, 0) 70%
		),
		linear-gradient(165.9deg, #1c150d 0%, #16110b 100%);
}

.ts-ledger__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 56px 18px 20px;
	border-bottom: 1px solid var(--ts-ledger-border);
}

.ts-ledger__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ts-ledger-positive);
}

.ts-ledger__eyebrow svg {
	width: 14px;
	height: 13px;
}

.ts-ledger__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ts-ledger-text);
}

.ts-ledger__summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--ts-ledger-text-muted);
}

.ts-ledger__summary strong {
	font-size: 26px;
	font-weight: 700;
	color: var(--ts-ledger-positive);
}

.ts-ledger__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--ts-ledger-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	color: var(--ts-ledger-text-muted);
	cursor: pointer;
}

.ts-ledger__close svg {
	width: 12px;
	height: 12px;
}

.ts-ledger__list {
	flex: 1 1 auto;
	margin: 0;
	padding: 8px 20px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ts-ledger__row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"date amount"
		"account tx"
		"chain tx";
	align-items: center;
	gap: 4px 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ts-ledger__row:last-child {
	border-bottom: 0;
}

.ts-ledger__date {
	grid-area: date;
	font-size: 14px;
	font-weight: 600;
}

.ts-ledger__account {
	grid-area: account;
	font-size: 12px;
	color: var(--ts-ledger-text-muted);
}

.ts-ledger__chain {
	grid-area: chain;
	justify-self: start;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(40, 160, 240, 0.12);
	color: #7cc4f5;
}

.ts-ledger__chain--ethereum {
	background: rgba(140, 140, 255, 0.12);
	color: #aeb2ff;
}

.ts-ledger__amount {
	grid-area: amount;
	justify-self: end;
	font-size: 16px;
	font-weight: 700;
	color: var(--ts-ledger-positive);
}

.ts-ledger__tx {
	grid-area: tx;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ts-ledger-accent);
	text-decoration: none;
	white-space: nowrap;
}

.ts-ledger__tx svg {
	width: 12px;
	height: 11px;
	color: var(--ts-ledger-positive);
}

.ts-ledger__note {
	margin: 0;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--ts-ledger-border);
	font-size: 12px;
	color: var(--ts-ledger-text-muted);
}

@media (min-width: 640px) {
	.ts-ledger__head {
		padding: 28px 64px 22px 28px;
	}

	.ts-ledger__list {
		padding: 8px 28px;
	}

	.ts-ledger__note {
		padding: 16px 28px 22px;
	}

	.ts-ledger__row {
		grid-template-columns: 96px 1fr 72px 100px 112px;
		grid-template-areas: "date account chain amount tx";
		gap: 4px 16px;
	}

	.ts-ledger__chain {
		justify-self: center;
	}
}

@media (hover: hover) {
	.ts-ledger__tx:hover {
		color: #ffc777;
		text-decoration: underline;
	}

	.ts-ledger__close:hover {
		color: var(--ts-ledger-text);
		border-color: rgba(255, 170, 60, 0.55);
	}
}