@use '@angular/material' as mat;
@use "sass:map";

@mixin breadcrumb($lacuna-theme) {
	.breadcrumb {
		.breadcrumb-bar {
			border-radius: 40px;
			position: absolute;
			padding-right: 40px;
			padding-left: 50px;
			z-index: 0;
			flex-wrap: wrap !important;
			background-color: #ececec;

			& span:not(:last-child) {
				font-weight: 600;
				cursor: pointer;

				&:hover {
					color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 500);
				}
			}
		}

		.mat-mdc-mini-fab {
			z-index: 1;

			.mat-icon {
				width: 16px;
			}
		}
	}
}

@mixin dnd($lacuna-theme) {
	.dnd-container {
		background-color: #f1f1f1;
		border: 1px dashed #a9a9a9;
		border-radius: 5px;
		height: 100%;
		overflow: auto;
		position: relative;
	}

	.dnd-container.invalid {
		border: 1px dashed #e9093f;
	}

	.top-container {
		position: relative;
	}

	.stretch {
		height: 100%;
	}

	.dnd-height {
		height: 100%;
		min-height: 200px;
	}

	.dnd-text {
		min-height: 200px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.text-bottom {
			display: block;
			font-weight: 600;
			color: map.get($lacuna-theme, dark);
		}

		.text-hidden {
			display: none;
			font-weight: 600;
		}
	}

	.button-container {
		position: absolute;
		bottom: 5px;
		right: 15px;
	}

	.file-data {
		flex: 1;
		min-width: 0;

		h4 {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-bottom: 0 !important;
			font-weight: 500;
		}
	}

	.text-truncate {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	div.ps {
		> div {
			height: 100%;
		}
	}

	div.dropzone {
		> div {
			height: 100%;
		}
	}

	.dropzone {
		background-color: transparent;
		border: none;
		height: 100%;
		min-height: 200px;
		display: block;
		/*display: table;
		height: 100px;
		width: 100%;
		background-color: #ececec;
		border: 1px solid map.get($lacuna-theme, light);*/
		button {
			padding: 0;
			border: none;
			outline: none;
			font: inherit;
			color: inherit;
			background: none;

			&.view-button {
				background-color: transparent;
				height: 30px;
				width: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
				padding: 0 !important;
				border: 1px solid #808080;
				transition: .3s;

				.mat-icon {
					color: #808080;
					height: 20px;
					width: 20px;
					font-size: 20px;
				}

				&:hover {
					background-color: #d8d8d8;
				}
			}

			&.delete-button {
				background-color: transparent;
				height: 30px;
				width: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
				padding: 0 !important;
				border: 1px solid mat.m2-get-color-from-palette(map.get($lacuna-theme, warn), 500);
				transition: .3s;

				.mat-icon {
					color: mat.m2-get-color-from-palette(map.get($lacuna-theme, warn), 500);
					height: 20px;
					width: 20px;
					font-size: 20px;
				}

				&:hover {
					background-color: mat.m2-get-color-from-palette(map.get($lacuna-theme, warn), 50);
				}
			}
		}
	}

	.dnd-highlight {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;

		.hightligh-text {
			font-weight: 600;
			display: none;
			opacity: 0;
		}

		&:hover {
			display: none;
		}
	}

	.dnd-drag-over {
		color: white;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		background-color: rgba(0,0,0,.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.hightligh-text {
			font-weight: 600;
			display: block;
			opacity: 1;
		}
	}

	.stepzone {
		border: 1px dashed #a9a9a9;
		opacity: 0.5;
	}

	.dnd-drag-over.stepzone {
		opacity: 1;
		border-color: mat.m2-get-color-from-palette(map.get($lacuna-theme, primary), 400);
	}

	.file-title {
		font-weight: 500 !important;
		color: mat.m2-get-color-from-palette(map.get($lacuna-theme, primary), 500);
		letter-spacing: 1px;
		margin-bottom: 0 !important;
	}

	.file-frame {
		border: 1px solid map.get($lacuna-theme, light);
		border-radius: 5px;
	}

	.pdf-width {
		max-width: 200px;
	}

	.attachment-container {
		img {
			max-width: 200px;
		}
	}
}

// MESSAGE SERVICE
@mixin notification($lacuna-theme) {
	.message-notification {
		display: flex;
		max-width: 300px;
		max-height: 100px;

		.mat-icon {
			overflow: visible !important;
		}

		.full-width {
			width: 100%;
		}

		button {
			padding: 0;
			border: none;
			outline: none;
			font: inherit;
			color: inherit;
			background: none;

			&.dismiss-button {
				height: 25px;
				width: 25px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
				padding: 0 !important;
				transition: .3s;

				.mat-icon {
					color: rgba(255,255,255,0.6);
					height: 20px;
					width: 20px;
					font-size: 20px;
				}

				&:hover {
					background-color: rgba(255,255,255,0.2);
				}
			}
		}
	}

	.notification-text {
		overflow: hidden;
		position: relative;
		line-height: 1.2em;
		text-align: left;
		margin-right: -1em;
		padding-right: 1em;
		word-break: break-word;

		&:before {
			position: absolute;
			right: 0;
			bottom: 0;
		}

		&:after {
			content: '';
			position: absolute;
			right: 0;
			width: 1em;
			height: 1em;
			margin-top: 0.2em;
			background: transparent;
		}
	}
}

@mixin lang($lacuna-theme) {
	.mat-mdc-menu-panel.language-menu {
		.mat-mdc-menu-content {
			min-width: 0;
		}
	}
}