/*
 * -----------------------------------------------
 *  Widget    : deliteful/list/List
 *  baseClass : d-list or d-round-rect-list
 * -----------------------------------------------
 */

@import "../../node_modules/delite/css/includes";

.flex-display() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.flex-grow(@grow) {
	-webkit-box-flex: @grow;
	-moz-box-flex: @grow;
	-webkit-flex: @grow;
	-ms-flex: @grow;
	flex: @grow;
}

.flex-align(@align) {
	-webkit-box-align: @align;
	-ms-flex-align: @align;
	align-items: @align;
	-webkit-align-items: @align;
}

// Container for standard list, and list with rounded corners.
.d-list, .d-round-rect-list {
	/* edit display at your own risk */
	display: block;

	/* Position relative is needed by List.getBottomDistance(). */
	/* The List must be positioned to be the offsetNode of renderers. */
	/* Otherwise, the offsetTop value is computed against a wrong parent */
	position: relative;

	padding: 0;
	/* Do not change this margin setting when customizing list in the app css*/
	margin: 0;
}

// iOS theme for RoundRectList
// IMPORTANT: a renderer MUST have the same height (inc.borders) whatever its index in the list !
.d-round-rect-list {
	// Do not change this margin setting when customizing list in the app css.
	margin: 0 9px;
}

// Category list item.
.d-list-category {
	/* No position should be defined, as the List is using offsetTop to measure distance of elements within the list */
	/* Edit display at your own risk */
	display: block;
	margin: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Normal list item.
.d-list-item {
	// No position should be defined, as the List is using offsetTop to measure distance of elements within the list.
	list-style-type: none;
	display: block;
}

// This is the same node as the d-list-item except when the List is role=grid,
// in which case it's the d-list-item's child
.d-list-cell {
	.flex-display();
	.flex-grow(1);
	.flex-align(center);
	outline-offset: -2px;
	.d-spacer {
		.flex-grow(1);
	}
}

.d-list-item-icon {
	margin-right: 7px;
	.d-list.d-rtl & {
		margin-right: 0px;
		margin-left: 7px;
	}
}

.d-list-item-label {
	white-space: nowrap;
	text-overflow: ellipsis;
}

.d-list-item-right-text {
	padding-right: 4px;
	white-space: nowrap;
	text-overflow: ellipsis;
	.d-list.d-rtl & {
		padding-right: 0px;
		padding-left: 4px;
	}
}

// Displayed while PageableList is loading a new page.
.d-list-loader {
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
	padding: 0px 8px;
	.flex-display();
	.flex-grow(1);
	.d-progress-indicator {
		width: 24px;
		height: 24px;
		vertical-align: top;
	}
	&.d-loading {
		cursor: wait;
	}
	.d-list-loader-label {
		padding-left: 10px;
	}
}

// Displayed while List is loading.
.d-list-loading-panel {
	display: table;
	z-index: 2;
	height: 100%;
	width: 100%;
	text-align: center;
	cursor: wait;

	.d-list-loading-panel-info {
		display: table-cell;
		vertical-align: middle;

		.d-progress-indicator {
			width: 48px;
			height: 48px;
			vertical-align: top;
		}
		div {
			vertical-align: middle;
		}
		svg {
			vertical-align: middle;
		}
		.d-list-loading-panel-info-label {
			padding-left: 10px;
		}
	}
}

.d-list-loader, .d-list-loading-panel {
	.d-progress-indicator-lines {
		stroke: #808080
	}
}

.d-list-no-items {
	white-space: nowrap;
	text-overflow: ellipsis;
	width: auto;
	vertical-align: middle;
	line-height: 40px;
	text-align: center;
}

.d-selectable, .d-multiselectable {
	cursor: pointer;
}

@category-height: 35px;
@cell-height: 40px;
@round-radius: @list-group-border-radius;

.d-list {
	border: 1px solid @list-group-border;
	background-color: @list-group-bg;
}

.d-round-rect-list {
	border: 1px solid @list-group-border;
	border-radius: @round-radius;
	background-color: @list-group-bg;
}

.d-round-rect-list {
	> *:first-child {
		border-top-left-radius: @round-radius;
		border-top-right-radius: @round-radius;
	}

	> *:last-child {
		border-bottom-left-radius: @round-radius;
		border-bottom-right-radius: @round-radius;
	}
}

// Handle both for role=grid -> role=row -> role=columnheader case, and the role=listitem, etc. --> role=header case.
.d-list-category.d-list-cell,  .d-list-category .d-list-cell {
	background-color: @panel-default-heading-bg;
	color: @panel-default-text;
	border-bottom: 1px solid @list-group-border;
	padding: 0 10px;
	height: @category-height;
}

.d-list-cell {
	border-bottom: 1px solid @list-group-border;
	padding: 0px 8px;
	height: @cell-height;
}

.d-selectable, .d-multiselectable {
	.d-list-item:hover {
		background-color: @list-group-hover-bg;
	}

	.d-list-cell.d-selected {
		border-bottom: 1px solid @list-group-active-border;
		background-color: @list-group-active-bg;
		color: @list-group-active-color;
		font-weight: bold;
	}
}

.d-list-loader {
	font-weight: 500;
	height: @cell-height - 2;
	&:hover {
		background-color: #ebebeb;
	}

	&.d-list-previous-loader {
		border-top-width: 0;
		/* padding-bottom to compensate the fact that the bottom width is 0 instead of 1 */
		padding-bottom: 1px;
		border-bottom: 1px solid @list-group-border;
 	}

	&.d-list-next-loader {
		border-bottom-width: 0;
		/* padding-bottom to compensate the fact that the bottom width is 0 instead of 1 */
		padding-bottom: 1px;
	}
}

.d-list-loader.d-loading {
	color: @text-muted;
	font-weight: normal;
	font-style: italic;
	&:hover {
		background-color: inherit;
	}
}

.d-list-loading-panel {
	color: @text-muted;
	background-color: @body-bg;
	font-style: italic;
}