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

.e-link-in-bio-var-5 {
	--e-link-in-bio-ctas-border-radius: #{$link-in-bio-border-radius-sharp};
	--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__ctas {

		&.has-type-button {
			grid-template-columns: repeat(2, minmax(0, 100px));
			grid-template-rows: auto;
			justify-content: center;
		}

		.e-link-in-bio__cta {

			// Move border to image
			&.has-border {
				border: none;

				.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);
				}
			}

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

		.e-link-in-bio__cta.is-type-button {
			flex-direction: column;
			font-size: 14px;

			.e-link-in-bio__cta-image {
				flex: 0 0 auto;
				margin-bottom: 4px;
			}

			.e-link-in-bio__cta-image-element {
				aspect-ratio: 1;
				height: auto;
			}
		}
	}

	.e-link-in-bio__identity-image-cover {

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