@import (reference) "../../../App/common.less";
@placeholder-color: #5c5c5c;

.collection-editor {
	.pagetransition();

	& > #grid {
		flex-grow: 2;

		& .resolution {
			width: 160px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			& .item {
				@item-height: 120px;

				position: relative;
				width: 160px;

				&.add-resolution {
					height: @item-height;
					border-color: #5c5c5c;
					border-style: dashed;
					border-width: 1px;
					-webkit-user-select: none;
					user-select: none;
					cursor: pointer;

					& div {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;

						& > svg {
							width: 40px;
							height: 40px;
							fill: #5c5c5c;
						}
					}

					& + span {
						width: 100%;
						text-align: center;
						padding: 6px 0;
					}
				}

				&:not(.add-resolution) {
					/* To make it of the same height of add button */
					height: @item-height + 2px;
				}

				& > .item-actions {
					display: flex;
					justify-content: center;
					align-items: center;
					opacity: 0;
					transition: opacity 0.3s ease-in-out;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 2;

					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: rgba(25, 25, 25, 0.8);
						z-index: 2;
						pointer-events: none;
					}

					& > svg {
						fill: #d82c2c;
						pointer-events: auto;
						width: 35px;
						height: 35px;
						cursor: pointer;
						z-index: 2;

						&:hover {
							fill: #8c1d1d;
						}
					}
				}

				&:hover {
					&::before,
					& .item-actions {
						opacity: 1;
					}
				}

				& .clipper {
					height: 100%;
					overflow: hidden;
					.withImagesTrasparencyBackground(true);
				}
			}

			& > select {
				width: 100%;
				text-align: center;
				background-color: #333;
				color: #e6e6e6;
				border-radius: 0px 0px 3px 3px;
				height: 30px;
				outline: none;
				border: 1px solid #313131;
			}
		}
	}

	& footer {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 9pt;
		color: #616161;
		border-top: 0.5px solid #292929;
		height: 50px;
		padding: 0 20px; /* small sizes */
	}

	&.dragOver > #drop-area {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s, 0s;
	}

	& > #drop-area {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;

		opacity: 0;
		box-sizing: border-box;
		border-radius: 5px;
		transition: opacity 0.5s ease-in-out, visibility 0s linear;
		transition-delay: 0s, 0.5s;
		border-width: 4px;
		border-style: dashed;
		border-color: #333;
		background-color: rgba(45, 45, 45, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #cacaca;
		cursor: pointer;
		margin: 10px;
		visibility: hidden;

		& > span {
			/* To avoid flicker effect while dragging over the text*/
			pointer-events: none;
		}
	}
}
