import React, { useEffect } from 'react';
import {
	ArrowRightIcon,
	ArrowRightStartOnRectangleIcon,
	RectangleStackIcon,
} from '@heroicons/react/24/outline';
import { __ } from '@wordpress/i18n';
import { removeQueryArgs } from '@wordpress/url';
import { Button, DefaultStep, PreviousStepLink } from '../../components/index';
import { useStateValue } from '../../store/store';
import LimitExceedModal from '../../components/limit-exceeded-modal';
import { WandIcon } from '../ui/icons';
import './style.scss';
import { getStepIndex, removeLocalStorageItem } from '../../utils/functions';
const { showClassicTemplates } = astraSitesVars;

const SiteType = () => {
	const [ { builder, currentIndex, limitExceedModal }, dispatch ] =
		useStateValue();

	const zipPlans = astraSitesVars?.zip_plans;
	const sitesRemaining = zipPlans?.plan_data?.remaining;
	const aiSitesRemainingCount = sitesRemaining?.ai_sites_count;

	useEffect( () => {
		const startTime = localStorage.getItem( 'st-import-start' );
		const endTime = localStorage.getItem( 'st-import-end' );

		if ( startTime || endTime ) {
			localStorage.removeItem( 'st-import-start' );
			localStorage.removeItem( 'st-import-end' );
		}
	} );

	const handleKeyPress = ( e, navigate ) => {
		e = e || window.event;

		if ( e.keyCode === 37 ) {
			//Left Arrow
			if ( e.target.previousSibling ) {
				e.target.previousSibling.focus();
			}
		} else if ( e.keyCode === 39 ) {
			//Right Arrow
			if ( e.target.nextSibling ) {
				e.target.nextSibling.focus();
			}
		} else if ( e.key === 'Enter' ) {
			//Enter
			navigate();
		}
	};

	useEffect( () => {
		const urlParams = new URLSearchParams( window.location.search );

		const token = urlParams.get( 'token' );
		if ( token ) {
			if (
				typeof aiSitesRemainingCount === 'number' &&
				aiSitesRemainingCount <= 0
			) {
				dispatch( {
					type: 'set',
					limitExceedModal: {
						...limitExceedModal,
						open: true,
					},
				} );
			} else {
				dispatch( {
					type: 'set',
					currentIndex: 1,
				} );
			}
		}
	}, [] );

	const handleBuildWithAIPress = () => {
		if (
			typeof aiSitesRemainingCount === 'number' &&
			aiSitesRemainingCount <= 0
		) {
			dispatch( {
				type: 'set',
				limitExceedModal: {
					...limitExceedModal,
					open: true,
				},
			} );
			return;
		}
		const content = new FormData();
		content.append( 'action', 'astra-sites-change-page-builder' );
		content.append( '_ajax_nonce', astraSitesVars?._ajax_nonce );
		content.append( 'page_builder', 'ai-builder' );
		fetch( ajaxurl, {
			method: 'post',
			body: content,
		} );

		window.location.href =
			astraSitesVars?.adminURL + 'themes.php?page=ai-builder';
	};

	useEffect( () => {
		if (
			currentIndex === getStepIndex( 'page-builder' ) &&
			builder !== 'fse'
		) {
			dispatch( {
				type: 'set',
				builder: 'ai-builder',
			} );
		}
	}, [] );

	const colClass = showClassicTemplates ? 'md:grid-cols-2' : 'md:grid-cols-1';

	return (
		<DefaultStep
			content={
				<div className="flex-1 flex flex-col justify-center items-center pb-14 sm:pb-10 lg:pb-0">
					<div className="w-full flex justify-center">
						<h1 className="w-[390px]">
							{ __(
								'How would you like to build your website?',
								'astra-sites'
							) }
						</h1>
					</div>
					<p className="screen-description" />
					<div
						className={ `max-w-full lg:max-w-[800px] grid grid-cols-1 ${ colClass } place-content-center gap-6 ist-fadeinUp` }
					>
						<div
							className="flex-col flex bg-white pt-10 pb-8 px-8 text-left relative  rounded-xl shadow-card gradient-border-cover gradient-border-cover-button max-w-[356px]"
							tabIndex="0"
							onKeyDown={ ( event ) =>
								handleKeyPress( event, handleBuildWithAIPress )
							}
						>
							<WandIcon className="w-12 h-12 text-accent-st-secondary stroke-1" />
							<div className="mt-6 text-xl font-semibold leading-7 mb-2.5 text-heading-text">
								{ __( 'AI Website Builder', 'astra-sites' ) }
							</div>
							<div className="zw-sm-normal text-body-text">
								{ ' ' }
								{ __(
									'Experience the future of website building. We offer AI features powered by ZipWP to help you build your website 10x faster.',
									'astra-sites'
								) }{ ' ' }
							</div>
							<div className="pt-10 mt-auto">
								<Button
									className="w-full h-10"
									onClick={ handleBuildWithAIPress }
								>
									<span>
										{ __( 'Build with AI', 'astra-sites' ) }
									</span>{ ' ' }
									<ArrowRightIcon className="w-5 h-5 ml-2" />
								</Button>
							</div>
						</div>
						{ showClassicTemplates && (
							<div
								className="flex-col flex bg-white pt-10 pb-8 px-8 text-left relative rounded-xl max-w-[356px]"
								tabIndex="0"
								onKeyDown={ ( event ) =>
									handleKeyPress( event, () => {
										dispatch( {
											type: 'set',
											currentIndex: 2,
										} );
									} )
								}
							>
								<RectangleStackIcon className="w-12 h-12 text-accent-st-secondary stroke-1" />
								<div className="mt-6 text-xl font-semibold leading-7 mb-2.5 text-heading-text">
									{ __(
										'Classic Starter Templates',
										'astra-sites'
									) }
								</div>
								<div className="zw-sm-normal text-body-text">
									{ ' ' }
									{ __(
										'Begin the website-building process with our extensive library of professionally designed templates tailored to meet your requirements.',
										'astra-sites'
									) }{ ' ' }
								</div>
								<div className="pt-10 mt-auto">
									<Button
										className="w-full h-10"
										type="secondary"
										onClick={ () => {
											dispatch( {
												type: 'set',
												builder:
													builder === 'ai-builder'
														? 'gutenberg'
														: builder,
												currentIndex:
													builder === 'fse' ? 2 : 1,
											} );
											removeLocalStorageItem(
												'st-scroll-position'
											);
										} }
									>
										<span>
											{ __(
												'Build with Templates',
												'astra-sites'
											) }
										</span>{ ' ' }
										<ArrowRightIcon className="w-5 h-5 ml-2" />
									</Button>
								</div>
							</div>
						) }
					</div>
					<LimitExceedModal
						onOpenChange={ () => {
							// remove params
							const urlParams = new URLSearchParams(
								window.location.search
							);
							const token = urlParams.get( 'token' );
							if ( token ) {
								const url = removeQueryArgs(
									window.location.href,
									'token',
									'email',
									'action',
									'credit_token'
								);

								window.location = url;
							}
						} }
					/>
					{ /* Back to the wordpress dashboard button */ }
					<button
						className="mx-auto flex items-center justify-center gap-2 mt-10 border-0 bg-transparent focus:outline-none text-zip-body-text text-sm font-normal cursor-pointer"
						onClick={ () =>
							window.open( starterTemplates.adminUrl, '_self' )
						}
					>
						<ArrowRightStartOnRectangleIcon className="w-5 h-5" />
						<span>
							{ __( 'Exit to Dashboard', 'astra-sites' ) }
						</span>
					</button>
				</div>
			}
			actions={
				<>
					<PreviousStepLink
						before
						customizeStep={ true }
						onClick={ () => {
							window.location.href = starterTemplates.adminUrl;
						} }
					>
						{ __( 'Back', 'astra-sites' ) }
					</PreviousStepLink>
				</>
			}
		/>
	);
};

