@import "../style/classes";

.htk-list {
	a.item,
	.item.clickable {
		@extend %clickable;
	}
	.item {
		padding: 20px;
		border-bottom: 1px solid #DDD;
		display: flex;
		align-items: center;

		& > .side {
			flex: none;
		}
		& > .content {
			flex: 1;
			overflow: hidden;

			& > .important {
				font-weight: bold;
				font-size: 1rem;
				margin-bottom: .5em;
			}
			& > p {
				margin: .1em 0;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
		& > .actions {
			flex: none;
			display: none;
			align-items: center;

			& > .htk-button {
				margin: 0;
			}
			& > * {
				display: inline-block;
				vertical-align: middle;
			}
			& > input {
				margin: .6em;
			}
		}
		&:hover > .actions {
			display: flex;
		}
		&:last-child {
			border-bottom: none;
		}
	}
}