.bx-im-elements-media-gallery {
	display: flex;
	flex-direction: column;
}

:root {
	--bx-im-elements-dynamic-gallery__item-background: rgba(var(--ui-color-palette-gray-04-rgb), var(--ui-opacity-80));
	--bx-im-elements-dynamic-gallery__item-border-radius: var(--ui-border-radius-2xs);
	--bx-im-elements-dynamic-gallery__item-source-fit: scale-down;
	--bx-im-elements-dynamic-gallery__item-source-width: 100%;
	--bx-im-elements-dynamic-gallery__item-source-height: 100%;
	--bx-im-elements-dynamic-gallery__item-cursor: pointer;
	--bx-im-elements-dynamic-gallery__item-play-icon-hovered-background: var(--ui-color-palette-blue-60);
}

.bx-im-elements-media-gallery__item {
	background-color: var(--bx-im-elements-dynamic-gallery__item-background);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bx-im-elements-dynamic-gallery__item-border-radius);
	margin-right: 1px;
	cursor: var(--bx-im-elements-dynamic-gallery__item-cursor);
	transition: 150ms transform ease;
	box-sizing: border-box;
}

.bx-im-elements-media-gallery__item-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100%;
	border-radius: 4px;
	overflow: hidden;
}

.bx-im-elements-media-gallery__item.--draggable {
	opacity: 0.3;
}

.bx-im-elements-media-gallery__item:last-child {
	margin-right: 0;
}

.bx-im-elements-media-gallery__item-source {
	object-fit: var(--bx-im-elements-dynamic-gallery__item-source-fit);
	width: var(--bx-im-elements-dynamic-gallery__item-source-width);
	height: var(--bx-im-elements-dynamic-gallery__item-source-height);
	z-index: 1;
}

.bx-im-elements-media-gallery__item-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	background-color: rgba(var(--im-color-palette-black-solid-rgb), .5);
	border-radius: 50%;
	transition: opacity 200ms ease;
	opacity: 0;
	cursor: pointer;
	z-index: 20;
}

.bx-im-elements-media-gallery__item-remove-icon {
	width: 15px;
	height: 19px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.94 6.77h2.63v.01c.33 0 .6.27.6.6 0 .33-.27.6-.6.6H5.6c-.33 0-.6-.27-.6-.6 0-.33.27-.6.6-.6h2.61l.34-1.72a2.593 2.593 0 012.55-2.09h1.91a2.6 2.6 0 012.54 2.04l.39 1.76zM9.73 5.29l-.27 1.35v.01h5.22l-.3-1.38c-.14-.64-.71-1.1-1.37-1.1H11.1c-.66 0-1.24.47-1.37 1.12z' fill='%23fff'/%3E%3Cpath d='M10.36 17.67c.33 0 .6-.27.6-.6v-4.4c0-.33-.27-.6-.6-.6-.33 0-.6.27-.6.6v4.4c0 .33.27.6.6.6zM14.19 17.07c0 .33-.27.6-.6.6-.33 0-.6-.27-.6-.6v-4.4c0-.33.27-.6.6-.6.33 0 .6.27.6.6v4.4z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.45 9h11.01c.61 0 1.08.54.99 1.14l-1.32 9.03c-.14.98-.99 1.71-1.98 1.71h-6.5c-1 0-1.85-.74-1.98-1.73l-1.21-9.02c-.08-.6.38-1.13.99-1.13zm8.7 10.68c.4 0 .73-.29.79-.68h.01l1.28-8.8H6.68l1.18 8.79c.05.39.39.69.79.69h6.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
	transition: opacity 200ms ease;
	opacity: .8;
}

.bx-im-elements-media-gallery__item:hover .bx-im-elements-media-gallery__item-remove,
.bx-im-elements-media-gallery__item-remove:hover .bx-im-elements-media-gallery__item-remove-icon {
	opacity: 1;
}

.bx-im-elements-media-gallery__item.--draggable .bx-im-elements-media-gallery__item-remove {
	opacity: 0;
}

.bx-im-elements-media-gallery__item-play {
	cursor: pointer;
}

.bx-im-elements-media-gallery__item-play-icon {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: 4;
	transition: 250ms linear background-color;
	background-color: rgba(0, 0, 0, 0.39);
}

.bx-im-elements-media-gallery__item-play-icon::after {
	border-style: solid;
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent #fff;
	width: 0;
	height: 0;
	margin-top: 16px;
	margin-left: 20px;
	position: absolute;
	content: '';
	transition: background-color 200ms ease;
}

.bx-im-elements-media-gallery__item-play-icon:hover {
	background-color: var(--bx-im-elements-dynamic-gallery__item-play-icon-hovered-background);
}

.bx-im-elements-media-gallery__item-blur {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	will-change: transform;
	transform: scale(1.2);
	filter: blur(20px);
	background-position: center;
	background-size: auto;
	background-repeat: no-repeat;
}

.bx-im-elements-media-gallery__item.--dropzone-after {
	transform: translateX(-5px) scale(0.87);
	border-right: 2px solid red;
}

.bx-im-elements-media-gallery__item.--dropzone-before {
	transform: translateX(5px) scale(0.87);
	border-left: 2px solid red;
}

.bx-im-elements-media-gallery__item-drag {
	display: flex;
	align-items: center;
	position: absolute;
	top: 2px;
	left: 0;
	cursor: move;
	-webkit-user-select: none;
	        user-select: none;
	margin-right: 3px;
	z-index: 10;
}

.bx-im-elements-media-gallery__item-drag-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='34' height='36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_12692_13318)'%3E%3Cpath d='M13.214 20.164a1.194 1.194 0 110 2.387 1.194 1.194 0 010-2.387zm5.572 0a1.193 1.193 0 11-.002 2.387 1.193 1.193 0 01.002-2.387zm-5.572 1.1a.093.093 0 00-.093.093.093.093 0 00.187 0 .094.094 0 00-.094-.092zm5.572 0a.094.094 0 00-.094.093.093.093 0 00.187 0 .093.093 0 00-.093-.092zm-5.572-6.456a1.193 1.193 0 110 2.385 1.193 1.193 0 010-2.385zm5.572 0a1.193 1.193 0 110 2.385 1.193 1.193 0 010-2.385zm-5.572 1.1a.093.093 0 00-.093.092.093.093 0 00.187 0 .094.094 0 00-.094-.093zm5.572 0a.094.094 0 00-.094.092.093.093 0 00.187 0 .093.093 0 00-.093-.093zM13.214 9.45a1.193 1.193 0 110 2.386 1.193 1.193 0 010-2.386zm5.572 0a1.193 1.193 0 110 2.385 1.193 1.193 0 010-2.385zm-5.572 1.1a.093.093 0 00-.093.093.093.093 0 00.187 0 .094.094 0 00-.094-.093zm5.572 0a.094.094 0 00-.094.093.093.093 0 00.187 0 .093.093 0 00-.093-.093z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_12692_13318' x='-2' y='0' width='36' height='36' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2'/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_12692_13318'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_12692_13318' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
	width: 36px;
	height: 36px;
	opacity: 0;
	transition: opacity 200ms ease;
}

.bx-im-elements-media-gallery__item:hover .bx-im-elements-media-gallery__item-drag-icon {
	opacity: 1;
}

.bx-im-elements-media-gallery__item-viewer-clickable-overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.bx-im-elements-media-gallery__row {
	display: flex;
	margin-bottom: 1px;
}