.editor-styles-wrapper .wp-block-coblocks-gallery-collage,
.wp-block-coblocks-gallery-collage {

	&.alignfull {

		ul {
			padding-left: 1em;
			padding-right: 1em;
		}
	}

	&:not(.is-style-layered) li {
		margin: 0;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		list-style-type: none;
		margin: 0 !important;
		padding: 0 !important;

		li {
			list-style: none;
		}
	}

	&.has-no-gutter &__item {
		padding: 0 !important;
	}

	&__item {

		figure,
		.block-editor-media-placeholder {
			padding: 0;
		}

		&:nth-child(1) {
			align-self: flex-end;
			width: 75%;

			figure,
			.block-editor-media-placeholder {
				padding-top: calc(330 / 495 * 100%);
			}
		}

		&:nth-child(2) {
			align-self: flex-end;
			margin-right: auto !important;
			width: 25%;

			figure,
			.block-editor-media-placeholder {
				padding-top: 100%;
			}
		}

		&:nth-child(3) {
			align-self: flex-start;
			margin-left: auto !important;
			width: 25%;

			figure,
			.block-editor-media-placeholder {
				padding-top: 100%;
			}
		}

		&:nth-child(4) {
			align-self: flex-start;
			width: 25%;

			figure,
			.block-editor-media-placeholder {
				padding-top: 100%;
			}
		}

		&:nth-child(5) {
			align-self: flex-start;
			width: 25%;

			figure,
			.block-editor-media-placeholder {
				padding-top: 150%;
			}
		}
	}

	.is-style-tiled &__item {

		&:nth-child(1),
		&:nth-child(2) {
			padding-bottom: 0 !important;
		}

		&:nth-child(1),
		&:nth-child(4) {
			width: 66.66%;

			figure,
			.block-editor-media-placeholder {
				padding-top: 66%;
			}
		}

		&:nth-child(2),
		&:nth-child(3) {
			width: 33.33%;

			figure,
			.block-editor-media-placeholder {
				padding-top: 100%;
			}
		}

		&:nth-child(3),
		&:nth-child(4) {
			padding-left: 0 !important;
		}
	}

	.is-style-layered &__item {
		align-self: flex-start;

		&:nth-child(1) {
			margin-left: calc(150 / 890 * 100%) !important;
			width: calc(358 / 890 * 100%);
			z-index: 4;

			figure,
			.block-editor-media-placeholder {
				padding-top: calc(492 / 358 * 100%);
			}
		}

		&:nth-child(2) {
			margin-left: calc(175 / 850 * 100%) !important;
			margin-top: calc(117 / 990 * 100%) !important;
			width: calc(198 / 890 * 100%);
			z-index: 2;

			&.is-selected {
				z-index: 4;
			}

			figure,
			.block-editor-media-placeholder {
				padding-top: 100%;
			}
		}

		&:nth-child(3) {
			margin-left: calc(328 / 890 * 100%) !important;
			margin-top: calc(249 / 890 * 100% * -1) !important;
			width: calc(492 / 890 * 100%);
			z-index: 3;

			figure,
			.block-editor-media-placeholder {
				padding-top: calc(340 / 492 * 100%);
			}
		}

		&:nth-child(4) {
			margin-top: calc(189 / 890 * 100% * -1) !important;
			width: calc(492 / 890 * 100%);
			z-index: 1;

			&.is-selected {
				z-index: 4;
			}

			figure,
			.block-editor-media-placeholder {
				padding-top: calc(378 / 492 * 100%);
			}
		}
	}

	&__figure {
		display: flex;
		margin: 0;
		position: relative;
		width: 100%;

		img {
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			vertical-align: middle;
			width: 100%;
		}
	}

	figcaption {
		bottom: 0;
		font-size: 13px;
		margin: 0;
		opacity: 0.9;
		padding: 30px 10px 10px;
		position: absolute;
		text-align: center;
		width: 100%;
	}

	&.has-caption-style-dark figcaption {
		background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 50%, transparent);
	}

	&.has-caption-style-light figcaption {
		background: linear-gradient(0deg, rgba($color: $white, $alpha: 0.93) 6.3%, rgba($color: $white, $alpha: 0.5) 61%, rgba(255, 255, 255, 0));
	}

	&:not(.has-caption-color).has-caption-style-dark figcaption {
		color: $white;
	}

	&:not(.has-caption-color).has-caption-style-light figcaption {
		color: $black;
	}

	$gutters: (
		"medium": calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * 2),
		"large": calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * 2),
		"huge": calc(var(--coblocks-spacing--4, #{map-get($spacing, 4)}) * 2),
		"custom": var(--coblocks-custom-gutter, 0),
	);

	@mixin gutter($padding) {

		.wp-block-coblocks-gallery-collage__item:nth-child(1),
		.wp-block-coblocks-gallery-collage__item:nth-child(2) {
			padding-bottom: $padding;
		}

		ul > *:not(:first-child) {
			padding-left: $padding;
		}
	}

	@include gutter(calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2));

	@each $g, $padding in $gutters {

		&.has-#{$g}-gutter {

			@include break-small() {

				@include gutter(#{$padding});
			}
		}
	}

	&.is-style-tiled {

		@mixin gutter-tiled($padding) {

			.wp-block-coblocks-gallery-collage__item:nth-child(2) {
				padding-left: $padding;
			}

			.wp-block-coblocks-gallery-collage__item:nth-child(3) {
				padding-right: $padding;
				padding-top: $padding;
			}

			.wp-block-coblocks-gallery-collage__item:nth-child(4) {
				padding-top: $padding;
			}
		}

		@include gutter-tiled(calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2));

		@each $g, $padding in $gutters {

			&.has-#{$g}-gutter {

				@include break-small() {

					@include gutter-tiled(#{$padding});
				}
			}
		}
	}
}

// Import legacy styles for older versions of CoBlocks
@import "legacy";
