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

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

: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 xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M15.94 6.77h2.63v.01c.33 0 .6.27.6.6s-.27.6-.6.6H5.6c-.33 0-.6-.27-.6-.6s.27-.6.6-.6h2.61l.34-1.72a2.59 2.59 0 0 1 2.55-2.09h1.91a2.6 2.6 0 0 1 2.54 2.04zM9.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.12' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' d='M10.36 17.67c.33 0 .6-.27.6-.6v-4.4c0-.33-.27-.6-.6-.6s-.6.27-.6.6v4.4c0 .33.27.6.6.6m3.83-.6c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-4.4c0-.33.27-.6.6-.6s.6.27.6.6z'/%3E%3Cpath fill='%23fff' fill-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.13m8.7 10.68c.4 0 .73-.29.79-.68h.01l1.28-8.8H6.68l1.18 8.79c.05.39.39.69.79.69z' clip-rule='evenodd'/%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 xmlns='http://www.w3.org/2000/svg' width='34' height='36' fill='none' viewBox='0 0 34 36'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23fff' d='M13.214 20.164a1.194 1.194 0 1 1 0 2.387 1.194 1.194 0 0 1 0-2.387m5.572 0a1.193 1.193 0 1 1-.002 2.387 1.193 1.193 0 0 1 .002-2.387m-5.572 1.1a.093.093 0 0 0-.093.093.093.093 0 0 0 .187 0 .094.094 0 0 0-.094-.092m5.572 0a.094.094 0 0 0-.094.093.093.093 0 0 0 .187 0 .093.093 0 0 0-.093-.092m-5.572-6.456a1.193 1.193 0 1 1 0 2.385 1.193 1.193 0 0 1 0-2.385m5.572 0a1.193 1.193 0 1 1 0 2.385 1.193 1.193 0 0 1 0-2.385m-5.572 1.1a.093.093 0 0 0-.093.092.093.093 0 0 0 .187 0 .094.094 0 0 0-.094-.093m5.572 0a.094.094 0 0 0-.094.092.093.093 0 0 0 .187 0 .093.093 0 0 0-.093-.093M13.214 9.45a1.193 1.193 0 1 1 0 2.386 1.193 1.193 0 0 1 0-2.386m5.572 0a1.193 1.193 0 1 1 0 2.385 1.193 1.193 0 0 1 0-2.385m-5.572 1.1a.093.093 0 0 0-.093.093.093.093 0 0 0 .187 0 .094.094 0 0 0-.094-.093m5.572 0a.094.094 0 0 0-.094.093.093.093 0 0 0 .187 0 .093.093 0 0 0-.093-.093'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='36' height='36' x='-2' y='0' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%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;
}