@use "@automattic/jetpack-base-styles/style";

.jp-components__decorative-card {
	display: flex;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 0 15px var(--jp-gray);
	position: relative;
	width: 360px;
	max-width: 100%;
	height: 280px;
	margin: 0 auto;
	margin-bottom: 3rem;

	&__image,
	&__content {
		width: 50%;
	}

	&__image {
		background: var(--jp-gray);
		background-size: cover;
		position: relative;

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 24px;
			left: 24px;
			width: 38px;
			height: 8px;
			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
			background-image: url('data:image/svg+xml,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
		}
	}

	&__content {
		background: #fff;
		padding: 2rem;
	}

	&__icon-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80px;
		height: 80px;
		background: var(--jp-red);
		border-radius: 50px;
	}

	&__icon {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-position: center, center;
		background-repeat: no-repeat;

		&--unlink {
			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>');
		}
	}

	&__lines {
		display: block;
		width: 100%;
		height: 12px;
		border-radius: 6px;
		background: #e9eff5;
		position: relative;

		&::before,
		&::after {
			content: "";
			display: block;
			width: 100%;
			height: 12px;
			border-radius: 6px;
			background: #e9eff5;
			position: relative;
			top: calc(100% + 16px);
		}

		&::after {
			top: calc(100% + 32px);
			width: 75%;
		}
	}

	// Variants
	&--vertical {
		flex-direction: column;

		.jp-components__decorative-card__image,
		.jp-components__decorative-card__content {
			width: 100%;
			height: 50%;
		}

		.jp-components__decorative-card__lines {
			max-width: 135px;
			margin-left: auto;
			margin-right: auto;

			&::before,
			&::after {
				margin-left: auto;
				margin-right: auto;
			}
		}
	}
}
