.metrics-select-container {
	margin-bottom: 8px;

	.ant-select-selector {
		width: 100%;
		border-radius: 2px;
		border: 1px solid #1d212d !important;
		background: #16181d;
		color: #fff;
		font-family: 'Geist Mono';
		font-size: 13px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px; /* 142.857% */
		min-height: 36px;
	}

	.ant-select-dropdown {
		border-radius: 4px;
		border: 1px solid var(--bg-slate-400);
		background: linear-gradient(
			139deg,
			rgba(18, 19, 23, 0.8) 0%,
			rgba(18, 19, 23, 0.9) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);

		.ant-select-item {
			color: #fff;
			font-family: 'Geist Mono';
			font-size: 13px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px; /* 142.857% */

			&:hover {
				background: rgba(171, 189, 255, 0.04) !important;
			}
		}
	}
}

.lightMode {
	.metrics-select-container {
		.ant-select-selector {
			border: 1px solid var(--bg-vanilla-300) !important;
			background: var(--bg-vanilla-100);
			color: var(--text-ink-100);
		}

		.ant-select-dropdown {
			background: var(--bg-vanilla-100);
			border: 1px solid var(--bg-vanilla-300) !important;
			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
			backdrop-filter: none;

			.ant-select-item {
				color: var(--text-ink-100);

				&:hover,
				&.ant-select-item-option-active {
					background: var(--bg-vanilla-300) !important;
				}

				&.ant-select-item-option-selected {
					background: var(--bg-vanilla-300) !important;
					border: 1px solid var(--bg-slate-400);
					font-weight: 600;
				}
			}
		}
	}
}