.js-enhanced [data-decode] {
	opacity: 0;
	transition: opacity 0.05s;
}

.js-enhanced .content-block-bg {
	background-image: none;
	background-color: #0a0a0a;
}

.js-enhanced .header-btn,
.js-enhanced .action-btn {
	position: relative;
}

.js-enhanced .header-btn .corner,
.js-enhanced .action-btn .corner {
	position: absolute;
	width: 8px;
	height: 8px;
	border-color: #737373;
	border-style: solid;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.js-enhanced .header-btn .corner-tl,
.js-enhanced .action-btn .corner-tl {
	top: -1px;
	left: -1px;
	border-width: 1px 0 0 1px;
	transform: translate(-6px, -6px);
}

.js-enhanced .header-btn .corner-tr,
.js-enhanced .action-btn .corner-tr {
	top: -1px;
	right: -1px;
	border-width: 1px 1px 0 0;
	transform: translate(6px, -6px);
}

.js-enhanced .header-btn .corner-bl,
.js-enhanced .action-btn .corner-bl {
	bottom: -1px;
	left: -1px;
	border-width: 0 0 1px 1px;
	transform: translate(-6px, 6px);
}

.js-enhanced .header-btn .corner-br,
.js-enhanced .action-btn .corner-br {
	bottom: -1px;
	right: -1px;
	border-width: 0 1px 1px 0;
	transform: translate(6px, 6px);
}

.js-enhanced .header-btn:hover .corner,
.js-enhanced .action-btn:hover .corner {
	opacity: 1;
	transform: translate(0, 0);
}

.js-enhanced .field-wrapper {
	overflow: visible;
}

.js-enhanced .content-block > .swap-box {
	clip-path: inset(-2px -2px 100% -2px);
	transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-enhanced .content-block > .swap-box.revealed {
	clip-path: inset(-2px);
}

.js-enhanced .content-block > .swap-box.swap-error-box,
.js-enhanced .content-block > .swap-box.swap-success-box,
.js-enhanced .content-block > .swap-box.swap-status-box {
	clip-path: inset(-2px);
}

.js-enhanced .content-block > .swap-box .swap-box-corners {
	display: none;
}

.js-enhanced .swap-bottom-corner {
	position: absolute;
	width: 8px;
	height: 8px;
	border-color: #737373;
	border-style: solid;
	pointer-events: none;
	z-index: 10;
	bottom: -1px;
}

.js-enhanced .swap-bottom-corner-bl {
	left: -1px;
	border-width: 0 0 1px 1px;
}

.js-enhanced .swap-bottom-corner-br {
	right: -1px;
	border-width: 0 1px 1px 0;
}

.cs-wrapper {
	position: relative;
	cursor: pointer;
	min-width: 200px;
	user-select: none;
}

.cs-selected {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	height: 100%;
	background: #141414;
	border-left: 1px solid #262626;
	transition: background 0.2s;
}

.cs-selected:hover {
	background: #1a1a1a;
}

.cs-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.cs-label {
	font-family: 'Fira Code', monospace;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	white-space: nowrap;
}

.cs-arrow {
	margin-left: auto;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #737373;
	transition: transform 0.2s;
}

.cs-open .cs-arrow {
	transform: rotate(180deg);
}

.cs-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #141414;
	border: 1px solid #262626;
	z-index: 100;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}

.cs-open .cs-dropdown {
	max-height: min(480px, 70vh);
	overflow-y: auto;
	opacity: 1;
}

.cs-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	transition: background 0.15s;
}

.cs-option:hover {
	background: #1f1f1f;
}

.cs-option.cs-active {
	background: #1a1a1a;
	border-left: 2px solid #737373;
}

.cs-option .cs-label {
	font-size: 13px;
}

@media (max-width: 600px) {
	.cs-selected {
		padding: 16px 20px;
		border-left: none;
		border-top: 1px solid #262626;
	}

	.cs-dropdown {
		left: -1px;
		right: -1px;
	}
}