.flex-row {
	&:not([hidden]) { display: flex; }
	flex-direction: row;
	align-items: center;
}

.flex-column {
	&:not([hidden]) { display: flex; }
	flex-direction: column;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}

.font-large {
	font-size: 18px;
	line-height: 24px;
}

.selectable {
	cursor: pointer;
	position: relative; // kotva pro selected::before

	&.selected {
		xbackground-color: var(--primary-tint); // FIXME jak zvyraznovat?

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: var(--border-width);
			background-color: var(--primary);
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			background-color: var(--primary-tint);
		}
	}
}

.item {
	.flex-row;
	.selectable;

	padding: 8px;

	&:nth-child(odd) {
		background-color: var(--bg-alt);
	}

	> .icon {
		margin-right: var(--icon-spacing);
		filter: drop-shadow(var(--text-shadow));
	}

	.title {
		.font-large;
		.ellipsis;

		font-weight: bold;
		min-width: 0;
	}

	button {
		&:first-of-type { margin-left: auto; }
		.icon { width: 32px; }
	}
}