@import "../../../node_modules/keen-slider/keen-slider.min.css";

.broccoli-module-px2style-image-list {

	svg {
		display: block;
		margin: 0 auto;
	}

	&__inner {
		position: relative;
		min-height: 200px;
	}
	&__slider {
		margin: 0px;
		padding: 0px;
		display: flex;
		align-items: stretch;
		gap: 0px;
		overflow: hidden;
		min-height: 220px;
		max-height: 50vh;

		&-slide {
			position: relative;
			list-style-type: none;
			margin: 0px;
			padding: 0px;
			flex-shrink: 0;
			flex-grow: 0;
			width: 70%;

			.broccoli-module-px2style-image-list__slider-btn-slide {
				width: 100%;
				height: 100%;
				padding: 0;
				border: none;
				display: block;
				background-color: #9993;
				cursor: pointer;
				img {
					display: block;
					object-fit: contain;
					max-width: 100%;
					margin: auto;
				}
			}
		}
	}

	&__slider-ctrls-prev,
	&__slider-ctrls-next {
		position: absolute;
		top: calc(100%/2 - 60px/2);
		padding: 0;
		margin: 0;
		width: fit-content;
		display: flex;
		justify-content: space-between;

		button {
			width: 50px;
			height: 60px;
			padding: 0;
			border-radius: 4px;
			cursor: pointer;
			&[disabled] {
				cursor: default;
				opacity: 0.7;
			}
		}
	}
	&__slider-ctrls-prev,
	&__slider-ctrls-next {
		button {
			&::before {
				content: "";
				display: inline-block;
				position: relative;
				width: 1em;
				height: 1em;
				border-right: 3px solid currentColor;
				border-bottom: 3px solid currentColor;
				transition: transform 0.1s ease-in;
			}
		}
	}
	&__slider-ctrls-prev {
		left: 10px;
	}
	&__slider-ctrls-next {
		right: 10px;
	}
	&__slider-btn-prev::before {
		left: calc(((1em + 3px) * 1.414) / 8);
		transform: rotate(135deg);
	}
	&__slider-btn-next::before {
		right: calc(((1em + 3px) * 1.414) / 8);
		transform: rotate(-45deg);
	}
	&__btn-add {
		svg {
			width: 1em;
			height: 1em;
			display: inline-block;
			position: relative;
			top: 2px;
			vertical-align: baseline;
		}
	}

	&__slider-btn-move-slide-prev {
		position: absolute;
		left: 5px;
		bottom: 5px;
		width: 50px;
		height: 50px;
		cursor: pointer;
	}
	&__slider-btn-move-slide-next {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 50px;
		height: 50px;
		cursor: pointer;
	}

	&__slider-btn-edit-slide-group {
		position: absolute;
		right: 5px;
		top: 5px;
		width: auto;
		height: auto;
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	&__resource-type {
		padding: 0;
		> li {
			list-style-type: none;
			display: inline-block;
			padding: 0.2em 1em;
			margin: 0;
		}
	}
	&__image-preview-area {
		border: 1px solid #999;
		padding: 10px;
		margin: 10px auto;
		background: #fff;
		outline: none;
		border-radius: 5px;
		text-align: center;
	}

	&__image-preview {
		min-width: 10%;
		max-width: 100%;
		min-height: 1px;
		max-height: 200px;
		-webkit-user-select: none;
		user-select: none;
		pointer-events: none;
	}


	// Image Caption
	[data-px2-image-list-rel="caption"] {
		display: block;
		padding: 1em 1.5em;
		box-sizing: border-box;
		position: absolute;
		left: 0px;
		bottom: 0px;
		background-color: #0009;
		color: #ddd;
		width: 100%;
		max-height: 45%;
		overflow: auto;

		[data-px2-image-list-rel="caption-title"] {
			font-weight: bold;
		}

		[data-px2-image-list-rel="caption-link"] {
			text-align: right;
			a {
				position: relative;
				width: fit-content;
				display: inline-block;
				&::before {
					content: "";
					display: inline-block;
					position: relative;
					width: 0.8em;
					height: 0.8em;
					border-right: 3px solid #fff;
					border-bottom: 3px solid #fff;
					transition: transform 0.1s ease-in;
					right: calc(((0.8em + 3px) * 1.414) / 8);
					transform: rotate(-45deg);
				}
			}
		}
	}
	&__no-image-preview {
		padding: 3em;
		font-weight: bold;
		font-size: 24px;
		color: #aaa;
	}

	// Image Caption
	[data-px2-image-list-rel="caption"] {
		display: block;
		padding: 1em 1.5em;
		box-sizing: border-box;
		position: absolute;
		left: 0px;
		bottom: 0px;
		background-color: #0009;
		color: #ddd;
		width: 100%;
		max-height: 45%;
		overflow: auto;
		text-align: left;

		[data-px2-image-list-rel="caption-title"] {
			font-weight: bold;
		}

		[data-px2-image-list-rel="caption-link"] {
			text-align: right;
			a {
				position: relative;
				width: fit-content;
				display: inline-block;
				&::before {
					content: "";
					display: inline-block;
					position: relative;
					width: 0.8em;
					height: 0.8em;
					border-right: 3px solid #fff;
					border-bottom: 3px solid #fff;
					transition: transform 0.1s ease-in;
					right: calc(((0.8em + 3px) * 1.414) / 8);
					transform: rotate(-45deg);
				}
			}
		}
	}
}