@use '@talend/design-tokens/lib/tokens' as tokens;

@mixin chevron($color) {
	border: 1px solid tokens.$coral-color-accent-border;
	padding: 3px;
	border-radius: 10px;
	color: $color;
}

.container {
	display: block;
	font-size: 0.875rem;

	> ul {
		padding: 0;
	}

	li {
		list-style-type: none;
	}

	svg {
		margin: 0 0 0 1px; // this is du to the left ul border that takes 1px
	}

	button {
		background: transparent;
		border: none;
		padding: 0;
		text-align: left;
	}

	.root-label-overflow {
		white-space: nowrap;
		overflow: hidden;
		max-width: 25%;
		text-overflow: ellipsis;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-width: 100%;

		&:focus {
			outline: none;

			> .line {
				background: tokens.$coral-color-neutral-background-medium;
				color: tokens.$coral-color-accent-text;
			}
		}

		&[aria-selected='true'] > .line {
			background-color: tokens.$coral-color-accent-background;
			color: tokens.$coral-color-accent-text-active;
		}

		.line {
			display: flex;

			&.full-width {
				width: 100%;
			}

			.toggle {
				min-height: auto;
				line-height: unset;

				> svg {
					width: 0.5625rem;
					height: 0.5625rem;
					color: tokens.$coral-color-accent-text;
				}
			}

			.line-main {
				max-width: 100%;
				display: flex;
				align-items: center;
				flex: 1;

				&:focus {
					.value {
						white-space: normal;
						word-break: break-all;
						overflow: visible;
						vertical-align: top;
					}
				}

				&.shrink-value {
					overflow: hidden;
				}
			}
		}

		.complex-item {
			flex: 1 1 auto;
			border-left: solid 1px tokens.$coral-color-neutral-border-weak;
			margin-left: tokens.$coral-spacing-xxs;
			max-width: 100%;
		}

		.key {
			padding-left: tokens.$coral-spacing-xxs;
			color: tokens.$coral-color-neutral-text-weak;
		}

		.value {
			color: tokens.$coral-color-accent-text-strong;
			margin-left: tokens.$coral-spacing-xxs;
			white-space: nowrap;
			text-overflow: ellipsis;

			&.wrap-string {
				white-space: normal;
				word-break: break-all;
			}

			&.shrink-value {
				overflow: hidden;
			}
		}

		.type {
			font-family: 'Inconsolata';
			font-size: 0.75rem;
			color: tokens.$coral-color-neutral-text-weak;
			opacity: 0.75;
			display: inline;
			margin-right: tokens.$coral-spacing-xs;
			margin-left: tokens.$coral-spacing-xxs;
			vertical-align: text-bottom;
		}

		.badge {
			top: -0.0625rem;
			margin-left: tokens.$coral-spacing-xs;
			background-color: tokens.$coral-color-accent-background;
			color: tokens.$coral-color-accent-text;
			font-size: 0.625rem;
			padding: calc(tokens.$coral-spacing-xxs / 2) tokens.$coral-spacing-xxs;
			display: inline-table;
		}
	}
}

.chevron {
	svg {
		@include chevron(tokens.$coral-color-accent-text);
	}
}

.chevron-filled {
	svg {
		@include chevron(tokens.$coral-color-accent-text-strong);
		background-color: tokens.$coral-color-accent-background;
	}
}