@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$hero-padding-xs: tokens.$layout-4 !default;
$hero-padding-sm: tokens.$layout-5 !default;
$hero-padding-default: tokens.$layout-6 !default;
$hero-padding-lg: tokens.$layout-7 !default;

$hero-min-height-xs: 200px !default;
$hero-min-height-sm: 300px !default;
$hero-min-height-default: 400px !default;
$hero-min-height-lg: 500px !default;
$hero-detail-max-width: 500px !default;
$hero-content-half-width: 50% !default;
$hero-content-fluid-width: 45% !default;
$hero-details-content-fluid-width: 35% !default;
$hero-content-width: tokens.$reading-max-width !default;

$hero-image-width: calc((100% - 2 * tokens.$layout-gap) * 0.55) !default;
$hero-image-width-widescreen: calc((100% - 2 * tokens.$layout-widescreen-gap) * 0.55) !default;

.hero {
	@extend %layout-gap;

	display: flex;
	position: relative;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;

	.hero-content {
		z-index: tokens.$zindex-active;
		padding-block: $hero-padding-sm;

		@include mixins.desktop {
			width: $hero-content-fluid-width;
			min-height: $hero-min-height-default;
			padding-block: $hero-padding-default;
			padding-inline-end: $hero-padding-sm;
		}
	}

	.theme-high-contrast & .hero-details-card {
		background: unset !important;
	}

	.hero-details {
		display: flex;
		padding-block: $hero-padding-xs;

		@include mixins.tablet {
			justify-content: flex-end;
			padding-block: $hero-padding-sm;
			padding-inline-start: $hero-padding-xs;
		}

		@include mixins.desktop {
			min-height: $hero-min-height-default;
			padding-block: $hero-padding-default;
			padding-inline: $hero-padding-sm;
		}

		.hero-details-card {
			align-self: flex-start;
			backdrop-filter: blur(20px);
			background-color: #{tokens.$body-background};

			@include mixins.desktop {
				max-width: $hero-detail-max-width;
				background: linear-gradient(
					116deg,
					#{tokens.$body-background} 23.94%,
					#{tokens.$border-white-high-contrast} 200%
				);
				margin-inline-start: $hero-padding-xs;
			}
		}
	}

	&:not(.hero-image) {
		.hero-content {
			@include mixins.desktop {
				width: 100%;
				max-width: $hero-content-width;
			}
		}
	}

	@include mixins.desktop {
		&.hero-xs {
			.hero-content {
				min-height: $hero-min-height-xs;
				padding-block: $hero-padding-xs;
			}
		}

		&.hero-sm {
			.hero-content {
				min-height: $hero-min-height-sm;
				padding-block: $hero-padding-sm;
			}
		}

		&.hero-lg {
			.hero-content {
				min-height: $hero-min-height-lg;
				padding-block: $hero-padding-lg;
			}
		}
	}

	.hero-card {
		position: relative;
		padding: tokens.$spacer-5;
		border: none;
		background-color: transparent;
		z-index: 1;

		@include mixins.tablet {
			padding: tokens.$spacer-10;
		}

		@include mixins.desktop {
			border-inline: 1px solid tokens.$border;
			border-block-end: 1px solid tokens.$border;
			border-end-start-radius: tokens.$border-radius-lg;
			border-end-end-radius: tokens.$border-radius-lg;
		}
	}

	.hero-background {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

		video,
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&.hero-image::before {
		display: none;
		position: absolute;
		inset-block-start: 0;
		width: $hero-image-width;
		height: 100%;
		background-image: var(--hero-background-image);
		background-repeat: no-repeat;
		background-size: cover;
		content: ' ';
		inset-inline-end: tokens.$layout-gap;

		@include mixins.desktop {
			display: block;
		}

		@include mixins.widescreen {
			width: $hero-image-width-widescreen;
			inset-inline-end: tokens.$layout-widescreen-gap;
		}

		@media (forced-colors: active) {
			background-image: none !important;
		}

		.theme-light & {
			--hero-background-image: var(--hero-background-image-light);
		}

		.theme-dark & {
			--hero-background-image: var(--hero-background-image-dark);
		}

		.theme-high-contrast & {
			--hero-background-image: none;
		}
	}

	// Set direction to prevent image flip for rtl

	[dir='rtl'] &.hero-image,
	&.hero-image:dir(rtl) {
		direction: ltr;

		.hero-content,
		.hero-details-card {
			direction: rtl;
		}

		&[class^='gradient-border-'] {
			direction: ltr;
		}
	}
}