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

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

		.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: #f7f7f7 !important;
				border-radius: 5px;
				box-shadow: none !important;
				transition: 0.2s background-color;

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

				svg {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 20px;
					height: 20px;
					margin-top: -10px;
					margin-left: -10px;
					color: #fff;
					opacity: 0;
					fill: none;
					transition: 0.2s opacity;
				}

				&:hover,
				&:focus {
					background-color: #000 !important;

					img {
						opacity: 0.6;
					}

					svg {
						opacity: 1;
					}
				}
			}
		}

		.vpf-component-gallery-control-item-remove {
			position: absolute;
			top: -5px;
			right: -5px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			padding: 0;
			color: #fff;
			background-color: #272727;
			border-radius: 20px;
			opacity: 0;
			transition: 0.2s opacity, 0.2s background-color;

			&:hover,
			&:focus {
				background-color: #d51515;
			}

			svg {
				width: 70%;
				height: auto;
			}
		}

		.vpf-component-gallery-control-item:hover .vpf-component-gallery-control-item-remove,
		.vpf-component-gallery-control-item:focus .vpf-component-gallery-control-item-remove {
			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-remove {
			display: none;
		}
	}

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

	.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-size: 0.9em;
			font-weight: 700;
			text-transform: uppercase;
		}
	}
}

.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;
		}
	}
}