@import "../../variables";

.vpf-component-gallery-control {
	.vpf-component-gallery-control-items {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;

		.vpf-component-gallery-control-item {
			position: relative;
			display: inline-block;

			.vpf-component-gallery-control-item-button {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				padding: 0;
				padding-bottom: 100%;
				overflow: hidden;
				background-color: rgba(#000, 0.1) !important;
				border-radius: 5px;
				box-shadow: none !important;
				transition: 0.2s background-color;

				&::before {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
					border-radius: 5px;
					z-index: 1;
				}

				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 5px;
					transition: 0.2s filter;
				}
			}
		}

		.vpf-component-gallery-control-item-checked {
			.vpf-component-gallery-control-item-button::before {
				box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
			}

			&:not(:hover):not(:focus) {
				.vpf-component-gallery-control-item-toolbar {
					opacity: 1;
					background: none;
					box-shadow: none;
				}
				.vpf-component-gallery-control-item-checkbox {
					opacity: 1;

					~ * {
						opacity: 0;
					}
				}
			}
		}

		// Muffled item after category filter.
		.vpf-component-gallery-control-item-muffled .vpf-component-gallery-control-item-button {
			img {
				filter: opacity(0.2) brightness(1) grayscale(1);
			}
		}

		// Bulk actions
		.vpf-component-gallery-control-item-bulk-actions {
			display: flex;
			margin-bottom: 5px;
			margin-right: auto;
			align-items: center;

			.components-base-control,
			.components-base-control__field {
				margin: 0;
			}
			.components-checkbox-control__input-container {
				margin-right: 5px;
			}

			.components-select-control {
				margin-top: -5px;
				margin-bottom: -5px;
			}

			.components-input-control__container[disabled]:has(select:not(:hover, :focus)) {
				background-color: transparent;
			}

			select {
				max-width: 120px;
				height: 30px;
				min-height: 30px;

				&:not(:hover, :focus) ~ .components-input-control__backdrop {
					border-color: transparent;
				}
			}
		}

		.vpf-component-gallery-control-item-bulk-actions .components-checkbox-control,
		.vpf-component-gallery-control-item-checkbox {
			margin: 0;

			[type="checkbox"],
			.components-checkbox-control__input-container {
				width: 16px;
				min-width: 16px;
				height: 16px;
			}
			.components-checkbox-control__checked {
				width: 20px;
				height: 20px;
			}

			[type="checkbox"],
			.components-base-control,
			.components-base-control__field {
				margin: 0;
			}
		}

		.vpf-component-gallery-control-item-toolbar {
			position: absolute;
			left: 4px;
			top: 4px;
			right: 4px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 20px;
			padding: 0;
			color: #272727;
			background-color: #fff;
			border-radius: 3px;
			opacity: 0;
			transition: 0.2s opacity;
			z-index: 2;
			box-shadow: 0 0 3px rgba(0, 0, 0, 40%);

			> * {
				padding: 2px;
				height: 16px;
			}

			svg {
				width: 16px;
				height: auto;
			}

			.vpf-component-gallery-control-item-remove {
				&:hover,
				&:focus {
					color: #d51515;
				}
			}

			.vpf-component-gallery-control-item-checkbox {
				margin: 0;

				[type="checkbox"],
				.components-checkbox-control__input-container {
					width: 14px;
					min-width: 14px;
					height: 14px;
					margin: 0;
				}
				.components-checkbox-control__checked {
					width: 18px;
					height: 18px;
				}

				.components-checkbox-control__input-container {
					display: flex;
					margin-top: -1px;
				}
			}
		}

		.vpf-component-gallery-control-item:hover .vpf-component-gallery-control-item-toolbar,
		.vpf-component-gallery-control-item:focus .vpf-component-gallery-control-item-toolbar {
			opacity: 1;
		}
	}

	.vpf-component-gallery-control-item-dragging {
		z-index: 2;

		.vpf-component-gallery-control-item-button {
			img {
				opacity: 1;
			}

			svg {
				display: none;
			}
		}

		.vpf-component-gallery-control-item-toolbar {
			display: none;
		}
	}

	.vpf-component-gallery-control-item-fullwidth {
		display: flex;
		grid-column: 1 / -1;
		justify-content: center;
	}

	.vpf-component-gallery-control-item-filter {
		position: relative;
		width: 20px;
		height: 20px;
		margin-left: auto;

		> .components-base-control {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			opacity: 0;

			select {
				width: 20px;
				height: 20px;
				min-height: 20px;
				padding: 0;
			}
		}
	}

	.vpf-component-gallery-control-item-pagination {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;

		span {
			font-size: 12px;
			color: #8a8a8a;
		}

		.vpf-component-gallery-control-item-pagination-buttons {
			display: flex;
		}
	}

	.vpf-component-gallery-control-item-add.components-button {
		border: 1px solid $gray-900;

		> span {
			margin-left: 0.5em;
			font-weight: 500;
		}
	}
}

.vpf-component-gallery-control-item-modal {
	max-width: 540px;

	.vpf-component-gallery-control-item-modal-image-info {
		margin-bottom: 30px;

		img {
			max-height: 150px;
		}
	}

	.vpf-component-gallery-control-item-modal-image-additional-info {
		margin-top: 30px;

		> .components-button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 10px;
			color: #7d7d7d;
			text-decoration: none;
			background-color: #ebebeb;

			svg {
				width: 13px;
				margin-left: 10px;
			}
		}

		> div {
			margin-top: 20px;
		}

		.vpf-component-gallery-control-item-modal-image-additional-info-copied {
			margin-left: 10px;
			color: #15b11d;
		}
	}

	@media screen and (min-width: 600px) {
		display: flex;
		gap: 30px;
		align-items: flex-start;

		.vpf-component-gallery-control-item-modal-image-info {
			position: sticky;
			top: 30px;
			flex: 1;
			width: 230px;
			margin-bottom: 0;

			+ div {
				width: 280px;
			}
		}

		.vpf-component-gallery-control-item-modal-image-info-sticky-bottom {
			position: sticky;
			top: auto;
			bottom: 30px;
			margin-top: auto;
		}
	}
}