export default SiteType;
URI.MakeAbsolute
TYPE: bool
VERSION: 2.1.0
DEFAULT: false
--DESCRIPTION--

<p>
    Converts all URIs into absolute forms. This is useful when the HTML
    being filtered assumes a specific base path, but will actually be
    viewed in a different context (and setting an alternate base URI is
    not possible). %URI.Base must be set for this directive to work.
</p>
--# vim: et sw=4 sts=4
/*! elementor - v3.28.0 - 22-04-2025 */
.e-link-in-bio{--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:360px;--e-link-in-bio-content-align-h:center;--e-link-in-bio-content-align-v:center;--e-link-in-bio-content-width:280px;--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;--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;--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;--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:#324a6d;--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:25px;--e-link-in-bio-ctas-background-color:#467ff7;--e-link-in-bio-ctas-border-color:transparent;--e-link-in-bio-ctas-border-radius:20px;--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:#fff;--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-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)}@supports (height:100dvh){.e-link-in-bio{--e-link-in-bio-full-height:100dvh}}.e-link-in-bio.has-border{--e-link-in-bio-border-style:solid}@media (max-width:767px){.e-link-in-bio.is-full-height-mobile{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}@media (min-width:-1) and (max-width:-1){.e-link-in-bio.is-full-height-mobile_extra{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}@media (min-width:768px) and (max-width:1024px){.e-link-in-bio.is-full-height-tablet{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}@media (min-width:-1) and (max-width:-1){.e-link-in-bio.is-full-height-laptop,.e-link-in-bio.is-full-height-tablet_extra{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}@media (min-width:1025px){.e-link-in-bio.is-full-height-desktop{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}@media (min-width:1025px) and (max-width:99999px){.e-link-in-bio.is-full-height-desktop.is-full-height-widescreen{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}@media (min-width:-1){.e-link-in-bio.is-full-height-widescreen{--e-link-in-bio-container-height:var(--e-link-in-bio-full-height,100vh)}}.e-link-in-bio.is-full-width{--e-link-in-bio-container-width:100%}.e-link-in-bio__bg{display:grid;inset:0;position:absolute;z-index:0}.e-link-in-bio__bg,.e-link-in-bio__bg-overlay{background-position:50%;background-repeat:no-repeat;background-size:cover}.e-link-in-bio__bg-overlay{opacity:var(--background-overlay-opacity)}.e-link-in-bio__content{color:#1c2448;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:1}.e-link-in-bio__content *{word-wrap:break-word}.e-link-in-bio__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 .e-link-in-bio__identity-image{display:flex;position:relative}.e-link-in-bio__identity .e-link-in-bio__identity-image-element{display:block;flex:1 1 100%;-o-object-fit:cover;object-fit:cover}.e-link-in-bio__identity .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% + var(--e-link-in-bio-gutter-inline) * 2)}.e-link-in-bio__identity .e-link-in-bio__identity-image-cover.has-border{--e-link-in-bio-identity-image-cover-border-style:solid}.e-link-in-bio__identity .e-link-in-bio__identity-image-cover .e-link-in-bio__identity-image-element{-o-object-position:var(--e-link-in-bio-identity-image-cover-position);object-position:var(--e-link-in-bio-identity-image-cover-position)}.e-link-in-bio__identity .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;margin-block-end:17px;margin-block-start:var(--e-link-in-bio-gutter-block-start);margin-inline:auto;max-width:100%;overflow:hidden;width:var(--e-link-in-bio-identity-image-profile-width)}.e-link-in-bio__identity .e-link-in-bio__identity-image-profile.has-border{--e-link-in-bio-identity-image-profile-border-style:solid}.e-link-in-bio__identity .e-link-in-bio__identity-image-profile.has-style-square{--e-link-in-bio-identity-image-profile-border-radius:0}.e-link-in-bio__identity .e-link-in-bio__identity-image-profile .e-link-in-bio__identity-image-element{aspect-ratio:inherit;-o-object-position:var(--e-link-in-bio-identity-image-profile-position);object-position:var(--e-link-in-bio-identity-image-profile-position)}.e-link-in-bio__identity .e-link-in-bio__identity-image-cover+.e-link-in-bio__identity-image-profile{margin-block-start:17px}.e-link-in-bio__bio>*{margin-block:0}.e-link-in-bio__heading{color:var(--e-link-in-bio-heading-color);font-size:36px;font-weight:600;line-height:42px}.e-link-in-bio__about-heading{color:var(--e-link-in-bio-about-heading-color);font-size:16px;font-weight:500;line-height:20px}.e-link-in-bio__title{color:var(--e-link-in-bio-title-color);font-size:20px;font-weight:500;line-height:35px}.e-link-in-bio__description{color:var(--e-link-in-bio-description-color);font-size:16px;font-weight:300;line-height:24px;margin-block-start:20px}.e-link-in-bio__bio--footer{margin-block-start:34px}.e-link-in-bio__bio--footer .e-link-in-bio__description{font-size:12px;font-weight:500;line-height:20px;margin-block-start:0}.e-link-in-bio__bio--footer .e-link-in-bio__about-heading+.e-link-in-bio__description{margin-block-start:3px}.e-link-in-bio__icons{display:flex;flex-flow:row wrap;gap:var(--e-link-in-bio-icon-gap);justify-content:center;margin-block-start:20px}.e-link-in-bio__icons i{font-size:var(--e-link-in-bio-icon-size)}.e-link-in-bio__icons.has-size-medium{--e-link-in-bio-icon-size:30px}.e-link-in-bio__icons.has-size-large{--e-link-in-bio-icon-gap:20px 24px;--e-link-in-bio-icon-size:35px}.e-link-in-bio__icon{display:flex}.e-link-in-bio__icon .e-link-in-bio__icon-link{align-items:center;color:inherit;display:flex;flex:1 1 auto;flex-direction:column}.e-link-in-bio__icon .e-link-in-bio__icon-link:active,.e-link-in-bio__icon .e-link-in-bio__icon-link:focus,.e-link-in-bio__icon .e-link-in-bio__icon-link:hover{color:inherit}.e-link-in-bio__icon .e-link-in-bio__icon-svg{align-items:center;color:var(--e-link-in-bio-icon-color);display:flex;justify-content:center}.e-link-in-bio__icon svg{fill:currentColor;height:var(--e-link-in-bio-icon-size)}.e-link-in-bio__icon i{font-size:var(--e-link-in-bio-icon-size)}.e-link-in-bio__icon .e-link-in-bio__icon-label{font-size:14px;font-weight:500;line-height:20px;text-align:center}.e-link-in-bio__image-links{display:grid;gap:var(--e-link-in-bio-image-links-gap);grid-template-columns:repeat(var(--e-link-in-bio-image-links-columns,2),minmax(0,1fr));grid-template-rows:auto;margin-block-start:24px}.e-link-in-bio__image-links.has-1-columns{--e-link-in-bio-image-links-columns:1;--e-link-in-bio-image-links-gap:14px}.e-link-in-bio__image-links.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 .e-link-in-bio__image-links-link{display:grid}.e-link-in-bio__image-links 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);-o-object-fit:cover;object-fit:cover;width:100%}.e-link-in-bio__ctas{display:grid;gap:var(--e-link-in-bio-ctas-gap);grid-template-columns:minmax(0,1fr);grid-template-rows:auto;margin-block-start:31px}.e-link-in-bio__ctas.has-type-link{--e-link-in-bio-ctas-gap:10px;justify-items:center}.e-link-in-bio__ctas.has-type-divider{--e-link-in-bio-ctas-gap:0}.e-link-in-bio__ctas .e-link-in-bio__cta{display:flex;font-size:16px;font-weight:500;line-height:20px}.e-link-in-bio__ctas .e-link-in-bio__cta,.e-link-in-bio__ctas .e-link-in-bio__cta:active,.e-link-in-bio__ctas .e-link-in-bio__cta:focus,.e-link-in-bio__ctas .e-link-in-bio__cta:hover{color:var(--e-link-in-bio-ctas-text-color)}.e-link-in-bio__ctas .e-link-in-bio__cta-image{flex:0 0 min(50%,140px)}.e-link-in-bio__ctas .e-link-in-bio__cta-image-element{aspect-ratio:140/100;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.e-link-in-bio__ctas .e-link-in-bio__cta-text{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button{border-radius:var(--e-link-in-bio-ctas-border-radius);overflow:hidden}.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button.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)}.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button.has-corners-rounded{--e-link-in-bio-ctas-border-radius:20px}.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button.has-corners-round{--e-link-in-bio-ctas-border-radius:50px}.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button.has-corners-sharp{--e-link-in-bio-ctas-border-radius:0}.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button .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__ctas .e-link-in-bio__cta.is-type-link{--e-link-in-bio-ctas-text-color:#467ff7;font-weight:700;justify-content:center;margin-block:17px}.e-link-in-bio .e-link-in-bio__content .e-link-in-bio__ctas .e-link-in-bio__cta.is-type-link{text-decoration:underline}.e-link-in-bio-var-2{--e-link-in-bio-gutter-block-end:35px;--e-link-in-bio-identity-image-cover-height:215px;--e-link-in-bio-identity-image-profile-width:130px;--e-link-in-bio-identity-image-profile-border-color:#fff;--e-link-in-bio-identity-image-profile-border-style:solid;--e-link-in-bio-identity-image-profile-border-width:3px}.e-link-in-bio-var-2 .e-link-in-bio__identity{grid-template-rows:1fr auto auto}.e-link-in-bio-var-2 .e-link-in-bio__identity .e-link-in-bio__identity-image-cover{grid-row:1/span 2}.e-link-in-bio-var-2 .e-link-in-bio__identity .e-link-in-bio__identity-image-profile{grid-row:2/span 2}.e-link-in-bio-var-2 .e-link-in-bio__identity .e-link-in-bio__identity-image-cover+.e-link-in-bio__identity-image-profile{margin-block:17px}.e-link-in-bio-var-2 .e-link-in-bio__icons{margin-block-start:35px}.e-link-in-bio-var-3{--e-link-in-bio-gutter-block-end:20px;--e-link-in-bio-ctas-border-radius:0;--e-link-in-bio-ctas-gap:8px}.e-link-in-bio-var-3 .e-link-in-bio__ctas .e-link-in-bio__cta.has-border{border:none}.e-link-in-bio-var-3 .e-link-in-bio__ctas .e-link-in-bio__cta.has-border .e-link-in-bio__cta-image{--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)}.e-link-in-bio-var-3 .e-link-in-bio__ctas .e-link-in-bio__cta.has-corners-round,.e-link-in-bio-var-3 .e-link-in-bio__ctas .e-link-in-bio__cta.has-corners-rounded{--e-link-in-bio-ctas-border-radius:0}.e-link-in-bio-var-4{--e-link-in-bio-ctas-text-color:#1c2448;--e-link-in-bio-ctas-background-color:transparent;--e-link-in-bio-ctas-divider-color:#1c2448;--e-link-in-bio-ctas-divider-width:1px;--e-link-in-bio-ctas-divider-style:solid;--e-link-in-bio-ctas-padding-inline-end:16px;--e-link-in-bio-ctas-padding-inline-start:16px}.e-link-in-bio-var-4 .e-link-in-bio__ctas{grid-gap:0;margin-block-end:28px;margin-block-start:28px}.e-link-in-bio-var-4 .e-link-in-bio__ctas .e-link-in-bio__cta{border-bottom:var(--e-link-in-bio-ctas-divider-width) var(--e-link-in-bio-ctas-divider-style) var(--e-link-in-bio-ctas-divider-color);font-size:24px;font-weight:600;line-height:42px}.e-link-in-bio-var-4 .e-link-in-bio__ctas .e-link-in-bio__cta.has-corners-rounded,.e-link-in-bio-var-5{--e-link-in-bio-ctas-border-radius:0}.e-link-in-bio-var-5{--e-link-in-bio-ctas-gap:20px 15px;--e-link-in-bio-ctas-padding-block-end:5px;--e-link-in-bio-ctas-padding-block-start:5px;--e-link-in-bio-ctas-padding-inline-end:7px;--e-link-in-bio-ctas-padding-inline-start:7px}.e-link-in-bio-var-5 .e-link-in-bio__ctas.has-type-button{grid-template-columns:repeat(2,minmax(0,100px));grid-template-rows:auto;justify-content:center}.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.has-border{border:none}.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.has-border .e-link-in-bio__cta-image{--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)}.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.has-corners-round,.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.has-corners-rounded{--e-link-in-bio-ctas-border-radius:0}.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button{flex-direction:column;font-size:14px}.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button .e-link-in-bio__cta-image{flex:0 0 auto;margin-bottom:4px}.e-link-in-bio-var-5 .e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button .e-link-in-bio__cta-image-element{aspect-ratio:1;height:auto}.e-link-in-bio-var-5 .e-link-in-bio__identity-image-cover .e-link-in-bio__identity-image-element{-o-object-position:var(--e-link-in-bio-identity-image-profile-position);object-position:var(--e-link-in-bio-identity-image-profile-position)}.e-link-in-bio-var-7{--e-link-in-bio-icon-background-color:#467ff7;--e-link-in-bio-icon-color:#fff;--e-link-in-bio-icon-gap-col:10px;--e-link-in-bio-icon-gap-row:20px;--e-link-in-bio-icon-gap:var(--e-link-in-bio-icon-gap-row) 0;--e-link-in-bio-icon-text-color:inherit}.e-link-in-bio-var-7 .e-link-in-bio__identity .e-link-in-bio__identity-image-cover{height:var(--e-link-in-bio-identity-image-cover-height,auto)}.e-link-in-bio-var-7 .e-link-in-bio__icons{align-items:start;gap:var(--e-link-in-bio-icon-gap);margin-block-start:34px;margin-inline:auto;max-width:254px;width:100%}.e-link-in-bio-var-7 .e-link-in-bio__icons.has-size-large{--e-link-in-bio-icon-gap:var(--e-link-in-bio-icon-gap-row) 0}.e-link-in-bio-var-7 .e-link-in-bio__icon{flex:1 1 calc(100% / var(--e-link-in-bio-icon-columns));max-width:calc(100% / var(--e-link-in-bio-icon-columns));padding-inline:calc(var(--e-link-in-bio-icon-gap-col) / 2)}.e-link-in-bio-var-7 .e-link-in-bio__icon-svg{aspect-ratio:1;background-color:var(--e-link-in-bio-icon-background-color);border-radius:100%;height:calc(var(--e-link-in-bio-icon-size) + 30px);padding:15px}.e-link-in-bio-var-7 .e-link-in-bio__icon{--e-link-in-bio-icon-border-style:solid}.e-link-in-bio-var-7 .e-link-in-bio__icon.has-border .e-link-in-bio__icon-svg{border-color:var(--e-link-in-bio-icon-border-color);border-style:var(--e-link-in-bio-icon-border-style);border-width:var(--e-link-in-bio-icon-border-width);height:calc(var(--e-link-in-bio-icon-size) + 30px + var(--e-link-in-bio-icon-border-width) * 2)}.e-link-in-bio-var-7 .e-link-in-bio__icon-label{color:var(--e-link-in-bio-icon-text-color)}.e-link-in-bio-var-7 .e-link-in-bio__ctas{margin-block-start:34px}