@import './link-in-bio-vars';

.e-link-in-bio {

	// Layout config
	--e-link-in-bio-border-color: transparent;
	--e-link-in-bio-border-style: none;
	--e-link-in-bio-border-width: 0;
	--e-link-in-bio-container-height: auto;
	--e-link-in-bio-container-width: #{$link-in-bio-default-container-width};
	--e-link-in-bio-content-align-h: center;
	--e-link-in-bio-content-align-v: center;
	--e-link-in-bio-content-width: #{$link-in-bio-default-content-width};
	--e-link-in-bio-full-height: 100vh;
	--e-link-in-bio-gutter-block-end: 45px;
	--e-link-in-bio-gutter-block-start: 38px;
	--e-link-in-bio-gutter-inline: 40px;

	@supports (height: 100dvh) {
		--e-link-in-bio-full-height: 100dvh;
	}

	// Identity config - Cover
	--e-link-in-bio-identity-image-cover-border-bottom-width: 0;
	--e-link-in-bio-identity-image-cover-border-color: transparent;
	--e-link-in-bio-identity-image-cover-border-style: none;
	--e-link-in-bio-identity-image-cover-height: 170px;
	--e-link-in-bio-identity-image-cover-position: center center;

	// Identity config - Profile
	--e-link-in-bio-identity-image-profile-border-color: transparent;
	--e-link-in-bio-identity-image-profile-position: center center;
	--e-link-in-bio-identity-image-profile-border-radius: 50%;
	--e-link-in-bio-identity-image-profile-border-style: none;
	--e-link-in-bio-identity-image-profile-border-width: 0;
	--e-link-in-bio-identity-image-profile-width: 115px;

	// Bio config
	--e-link-in-bio-heading-color: inherit;
	--e-link-in-bio-title-color: inherit;
	--e-link-in-bio-about-heading-color: inherit;
	--e-link-in-bio-description-color: #{$link-in-bio-text-color-alt};

	// Icons config
	--e-link-in-bio-icon-background-color: transparent;
	--e-link-in-bio-icon-border-color: transparent;
	--e-link-in-bio-icon-border-style: none;
	--e-link-in-bio-icon-border-width: 0;
	--e-link-in-bio-icon-color: inherit;
	--e-link-in-bio-icon-columns: 3;
	--e-link-in-bio-icon-gap: 20px 29px;
	--e-link-in-bio-icon-size: #{$link-in-bio-icon-size-small};

	// CTAs config
	--e-link-in-bio-ctas-background-color: #{$link-in-bio-cta-bg-color};
	--e-link-in-bio-ctas-border-color: transparent;
	--e-link-in-bio-ctas-border-radius: #{$link-in-bio-border-radius-rounded};
	--e-link-in-bio-ctas-border-style: none;
	--e-link-in-bio-ctas-border-width: 0;
	--e-link-in-bio-ctas-gap: 22px;
	--e-link-in-bio-ctas-padding-block-end: 17px;
	--e-link-in-bio-ctas-padding-block-start: 17px;
	--e-link-in-bio-ctas-padding-inline-end: 20px;
	--e-link-in-bio-ctas-padding-inline-start: 20px;
	--e-link-in-bio-ctas-text-color: #{$white};

	// Image links config
	--e-link-in-bio-image-links-border-color: transparent;
	--e-link-in-bio-image-links-border-style: solid;
	--e-link-in-bio-image-links-border-width: 0;
	--e-link-in-bio-image-links-columns: 2;
	--e-link-in-bio-image-links-gap: 10px;
	--e-link-in-bio-image-links-height: auto;

	// Background config
	--background-overlay-opacity: 0.5;

	align-items: var(--e-link-in-bio-content-align-h);
	border-color: var(--e-link-in-bio-border-color);
	border-style: var(--e-link-in-bio-border-style);
	border-width: var(--e-link-in-bio-border-width);
	display: flex;
	flex-direction: column;
	justify-content: var(--e-link-in-bio-content-align-v);
	margin-inline: auto;
	max-width: 100%;
	min-height: var(--e-link-in-bio-container-height);
	padding: var(--e-link-in-bio-gutter-block-start) var(--e-link-in-bio-gutter-inline) var(--e-link-in-bio-gutter-block-end);
	position: relative;
	width: var(--e-link-in-bio-container-width);

	&.has-border {
		--e-link-in-bio-border-style: solid;
	}

	@mixin full-height($min: null, $max: null) {
		$query: null;

		@if $min != null and $max != null {
			$query: "(min-width: " + $min + ") and (max-width: " + $max + ")";
		} @else if $max != null {
			$query: "(max-width: " + $max + ")";
		} @else if $min != null {
			$query: "(min-width: " + $min + ")";
		}

		@if $query != null {
			@media #{$query} {
				--e-link-in-bio-container-height: var(--e-link-in-bio-full-height, 100vh);
			};
		}
	}

	&.is-full-height-mobile {
		@include full-height(null, $screen-mobile-max);
	}

	&.is-full-height-mobile_extra {
		@include full-height($screen-mobile-extra-min, $screen-mobile-extra-max);
	}

	&.is-full-height-tablet {
		@include full-height($screen-tablet-min, $screen-tablet-max);
	}

	&.is-full-height-tablet_extra {
		@include full-height($screen-tablet-extra-min, $screen-tablet-extra-max);
	}

	&.is-full-height-laptop {
		@include full-height($screen-laptop-min, $screen-laptop-max);
	}

	&.is-full-height-desktop {

		@include full-height($screen-desktop-min, null);

		&.is-full-height-widescreen {
			@include full-height($screen-desktop-min, $screen-desktop-max);
		}
	}

	&.is-full-height-widescreen {
		@include full-height($screen-widescreen-min, null);
	}

	&.is-full-width {
		--e-link-in-bio-container-width: 100%;
	}

	&__bg {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		display: grid;
		inset: 0;
		position: absolute;
		z-index: $ground-layer;
	}

	&__bg-overlay {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: var(--background-overlay-opacity);
	}

	&__content {
		color: $link-in-bio-text-color-default;
		display: flex;
		flex-direction: column;
		font-family: var(--e-global-typography-text-font-family, 'Poppins'), Sans-serif;
		max-width: 100%;
		text-align: center;
		width: var(--e-link-in-bio-content-width);
		z-index: $first-layer;

		* {
			word-wrap: break-word;
		}
	}

	&__identity {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		margin-block-end: 14px;
		margin-block-start: calc(var(--e-link-in-bio-gutter-block-start) * -1);

		.e-link-in-bio__identity-image {
			display: flex;
			position: relative;
		}

		.e-link-in-bio__identity-image-element {
			display: block;
			flex: 1 1 100%;
			object-fit: cover;
		}

		.e-link-in-bio__identity-image-cover {
			align-self: start;
			border-color: var(--e-link-in-bio-identity-image-cover-border-color);
			border-style: var(--e-link-in-bio-identity-image-cover-border-style);
			border-width: 0 0 var(--e-link-in-bio-identity-image-cover-border-bottom-width) 0;
			grid-column: 1;
			grid-row: 1;
			margin-inline: calc(var(--e-link-in-bio-gutter-inline) * -1);
			max-height: var(--e-link-in-bio-identity-image-cover-height);
			overflow: hidden;
			width: calc(100% + calc(var(--e-link-in-bio-gutter-inline) * 2));

			&.has-border {
				--e-link-in-bio-identity-image-cover-border-style: solid;
			}

			.e-link-in-bio__identity-image-element {
				object-position: var(--e-link-in-bio-identity-image-cover-position);
			}
		}

		.e-link-in-bio__identity-image-profile {
			align-self: center;
			aspect-ratio: 1;
			border-color: var(--e-link-in-bio-identity-image-profile-border-color);
			border-radius: var(--e-link-in-bio-identity-image-profile-border-radius);
			border-style: var(--e-link-in-bio-identity-image-profile-border-style);
			border-width: var(--e-link-in-bio-identity-image-profile-border-width);
			grid-column: 1;
			grid-row: 1;
			overflow: hidden;
			margin-block-start: var(--e-link-in-bio-gutter-block-start);
			margin-block-end: 17px;
			margin-inline: auto;
			max-width: 100%;
			width: var(--e-link-in-bio-identity-image-profile-width);

			&.has-border {
				--e-link-in-bio-identity-image-profile-border-style: solid;
			}

			&.has-style-square {
				--e-link-in-bio-identity-image-profile-border-radius: 0;
			}

			.e-link-in-bio__identity-image-element {
				aspect-ratio: inherit;
				object-position: var(--e-link-in-bio-identity-image-profile-position);
			}
		}

		.e-link-in-bio__identity-image-cover + .e-link-in-bio__identity-image-profile {
			margin-block-start: 17px;
		}
	}

	&__bio {

		> * {
			margin-block: 0;
		}
	}

	&__heading {
		color: var(--e-link-in-bio-heading-color);
		font-size: 36px;
		font-weight: 600;
		line-height: 42px;
	}

	&__about-heading {
		color: var(--e-link-in-bio-about-heading-color);
		font-size: 16px;
		font-weight: 500;
		line-height: 20px;
	}

	&__title {
		color: var(--e-link-in-bio-title-color);
		font-size: 20px;
		font-weight: 500;
		line-height: 35px;
	}

	&__description {
		color: var(--e-link-in-bio-description-color);
		font-size: 16px;
		font-weight: 300;
		line-height: 24px;
		margin-block-start: 20px;
	}

	&__bio--footer {
		margin-block-start: 34px;

		.e-link-in-bio__description {
			font-size: 12px;
			font-weight: 500;
			line-height: 20px;
			margin-block-start: 0;
		}

		.e-link-in-bio__about-heading + .e-link-in-bio__description {
			margin-block-start: 3px;
		}
	}

	&__icons {
		display: flex;
		flex-flow: row wrap;
		gap: var(--e-link-in-bio-icon-gap);
		justify-content: center;
		margin-block-start: 20px;

		i {
			font-size: var(--e-link-in-bio-icon-size);
		}

		&.has-size-medium {
			--e-link-in-bio-icon-size: #{$link-in-bio-icon-size-medium};
		}

		&.has-size-large {
			--e-link-in-bio-icon-gap: 20px 24px;
			--e-link-in-bio-icon-size: #{$link-in-bio-icon-size-large};
		}
	}

	&__icon {
		display: flex;

		.e-link-in-bio__icon-link {
			align-items: center;
			color: inherit;
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;

			&:hover,
			&:focus,
			&:active {
				color: inherit;
			}
		}

		.e-link-in-bio__icon-svg {
			align-items: center;
			color: var(--e-link-in-bio-icon-color);
			display: flex;
			justify-content: center;
		}

		svg {
			fill: currentColor;
			height: var(--e-link-in-bio-icon-size);
		}

		i {
			font-size: var(--e-link-in-bio-icon-size);
		}

		.e-link-in-bio__icon-label {
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			text-align: center;
		}
	}

	&__image-links {
		display: grid;
		grid-template-columns: repeat(var(--e-link-in-bio-image-links-columns, 2), minmax(0, 1fr));
		grid-template-rows: auto;
		gap: var(--e-link-in-bio-image-links-gap);
		margin-block-start: 24px;

		&.has-1-columns {
			--e-link-in-bio-image-links-columns: 1;
			--e-link-in-bio-image-links-gap: 14px;
		}

		&.has-3-columns {
			--e-link-in-bio-image-links-columns: 3;
			--e-link-in-bio-image-links-gap: 5px;
		}

		.e-link-in-bio__image-links-link {
			display: grid;
		}

		// Specificity required to override .elementor img defaults
		img.e-link-in-bio__image-links-img {
			aspect-ratio: 1;
			border-color: var(--e-link-in-bio-image-links-border-color);
			border-style: var(--e-link-in-bio-image-links-border-style);
			border-width: var(--e-link-in-bio-image-links-border-width);
			display: block;
			height: var(--e-link-in-bio-image-links-height, auto);
			object-fit: cover;
			width: 100%;
		}
	}

	&__ctas {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		gap: var(--e-link-in-bio-ctas-gap);
		margin-block-start: 31px;

		&.has-type-link {
			--e-link-in-bio-ctas-gap: 10px;

			justify-items: center;
		}

		&.has-type-divider {
			--e-link-in-bio-ctas-gap: 0;
		}

		.e-link-in-bio__cta {
			color: var(--e-link-in-bio-ctas-text-color);
			display: flex;
			font-size: 16px;
			font-weight: 500;
			line-height: 20px;

			&:hover,
			&:focus,
			&:active {
				color: var(--e-link-in-bio-ctas-text-color);
			}
		}

		.e-link-in-bio__cta-image {
			flex: 0 0 min(50%, 140px);
		}

		.e-link-in-bio__cta-image-element {
			aspect-ratio: 140 / 100;
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;
		}

		.e-link-in-bio__cta-text {
			align-items: center;
			display: flex;
			flex: 1 1 auto;
			justify-content: center;
		}

		.e-link-in-bio__cta.is-type-button {
			border-radius: var(--e-link-in-bio-ctas-border-radius);
			overflow: hidden;

			&.has-border {
				--e-link-in-bio-ctas-border-style: solid;
				border-color: var(--e-link-in-bio-ctas-border-color);
				border-style: var(--e-link-in-bio-ctas-border-style);
				border-width: var(--e-link-in-bio-ctas-border-width);
			}

			&.has-corners-rounded {
				--e-link-in-bio-ctas-border-radius: #{$link-in-bio-border-radius-rounded};
			}

			&.has-corners-round {
				--e-link-in-bio-ctas-border-radius: #{$link-in-bio-border-radius-round};
			}

			&.has-corners-sharp {
				--e-link-in-bio-ctas-border-radius: #{$link-in-bio-border-radius-sharp};
			}

			.e-link-in-bio__cta-text {
				background-color: var(--e-link-in-bio-ctas-background-color);
				padding-block-end: var(--e-link-in-bio-ctas-padding-block-end);
				padding-block-start: var(--e-link-in-bio-ctas-padding-block-start);
				padding-inline-end: var(--e-link-in-bio-ctas-padding-inline-end);
				padding-inline-start: var(--e-link-in-bio-ctas-padding-inline-start);
			}
		}

		.e-link-in-bio__cta.is-type-link {
			--e-link-in-bio-ctas-text-color: #{$link-in-bio-cta-bg-color};

			font-weight: 700;
			margin-block: 17px;
			justify-content: center;
		}
	}

	// Specificity needed to overwrite core link styles
	.e-link-in-bio__content .e-link-in-bio__ctas {

		.e-link-in-bio__cta.is-type-link {
			text-decoration: underline;
		}
	}
}
