@import (reference) "global";
@import (reference) "items-view";

@listViewItemVerticalPadding: 0.8em;
@listViewItemHorizontalPadding: 0.5em;

@listViewGroupBackground: @offWhite;
@listViewGroupActiveBackground: darken(@listViewGroupBackground, 8%);
@listViewGroupColor: @darkTextColor;
@listViewGroupBorderColor: fade(@darkTextColor, 8%);

@listViewIndexBackground: fade(@offWhite, 50%);
@listViewIndexHoverBackground: darken(@offWhite, 6%);
@listViewIndexActiveBackground: darken(@offWhite, 8%);

@listViewInvertedStripedBackground: darken(@itemsViewInvertedBackground, 4%);
@listViewInvertedIndexBackground: fade(@primaryColor, 60%);
@listViewInvertedIndexHoverBackground: darken(@primaryColor, 20%);
@listViewInvertedIndexActiveBackground: @primaryColor;

.ui.list-view {
	.items {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.list.item {
		padding: @listViewItemVerticalPadding @listViewItemHorizontalPadding;
	}
	.list.group {
		margin: 0;
		padding: 0;
	}
	.list.group-header {
		color: @listViewGroupColor;
		background: @listViewGroupBackground;
		border-bottom: 1px solid @listViewGroupBorderColor;
		padding: 0.25em 0.5em;
		&:active {
			background: @listViewGroupActiveBackground;
		}

		&.collapsible {
			&:before {
				.transition-duration(0.3s);
				.transition-property(transform);
				font-family: Icons;
				content: "\f107"; // Angle Down
				float: right;
				margin-right: 0.5em;
			}

			&.collapsed:before {
				.rotate(90deg);
			}
		}
	}

	.item-slide-pane {
		position: absolute;
		overflow: hidden;
		z-index: 1100;
		.box-sizing(border-box);

		&.transition {
			.transition-duration(0.15s);
			.transition-property(transform);
		}
	}

	&.has-index-bar {
		.list.group-header {
			&.collapsible:before {
				margin-right: 2.2em;
			}
		}
	}

	> .float-group-header {
		position: absolute;
		height: auto;
		left: 0;
		right: 2px;
		opacity: 0.9;
		pointer-events: none;

		> .list.group-header:before {
			display: none;
		}
	}

	> .index-bar {
		.display(box);
		.box-orient(vertical);

		position: absolute;
		right: 2px;
		top: 0;
		bottom: 0;
		padding: 2px 0;
		min-width: 1.625em;
		z-index: 2;
		background: @listViewIndexBackground;

		> .index {
			.display(box);
			.box-flex(1);
			.box-pack(center);
			.box-align(center);
			&:hover {
				background: @listViewIndexHoverBackground;
			}
			&.current {
				background: @listViewIndexActiveBackground;
			}
		}
	}

	.loader-container {
		height: 5em;
		position: relative;
		display: none;
		&.active {
			display: block;
			>.ui.loader {
				display: block;
			}
		}
	}

	.tail-padding {
		height: 5em;
		position: relative;
	}
}

.ui.list-view.highlight-current {
	.list.item:hover:not(.current) {
		background: @itemsViewHoverBackground;
	}
	.list.item.current {
		background: @itemsViewCurrentBackground;
		color: @itemsViewCurrentColor;
	}
}

.desktop {
	.ui.list-view.v-scroll {
		> .index-bar, > .float-group-header {
			right: 18px;
		}
	}
}

.ie {
	.ui.list-view > .index-bar {
		.display(flex);
		.flex-direction(column);
		.align-items(stretch);

		> div {
			.flex(1);
			text-align: center;
			position: relative;
			> span {
				position: absolute;
				width: 100%;
				top: 50%;
				line-height: 20px;
				margin-top: -10px;
			}
		}
	}
}