@import "../style/variables";

.htk-select {
	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 > .htk-icon.erase {
		display: block;
	}
}
.htk-select-menu {
	height: 100%;
	max-height: 80em;
	overflow: auto;
	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;
	}
}