@import "@automattic/typography/styles/fonts";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.domain-upsell__card {
	h3 {
		font-family: $brand-serif;
		font-style: normal;
		font-weight: 400;
		font-size: rem(32px);
		line-height: 40px;
		color: var(--studio-gray-100);
	}

	p {
		margin-top: 8px;
	}

	&-dismiss {
		position: absolute;
		width: 18px;
		height: 18px;
		top: 16px;
		right: 16px;
		color: var(--color-text-subtle);
		button {
			cursor: pointer;
			height: 18px;
		}

	}

	.domain-upsell-subtitle {
		margin-bottom: 12px;
		font-size: $font-body;
		color: var(--color-text-subtle);
	}

	.domain-upsell-description {
		font-size: rem(14px);
		font-style: italic;
		color: var(--color-text-subtle);
	}

	.domain-upsell-actions {
		display: flex;
		flex-direction: column;
		justify-content: left;
		padding: 24px 0 0;
		gap: 16px;
		@media (min-width: ($break-large + 1)) {
			flex-direction: row;
		}
	}

	.domain-upsell-illustration {
		position: relative;

		width: 100%;
		padding: 0;

		img {
			width: 100%;
		}

		svg {
			position: absolute;
			top: 27%;
			left: 15%;
			height: 30%;
			width: 70%;
		}
	}

}

html[dir="rtl"] {
	.domain-upsell-illustration {
		&,
		text {
			transform: scale(-1, 1);
		}
	}
}
