@import "@wordpress/base-styles/breakpoints";

.trial-banner {
	display: flex;
	padding: 40px;
	background-color: color-mix(in srgb, var(--color-neutral-0) 80%, transparent);
	box-shadow: none;

	@media (max-width: $break-mobile) {
		padding: 24px;
		margin: 0 20px;
	}

	&.entrepreneur-trial {
		color: var(--studio-black);
		background-color: #ebeefd;
		.trial-banner__content {
			.banner__content {
				.trial-banner__subtitle {
					color: var(--studio-black);
				}
			}
		}
	}

	.trial-banner__content {
		flex: 1;
		padding-right: 25%;

		@media (max-width: $break-mobile) {
			padding: 0;
			margin: 0;
		}

		.trial-banner__title {
			font-size: $font-title-medium;
			font-weight: 400;
			color: var(--studio-black);
			margin: 0;

			@media (max-width: $break-mobile) {
				font-size: $font-body-small;
				font-weight: 600;
			}
		}

		.trial-banner__subtitle {
			font-size: $font-body;
			font-weight: 400;
			margin: 15px 0;
			color: var(--color-neutral-40);

			@media (max-width: $break-mobile) {
				font-size: $font-body-extra-small;
				color: var(--color-neutral-80);
			}
		}
	}

	.trial-banner__chart-wrapper {
		@media (max-width: $break-mobile) {
			display: none;
		}

		margin-left: 50px;
		padding: 0;
		text-align: center;

		.trial-banner__chart-label {
			color: var(--color-neutral);
		}
	}
}
