@import "../style/variables";
@import "../style/classes";

.htk-combo {
	display: flex;
	align-items: center;
	font-weight: normal;
	width: 100%;

	& > span {
		flex: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	& > .htk-icon {
		flex: none;
		color: #666;

		&.erase {
			display: none;
		}
	}
	&:not(.filled) > span {
		color: #666;
	}
	&.filled {
		&:hover > .erase {
			display: block;
		}
		@include mobile {
			& > .erase {
				display: initial;
			}
		}
	}
}
.htk-select-menu {
	min-width: 14em;

	tbody > tr {
		border-top: none;
		height: 2.5em;
	}
	td.message {
		padding: 1em;
	}
	tr:hover {
		background-color: rgba(1, 1, 1, 0.1);
		cursor: pointer;
	}
	td {
		max-width: 11em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}