@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-components-color-accent, var(--wp-admin-theme-color, #3858e9));
				background-color: color-mix(
					in srgb,
					var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 8%,
					transparent
				);
			}

			&: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-modal {
	width: min(828px, calc(100vw - 32px));
	max-width: 828px;

	.components-modal__header-heading {
		width: 100%;
	}
}

.vpf-component-gallery-control-modal-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vpf-component-gallery-control-modal-title-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.vpf-component-gallery-control-modal-title-nav-button.components-button {
	padding: 0;
	height: 26px;
	width: 26px;
	margin: -4px;

	&:disabled {
		opacity: 0.45;
	}

	svg {
		transform: rotate(-90deg);
		width: 100%;
		height: 100%;
	}
	+ .vpf-component-gallery-control-modal-title-nav-button.components-button svg {
		transform: rotate(90deg);
	}
}

.vpf-component-gallery-control-item-modal {
	width: 100%;

	.vpf-component-gallery-control-item-modal-image-info {
		:where(img, video, iframe) {
			width: 100%;
		}
	}

	.vpf-component-gallery-control-collapsible-section {
		> .vpf-component-gallery-control-collapsible-section-toggle {
			display: flex;
			align-items: center;
			height: 14px;
			padding: 0;
			font-weight: 450;
			color: #7d7d7d;
			text-decoration: none;
			background: transparent;

			.components-panel__arrow {
				width: 20px;
				height: 20px;
				margin-left: 2px;
				transition: transform 0.15s ease;
			}

			&[aria-expanded='true'] {
				.components-panel__arrow {
					transform: rotate(180deg);
				}
			}
		}

		> .vpf-component-gallery-control-collapsible-section-content {
			margin-top: 16px;
		}
	}

	.vpf-component-gallery-control-item-modal-image-additional-info {
		.vpf-component-gallery-control-collapsible-section-content {
			word-wrap: break-word;
		}
	}

	.vpf-component-gallery-control-item-modal-image-additional-info-focal-point {
		margin-bottom: 16px;
		margin-top: -6px;

		.components-panel__row {
			gap: 16px;
		}

		.components-input-control {
			flex: 1;
		}
	}

	.vpf-component-gallery-control-item-modal-fields {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0 20px;
		flex: 1;
		min-width: 0;
	}

	.vpf-component-gallery-control-item-modal-fields-left {
		margin-top: 16px;
	}

	.vpf-component-gallery-control-item-modal-state-tabs {
		margin-bottom: 16px;

		.components-toggle-group-control {
			width: 100%;
		}
	}

	.vpf-component-gallery-control-item-modal-field {
		min-width: 0;
	}

	.vpf-component-gallery-control-item-modal-field-full {
		grid-column: 1 / -1;
	}

	// Make URL control compact when next control is also compact.
	.vpf-control-wrap-name-images-url:has(+ .vpf-component-gallery-control-item-modal-field-compact) {
		grid-column: 1;
	}

	.vpf-component-gallery-control-item-modal-heading {
		margin-bottom: 14px;
	}

	.vpf-component-gallery-control-item-modal-heading-title {
		color: #9f9f9f;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.4;
		margin: 0;
		text-transform: uppercase;
	}

	.vpf-component-gallery-control-item-modal-heading-description {
		color: #9f9f9f;
		margin: 6px 0 0;
		font-size: 12px;
		line-height: 1.5;
	}

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

		.vpf-component-gallery-control-item-modal-image-info {
			flex: 0 0 233px;
			width: 233px;

			+ div {
				flex: 1;
				width: auto;
			}
		}

		.vpf-component-gallery-control-item-modal-fields-left {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media screen and (min-width: 782px) {
		.vpf-component-gallery-control-item-modal-fields {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.vpf-component-gallery-control-item-modal-field-compact {
			grid-column: span 1;
		}
	}
}