/*************************************
 * SPDX-FileCopyrightText: 2009-2020 Vtenext S.r.l. <info@vtenext.com>
 * SPDX-License-Identifier: AGPL-3.0-only
 ************************************/

/* crmv@140887 */

// Colors
@import "materialize/components/color";

// Variables
@import "materialize/components/variables";

// Tabs
@import "materialize/components/tabs";

// Collections
.collection,
.vte-collection {
	margin: $element-top-margin 0 $element-bottom-margin 0;
	border: 1px solid $collection-border-color;
	border-radius: 2px;
	overflow: hidden;
	position: relative;

	.collection-item {
		background-color: $collection-bg-color;
		line-height: $collection-line-height;
		padding: 10px 20px;
		margin: 0;
		border-bottom: 1px solid $collection-border-color;

		&.pointer {
			cursor: pointer;
		}

		// Avatar Collection
		&.avatar {
			min-height: 84px;
			padding-left: 72px;
			position: relative;

			// Don't style circles inside preloader classes.
			&:not(.circle-clipper) > .circle,
			:not(.circle-clipper) > .circle {
				position: absolute;
				width: 42px;
				height: 42px;
				overflow: hidden;
				left: 15px;
				display: inline-block;
				vertical-align: middle;
			}
			
			i.circle {
				font-size: 18px;
				line-height: 42px;
				color: #fff;
				background-color: #999;
				text-align: center;
			}

			.title {
				font-size: 16px;
			}

			p {
				margin: 0;
			}

			.secondary-content {
				position: absolute;
				top: 16px;
				right: 16px;
			}
		}

		&:last-child {
			border-bottom: none;
		}

		&.active {
			background-color: $collection-active-bg-color;
			color: $collection-active-color;

			.secondary-content {
				color: #fff;
			}
		}
	}
	a.collection-item {
		display: block;
		transition: 0.25s;
		color: $collection-link-color;
		&:not(.active) {
			&:hover {
				background-color: $collection-hover-bg-color;
			}
		}
	}

	&.with-header {
		.collection-header {
			background-color: $collection-bg-color;
			border-bottom: 1px solid $collection-border-color;
			padding: 10px 20px;
		}
		.collection-item {
			padding-left: 30px;
		}
		.collection-item.avatar {
			padding-left: 72px;
		}
	}
}

// Made less specific to allow easier overriding
.secondary-content {
	float: right;
	color: $secondary-color;
}
.collapsible .collection {
	margin: 0;
	border: none;
}

.vte-collection {
	border: 0px none;
	list-style: none;
	padding: 0;
	margin: 0;

	.collection-item {
		transition: 0.25s;
		color: $vte-text;
		line-height: 20px;
		width: 100%; /* crmv@172169 */

		&:hover {
			background-color: $collection-hover-bg-color;
		}

		&.avatar {
			min-height: 65px;

			.circle {
				display: flex;
				align-items: center;
				background-color: $vte-primary;

				.vteicon, .vteicon2, .icon-module {
					flex: 1;
					color: $collection-icon-color;
					font-size: 18px;
				}
			}

			.main-title {
				font-size: 16px;
				margin-top: 12px;
			}
		}
	}

	/* crmv@172169 */
	.collection-header .collection-title {
		display: inline-block;
	}

	.collection-header .collection-btn {
		float: right;
		margin: 2px 0px;
	}
	/* crmv@172169e */
}

.vte-collection-empty {
	display: flex;
	align-items: center;
	min-height: 100%;

	.collection-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.circle {
			display: flex;
			align-items: center;
			width: 100px;
			height: 100px;
			background-color: $vte-primary;
			line-height: 100px;
			text-align: center;
			border-radius: 100px;

			& .vteicon, & .vteicon2, & .icon-module {
				flex: 1;
				font-size: 70px;
				color: $collection-icon-color;
			}
		}

		.title {
			margin-top: 30px;
		}
	}
}

.tabs {
	overflow-x: hidden;
	padding-left: 0px;

	.tab a {
		text-decoration: none;
	}

	.indicator {
		background-color: $vte-tab-selected-border;
	}
}

.primary {
	background-color: $vte-primary !important;
}

.primary-text {
	color: $vte-primary !important;
}