@import "@Themes/constants.scss";

.root {
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--color-neutral-200);

	&[data-errored="true"] {
		border: 1px solid var(--color-error-600);
	}

	&[data-disabled="true"] {
		.container-label {
			cursor: not-allowed;
		}
		opacity: 0.6;
	}

	.container-label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		background-color: var(--color-generic-white);
		cursor: pointer;
		padding: 24px;
		z-index: 1;

		&[data-border-right-collapsed="true"] {
			border-radius: 8px 0 0 8px;
		}

		.container-input chevron-icon {
			display: flex;
			align-items: center;

			span {
				display: flex;

				.icon {
					display: flex;
					margin-right: 8px;
					align-items: center;
				}
			}

			.placeholder {
				position: absolute;
				top: 24px;
				left: 8px;
				background-color: var(--color-generic-white);
				padding: 0 16px;

				&[data-open="true"] {
					transform: translateY(-36px);
				}
			}
		}

		.chevron-icon {
			height: 24px;

			fill: var(--color-neutral-500);
			transition: all 350ms $custom-easing;
			transform: rotate(90deg);

			&[data-open="true"] {
				transform: rotate(-90deg);
			}
		}
	}

	.container-ul {
		padding-left: 24px;
		z-index: 3;
		list-style: none;
		margin: 0;
		outline: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		transition: height 350ms $custom-easing, opacity 350ms $custom-easing;
		opacity: 1;
		overflow: hidden;
		top: 50px;
		background-color: var(--color-generic-white);

		&[data-open="false"] {
			height: 0;
			opacity: 0;
			border: none;
		}
	}

	.container-li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 24px;
		border-radius: 8px;
		cursor: pointer;
		background: var(--color-neutral-50);

		&:hover {
			background: var(--color-neutral-100);
		}

		&:active {
			background: var(--color-neutral-200);
		}

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

	.token-icon {
		max-width: 20px;
		display: flex;
		align-items: center;
		margin-right: 11px;

		> svg {
			height: 20px;
			margin-right: 11px;
		}

		> img {
			height: 20px;
			width: 20px;
		}
	}

	.backdrop {
		position: fixed;
		z-index: 1;
		inset: 0;
	}
}