// sass-lint:disable mixins-before-declarations

@mixin _oTopperThemeSplitTextPortraitLeft($colors) {
	.o-topper__read-next {
		display: none;
	}

	.o-topper__headline {
	  &::after {
		content: none;
	  }
	}

	@include oPrivateGridRespondTo($until: M) {
		display:flex;
		flex-direction: column;
		padding: 0;

		.o-topper__content {
			order: 3;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20px 10px;
		}

		.o-topper__background {
			order: 2;
		}

		.o-topper__visual {
			order: 1;
			min-height: 350px;
		}


		@each $color-name in $colors {
			$o3-palette-name: if($color-name == 'matisse', 'o3-color-palette-#{$color-name}-blue', 'o3-color-palette-#{$color-name}');
			&.o-topper--color-#{$color-name} {
				.o-topper__image-caption {
					$background: oPrivateFoundationGet($o3-palette-name);
					$foreground: oPrivateColorsGetTextColor($background, $opacity: 100);
					color: oPrivateColorsMix($foreground, $background, 73);
					background-color: $background;
				}
			}
		}

		.o-topper__picture {
			img {
				position : relative;
			}
		}

		.o-topper__image-caption {
			padding-bottom: 10px;
		}
	}

	@include oPrivateGridRespondTo(M) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 66vw 1fr;

		.o-topper__content {
			grid-column: 1 / span 1;
			grid-row: 1;
			box-sizing: border-box;
			align-self: center;
		}

		.o-topper__background {
			grid-row: 1;
		}

		.o-topper__visual {
			grid-row: 1/span 2;
		}

		.o-topper__picture {
			width: 45%;
			float: right;
			height: 100%;
			position: relative;
		}

		.o-topper__image {
			@include oPrivateGridRespondTo($until: M) {
				max-height: 480px;
			}
		}

		.o-topper__image-caption {
			margin-bottom: 0;
			color: oPrivateFoundationGet("o3-color-palette-black-70");
		}
	}

	@supports (object-fit: cover) {


		@include oPrivateGridRespondTo(M) {

			.o-topper__visual {
				.o-topper__picture {
					height: 66vw;
				}
			}
		}
	}

	.o-topper__image-credit {
		top: 100%;
	}

	.o-topper__image-caption {
		position: relative;
		width: 100%;
		float: right;
		box-sizing: border-box;
	}
}