Keyfact: Default

.supt-card-keyfact {
	position: relative;
	padding: 16px $spacing-10 14px 18px;

	border-radius: $border-radius-brand;
	background: $color-grey-background;

	@media (min-width: $breakpoint-md) {
		padding: $spacing-7 $spacing-10 $spacing-7 20px;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: $border-radius-brand;
		transition: opacity $transition-fast ease-in-out;

		box-shadow:
			8px 8px 16px 0px $color-grey-1,
			-8px -8px 16px 0px $color-white;
	}

	&__inner {
		display: flex;
		gap: $spacing-3;

		@media (min-width: $breakpoint-md) {
			gap: $spacing-4;
		}
		@media (min-width: $breakpoint-lg) {
			gap: $spacing-6;
		}
	}

	&__content {
		align-self: center;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	&__icon {
		@mixin clamp --supt-card-keyfact-icon-size, 72, 90, $breakpoint-xs, $breakpoint-xl;

		position: relative;
		width: var(--supt-card-keyfact-icon-size);
		height: var(--supt-card-keyfact-icon-size);
		padding: 0 2px 3px 0;

		border-radius: 50%;

		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		&::after {
			content: '';
			position: absolute;
			inset: 2px;
			border-radius: 50%;
			box-shadow:
				-1px -1px 0px 0px $color-white inset,
				-2px -2px 2px 0px $color-grey-2 inset,
				-1px -1px 0px 0px $color-white,
				-2px -2px 2px 0px $color-grey-2 inset;
			z-index: -1;
		}

		svg {
			width: 100%;
			height: 100%;

			> circle:first-child {
				stroke-dasharray: 530;
				stroke-dashoffset: 530;
			}
		}
	}

	&__title {
		@extend %t-h3;
		@mixin clamp font-size, 24, 30, $breakpoint-xs, $breakpoint-xl;
		margin: 0;
		color: $color-black;
	}

	&__subtitle {
		@extend %t-body-m;
		color: $color-grey-5;
	}

	&__description {
		@extend %t-h4;
		font-weight: 400;
		color: $color-grey-5;
	}

	&__logo {
		width: 120px;
		height: auto;
		margin-top: 10px;
		object-fit: contain;
		object-position: left;
	}

	&__image {
		border-radius: $border-radius-brand-inner;
		overflow: hidden;
		width: 50%;
		flex-shrink: 0;

		img {
			width: 100%;
			height: 100%;
			aspect-ratio: 283/200;
			object-fit: cover;
		}
	}

	&.-dark {
		&::after {
			box-shadow:
				8px 8px 24px 0px rgb(102 0 14 / 30%),
				-8px -8px 24px 0px rgb(233 53 89 / 40%);
		}
	}

	&.-no-icon {
		padding-left: $spacing-10;
		min-height: 95px;
		display: flex;
		align-items: center;
		justify-content: center;

		@media (min-width: $breakpoint-md) {
			min-height: 115px;
		}

		.supt-card-keyfact__description {
			color: $color-black;
			text-align: center;
		}

		.supt-button__wrapper {
			position: absolute;
			inset: 0;
			z-index: -1;
			border-radius: $border-radius-brand;
			box-shadow: none;
		}
		.supt-button__inner {
			height: 100%;
		}
		.supt-button__inner,
		.supt-button__mask {
			border-radius: $border-radius-brand-inner;
		}
		.supt-button__mask__inner {
			border-radius: clamp(15px, 7.73px + 1.94vw, 31px);
		}

		&.-visible {
			.supt-button__mask {
				opacity: 1;

				&::before,
				&::after {
					animation-name: mask-animation;
				}
			}
		}
	}

	&.-with-image {
		padding: 16px;
		@mixin clamp padding-left, 24, 40, $breakpoint-xs, $breakpoint-xl;

		.supt-card-keyfact__title {
			@mixin clamp font-size, 18, 24, $breakpoint-xs, $breakpoint-xl;
			@mixin clamp line-height, 24, 28, $breakpoint-xs, $breakpoint-xl;
		}
	}
}