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

.e-link-in-bio-var-7 {
	--e-link-in-bio-icon-background-color: #{$link-in-bio-cta-bg-color};
	--e-link-in-bio-icon-color: #{$white};
	--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__identity .e-link-in-bio__identity-image-cover {
		height: var(--e-link-in-bio-identity-image-cover-height, auto);
	}

	.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%;

		// Required to override defaults
		&.has-size-large {
			--e-link-in-bio-icon-gap: var(--e-link-in-bio-icon-gap-row) 0;
		}
	}

	.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__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__icon {
		--e-link-in-bio-icon-border-style: solid;

		&.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 + calc(var(--e-link-in-bio-icon-border-width) * 2));
			}
		}
	}

	.e-link-in-bio__icon-label {
		color: var(--e-link-in-bio-icon-text-color);
	}

	.e-link-in-bio__ctas {
		margin-block-start: 34px;
	}
}
