/**
 * General
 */

:root {
	--growthstack-color-text: #1d2327;
	--growthstack-color-border: #e0e0e0;
	--growthstack-color-grey-light: #f8f8f8;
	--growthstack-color-grey-dark: #767676;

	--growthstack-color-table-border: #ddd;

	--gs-snackbar-color-success: #4da84f;
	--gs-snackbar-color-error: #c44a4c;
}

@import "./../shared/ABConversionBar";
@import "./../shared/Analysis";
@import "./../shared/AnalysisHeader";
@import "./../shared/AnalysisContent";
@import "./../shared/AnalysisHeaderActions";
@import "./../shared/AnalysisHeaderContent";
@import "./../shared/AnalysisFilters";
@import "./../shared/AnalysisGraph";
@import "./../shared/AnalysisGraphAndSummary";
@import "./../shared/AnalysisTrend";
@import "./../shared/AnalysisSummary";
@import "./../shared/AnalysisSummaryHeadline";
@import "./../shared/AnalysisSummaryRow";
@import "./../shared/AnalysisSummaryABTable";
@import "./../shared/AnalysisSummaryABTableRow";
@import "./../shared/AnalysisPie";
@import "./../shared/AnalysisPieDetails";
@import "./../shared/MaskedControl";
@import "./../shared/Message";
@import "./../shared/MultiSelectCombobox";
@import "./../shared/Notice";
@import "./../shared/NoDataPlaceholder";
@import "./../shared/PageModalButtonWithType";
@import "./../shared/Steps";
@import "./../shared/Table";
@import "./../shared/Tabs";
@import "./../shared/Toggle";

#wpcontent:has(.notice):has(.growthstack-view) .growthstack-view-header {
	margin-bottom: 0 !important;
}

body:has(.growthstack-view) .components-tooltip {
	max-width: 460px;
}

// @todo prefix classes
.container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/**
 * Page analytics
 */

.wp-admin {
	.gs-analytics-modal,
	.gs-ab-modal {
		h1 {
			font-weight: 400;
			font-size: 1.25rem;
			color: var(--growthstack-color-dark);
		}

		&__title {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;

			h2 {
				margin: 0;
				font-size: 24px;
			}
		}

		&__status-label {
			border-radius: 1.875rem;
			border: 1px solid var(--growthstack-color-border);
			background: #fff;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
			padding: 0.3125rem 0.6875rem;
			color: #ff8a00;

			&[data-is-published="true"] {
				color: #31bb00;
			}
		}

		&__meta {
			// margin-top: 16px;
			display: flex;
			flex-wrap: wrap;
			gap: 14px;

			&-item {
				display: flex;
				align-items: center;
				gap: 4px;
				color: var(--growthstack-color-dark);

				a {
					color: inherit;
					text-decoration: none;

					&:hover,
					&:focus {
						text-decoration: underline;
					}
				}
			}
		}

		&__header,
		&__tabs > [role="tablist"] {
			background: #fff;
			margin-left: -32px;
			margin-right: -32px;
			padding-left: 32px;
			padding-right: 32px;
		}

		&__header {
			padding-top: 0;
			padding-bottom: 8px;
			margin-top: -4px;
			// border-bottom: 1px solid var(--growthstack-color-border);
		}

		&__tabs > [role="tablist"] {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			margin-bottom: 32px;
			position: relative;
			border-bottom: 1px solid #dcdcde;

			// Animated indicator
			&::before {
				content: "";
				position: absolute;
				bottom: -1px;
				left: 0;
				width: calc(var(--indicator-width, 0) * 1px);
				height: 2px;
				background-color: #2271b1;
				transform: translateX(calc(var(--indicator-left, 0) * 1px));
				transition: transform 0.2s ease-out, width 0.2s ease-out;
			}

			// Disable transition on initial render
			&[data-disable-transition]::before {
				transition: none;
			}

			button {
				position: relative;
				padding: 18px 14px;
				border-radius: 0;
				display: block;
				min-height: 0;
				height: auto;
				background: transparent;
				border: none;
				color: #50575e;
				transition: color 0.1s ease-in-out;

				&:hover {
					color: #2c3338;
				}

				&.active-tab {
					color: #2271b1;
				}

				.gs-tab-count {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					min-width: 18px;
					height: 18px;
					padding: 0 5px;
					margin-left: 5px;
					background: #dcdcde;
					color: #50575e;
					border-radius: 6px;
					font-size: 11px;
					font-weight: 500;
					line-height: 1;
					transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
				}

				&:hover .gs-tab-count {
					background: #c3c4c7;
					color: #2c3338;
				}

				&.active-tab .gs-tab-count {
					background: #2271b1;
					color: #fff;
				}
			}
		}

		.components-modal__content {
			padding-top: 0 !important;
			background: #f6f7f9;
		}

		&__header-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 4px;
			padding-right: 8px;

			&__link {
				display: flex;
				align-items: center;
				gap: 4px;
				text-decoration: none !important;
				color: #1d2327 !important;

				&:hover,
				&:focus {
					text-decoration: underline !important;
				}

				svg {
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	.components-modal__header .components-modal__header-heading {
		font-size: 1rem;
		font-weight: 600;
	}

	.gs-analytics-modal {
		.components-modal__header {
			padding-bottom: 6px;
		}
	}
}

/**
 * Overview tab
 */

.gs-analytics-overview {
	display: flex;
	flex-direction: column;
	gap: 20px;

	&__error {
		padding: 0.5rem;
		background: #facfd2;
		margin-bottom: 1rem;
	}

	&__filters {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 24px;
		margin-bottom: 0.75rem;

		& > * {
			width: 100%;
			max-width: 320px;
		}

		&__loader {
			display: flex;
			align-items: center;
			padding-top: 8px;
		}
	}

	&__page-link {
		display: inline-block;
		padding: 0;
		margin: 0;
		border: none;
		background: none;
		font: inherit;
		text-align: inherit;
		line-height: inherit;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: #2271b1;
		text-decoration: underline;
	}

	&__info-boxes {
		&.is-skeleton {
			min-height: 156px !important;
		}
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;
		word-break: break-word;
		@media (min-width: 600px) {
			gap: 1.25rem;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		@media (min-width: 900px) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		text-align: center;

		.gs-analysis-summary-headline {
			padding-top: 24px;
			padding-bottom: 24px;
			margin: 0;
			@media (min-width: 900px) {
				box-shadow: -1px 0 0 0 #dfe3e7;

				&:first-of-type {
					box-shadow: none;
				}
			}
		}

		.gs-analysis-summary-headline__label {
			justify-content: center;
		}
	}

	&__graph-box {
		display: flex;
		flex-direction: column;
		gap: 18px;

		&__filters {
			display: flex;
			flex-wrap: wrap;
			gap: 8px 24px;
			margin-bottom: 0.75rem;

			& > * {
				width: 100%;
				max-width: 320px;
			}
		}
	}

	&__set-winner-cta {
		margin-top: 2rem;

		.button {
			padding: 0.25rem 0.75rem;
			margin-top: 0.25rem;
		}
	}
}

@keyframes gs-skeleton-loading {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

.gs-box {
	--gs-box-padding: 1.5rem;
	border: 1px solid var(--growthstack-color-border);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
	padding: var(--gs-box-padding);
	background: #fff;
	border-radius: 6px;

	&.is-skeleton {
		min-height: 400px;
		position: relative;
		overflow: hidden;
		// background: #f2f2f2;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(
				90deg,
				rgba(0, 0, 0, 0)   0%,
				rgba(0, 0, 0, 0.02) 20%,
				rgba(0, 0, 0, 0.0375)  50%,
				rgba(0, 0, 0, 0.02) 80%,
				rgba(0, 0, 0, 0)   100%
			);
			animation: gs-skeleton-loading 1.5s ease-in-out infinite;
		}
	}

	&__title {
		margin-top: 0;
		margin-bottom: 0.5em;
		font-size: 1.2em;
	}

	&__section-title {
		margin: 0;
	}

	&__desc {
		margin-top: 0;
		margin-bottom: 20px;
	}

	&__float-action {
		float: right;
	}

	&__separator {
		margin-left: calc(-1 * var(--gs-box-padding));
		margin-right: calc(-1 * var(--gs-box-padding));
		border-top: 1px solid var(--growthstack-color-border);
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	&--headerless {
		padding-top: 0;
	}

	&__label {
		display: inline-block;
		background: rgba(181, 191, 201, 0.2);
		border-radius: 4px;
		padding: 2px 4px;
		font-size: 11px;
		color: #3c434a;
	}
}

.gs-header-box {
	--gs-box-padding: 1.5rem;
	--gs-box-y-padding: 0;
	padding: var(--gs-box-y-padding) var(--gs-box-padding);
	// border: 1px solid var(--growthstack-color-border);
	// background: #fff;
	// border-radius: 6px;
	// box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
	padding-inline: 0;
	margin-bottom: var(--gs-box-padding);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	h2 {
		margin: 0;
		@media (min-width: 600px) {
			font-size: 1.375rem;
		}
	}

	p {
		max-width: 760px;
		margin-bottom: 0;
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 24px;
		flex-wrap: wrap;
	}
}

.gs-tooltip.gs-tooltip {
	position: relative;
	max-width: 400px;
	padding: 8px;
	border-radius: 2px;
}

.gs-tooltip-icon {
	svg {
		width: 22px;
		height: 22px;
	}
}

.gs-box--segment-upsell {
	display: flex;
	flex-direction: column;

	.gs-analysis {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}
}

.gs-segment-upsell-content {
	// flex-grow: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: relative;
	min-height: 314px;

	&__button {
		margin-top: 8px !important;
	}

	> * {
		position: relative;
		z-index: 5;
	}

	img {
		width: 300px;
		height: 300px;
		max-width: 100%;
		max-height: 100%;
		filter: blur(4px);
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		object-fit: contain;
		object-position: center;
		opacity: 0.25;
		pointer-events: none;
	}

	svg {
		width: 22px;
		height: 22px;
		margin-bottom: 8px;
	}

	p {
		margin: 0;
	}

	strong {
		font-size: 14px;
	}
}

// .gs-modal-content {
// 	&__header {
// 		text-align: center;
// 		margin-block: 32px;
// 		h2 {
// 			margin: 0;
// 		}
// 	}
// }
.growthstack-info-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	flex: 1 0 0;
	align-self: stretch;
	transition: 0.2s ease-in-out;

	&.is-loading {
		opacity: 0.5;
	}

	&__label {
		font-size: 0.8125rem;
		font-style: normal;
		font-weight: 700;
		line-height: 1.25rem;
		text-transform: uppercase;
	}

	&__value {
		font-size: 2rem;
		font-style: normal;
		font-weight: 700;
		line-height: 2.375rem;
	}

	&__description {
		// font-size: 0.6875rem;
		font-style: normal;
		font-weight: 400;
		line-height: 1.25rem;
	}
}

/**
 * Site analytics
 */

:root {
	--growthstack-overview-col-gap: 1rem;
}

@media (min-width: 763px) {
	:root {
		--growthstack-overview-col-gap: 1.25rem;
	}
}

.toplevel_page_growthstack,
.growthstack_page_growthstack-dashboard,
.growthstack_page_growthstack-analytics,
.growthstack_page_growthstack-ab-analytics,
.growthstack_page_growthstack-personalization,
.growthstack_page_growthstack-forms,
.growthstack_page_growthstack-support {
	#wpcontent {
		background: #f8f8f8;
	}
}

.wp-admin {
	.growthstack-analytics-site {
		width: 100%;
		max-width: 1600px;
		display: flex;
		flex-direction: column;
		gap: var(--growthstack-overview-col-gap);

		.gs-tabs__list {
			margin-bottom: 1.5rem;
		}
	}

	.growthstack-analytics-site__overview {
		// margin-top: var(--growthstack-overview-col-gap);
		// display: flex;
		// flex-direction: column;
		// gap: var(--growthstack-overview-col-gap);
		> * + * {
			margin-top: var(--growthstack-overview-col-gap);
		}
	}
	// .growthstack-analytics-site__cols {
	// 	display: grid;
	// 	gap: var(--growthstack-overview-col-gap);
	// 	grid-template-columns: 1fr;
	// 	@media (min-width: 600px) {
	// 		grid-template-columns: repeat(2, minmax(0, 1fr));
	// 	}
	// 	.gs-table__wrapper {
	// 		max-height: 240px;
	// 		overflow: auto;
	// 		th:nth-of-type(1),
	// 		td:nth-of-type(1) {
	// 			width: 60%;
	// 			min-width: 180px;
	// 		}
	// 		th:nth-of-type(2),
	// 		td:nth-of-type(2) {
	// 			width: 40%;
	// 			min-width: 80px;
	// 		}
	// 	}
	// }
	.gs-analytics-overview__pages {
		th:nth-of-type(1),
		td:nth-of-type(1) {
			width: 50%;
			min-width: 180px;
		}

		th:nth-of-type(2),
		td:nth-of-type(2) {
			width: 25%;
			min-width: 80px;
		}

		th:nth-of-type(3),
		td:nth-of-type(3) {
			width: 25%;
			min-width: 80px;
		}
	}
}

/**
 * AB Analyics
 */

.gs-ab-table-wrap {
	width: 100%;
	overflow: auto;
}

.gs-ab-table {
	margin-top: 8px;
	border-radius: 8px;
	border: 1px solid #dfe3e7;
	width: 100%;
	overflow: hidden;
	@media (max-width: 900px) {
		min-width: 100%;
		width: 900px;
	}

	&__header,
	&__row {
		display: grid;
		grid-template-columns: minmax(340px, 2fr)  repeat(2, minmax(260px, 1fr));
		align-items: center;
		width: 100%;

		& > * {
			padding: 14px 11px;
		}
	}

	&__header {
		font-weight: 600;

		& > * {
			padding-block: 12px;
		}
	}

	&__row {
		border-top: 1px solid #dfe3e7;
	}

	&__header {
		background: #f6f7f9;

		&__cell {
			position: relative;
			display: flex;
			align-items: center;
			gap: 5px;
		}
	}

	&__metric {
		display: block;
		font-weight: 600;
	}

	[data-is-winner="true"] {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	&__expander {
		// button reset
		border: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		background: transparent;
		color: inherit;
		font: inherit;
		line-height: normal;
		-webkit-font-smoothing: inherit;
		-moz-osx-font-smoothing: inherit;
		-webkit-appearance: none;
		appearance: none;
		text-align: left;
		word-break: break-word;
		white-space: normal;
		// others
		min-height: 38px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
		cursor: pointer;

		& > * {
			flex-shrink: 0;
		}

		h3 {
			margin: 0;
			font-size: 14px;
			font-weight: 600;
			color: var(--wp-admin-theme-color, #3858e9);
		}

		p {
			margin: 4px 0 0 0;
		}

		svg {
			transition: 0.1s ease-in-out;
			width: 11px;
			height: 11px;
		}

		&[aria-expanded="true"] svg {
			transform: rotate(90deg);
		}
	}

	&__expander-content {
		width: 100%;
	}

	&__details {
		padding-block: 0 20px;
		padding-inline: 30px;
		width: 100%;

		.gs-analysis {
			.gs-analysis-header-content {
				gap: 5px;

				h2 {
					font-size: 14px;
				}
			}
		}
	}

	&__goal-value {
		margin-top: 1px;
		display: inline-block;
		background: #b5bfc933;
		border-radius: 4px;
		font-size: 12px;
		padding: 2px 4px;
	}

	&__goals {
		display: grid;
		--columns: 1;
		@media (min-width: 600px) {
			--columns: 2;
		}
		@media (min-width: 900px) {
			--columns: 3;
		}
		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
		gap: 10px;
		margin-top: 6px;
		margin-bottom: 20px;
	}

	&__goal {
		--icon-size: 18px;
		word-break: break-word;
		width: 100%;
		display: grid;
		grid-template-columns: var(--icon-size) minmax(0, 1fr);
		gap: 10px;
		align-items: center;
		border: 1px solid #cbcbcb;
		text-align: left;
		height: auto;
		max-height: none;
		min-height: 0;
		padding: 10px 12px;
		border-radius: 1px;

		& + .goal-list-item {
			margin-top: 6px;
		}

		&__icon {
			display: flex;
			align-items: center;

			svg {
				width: var(--icon-size);
				height: var(--icon-size);
			}
		}

		&__title {
			display: block;
			padding-bottom: 2px;
		}

		&__name {
			display: block;
			font-size: 12px;
			padding-bottom: 1px;
		}

		&__value {
			display: block;
			font-size: 12px;
		}
	}
}

.gs-ab-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 12px;
	line-height: 0;
	font-weight: 600;
	border-radius: 50%;
	color: #fff;

	&.gs-ab-item--a {
		background: #007cbb;
	}

	&.gs-ab-item--b {
		background: #f69;
	}

	.gs-analysis-summary & {
		margin-inline: auto;
	}
}

.gs-ab-end {
	display: flex;
	align-items: stretch;
	margin-top: 24px;
	flex-direction: column;
	gap: 16px;
	@media (min-width: 600px) {
		flex-direction: row;
		gap: 20px;
	}

	&__option {
		width: 100%;
		max-width: 368px;
		padding: 24px;
		border-radius: 8px;
		border: 1px solid #dfe3e7;
		display: flex;
		flex-direction: column;
		gap: 16px;

		& > :first-child {
			margin-top: 0;
		}

		& > :last-child {
			margin-bottom: 0;
		}

		h3 {
			font-size: 15px;
			font-weight: 600;
			display: flex;
			gap: 5px;
			align-items: center;
		}

		&__content {
			flex-grow: 1;

			& > :first-child {
				margin-top: 0;
			}

			& > :last-child {
				margin-bottom: 0;
			}
		}

		&__actions {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
		}

		&[data-is-winner="true"] {
			border-color: #c1c5c9;
		}

		&[data-is-loser="true"] {
			opacity: 0.4;
			--wp-components-color-accent: #777;

			.gs-ab-item {
				background: #777;
			}

			&:hover {
				opacity: 1;
			}

		}
	}
}

/**
 * Personalization analytics
 */

.gs-personalization-analytics {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.gs-personalization-analytics-table-wrap {
	width: 100%;
	overflow: auto;
}

.gs-personalization-analytics-table {
	border-radius: 8px;
	border: 1px solid #dfe3e7;
	min-width: 100%;
	width: max-content;
	overflow: hidden;

	&__header,
	&__row {
		display: grid;
		grid-template-columns: 360px repeat(4, minmax(108px, 1fr));
		align-items: center;

		& > * {
			padding: 9px 11px;
		}
	}

	&__header {
		font-weight: 600;

		& > * {
			padding-block: 12px;
		}
	}

	&__row {
		border-top: 1px solid #dfe3e7;
	}

	&__header {
		background: #f6f7f9;
	}

	&__variant-name {
		font-weight: 600;
		display: block;
		font-size: 14px;
		color: var(--wp-admin-theme-color, #3858e9);
	}

	&__variant-rules {
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	&__variant-rule {
		background: rgba(181, 191, 201, 0.2);
		border-radius: 4px;
		padding: 2px 4px;
		font-size: 11px;
	}

	&__expander {
		// button reset
		border: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		background: transparent;
		color: inherit;
		font: inherit;
		line-height: normal;
		-webkit-font-smoothing: inherit;
		-moz-osx-font-smoothing: inherit;
		-webkit-appearance: none;
		appearance: none;
		text-align: left;
		word-break: break-word;
		white-space: normal;
		// others
		min-height: 38px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
		cursor: pointer;

		& > * {
			flex-shrink: 0;
		}

		svg {
			transition: 0.1s ease-in-out;
			width: 11px;
			height: 11px;
		}

		&[aria-expanded="true"] svg {
			transform: rotate(90deg);
		}
	}

	&__expander-content {
		width: 100%;
	}

	&__details {
		border-top: 1px solid #dfe3e7;
		padding-block: 20px;
		padding-inline: 30px;

		.gs-analysis {
			.gs-analysis-header-content {
				gap: 5px;

				h2 {
					font-size: 14px;
				}
			}
		}
	}
}

/**
 * A/B
 */

.gs-analytics__ab {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 24px;

	.gs-table__wrapper {
		margin-top: 20px;
	}

	&__table {
		&__variation {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			justify-content: space-between;
			align-items: center;
			padding-right: 0.75rem;

			&__title {
				display: flex;
				align-items: center;
			}
		}

		&__indicator {
			width: 0.625rem;
			height: 0.625rem;
			border-radius: 45%;
			margin-right: 0.5rem;
			display: inline-block;

			&--a {
				background: #007cbb;
			}

			&--b {
				background: #f69;
			}
		}

		th:nth-of-type(1),
		td:nth-of-type(1) {
			width: 30%;
			min-width: 180px;
			// padding-right: 1.25rem;
		}

		th:nth-of-type(2),
		td:nth-of-type(2) {
			width: 17.5%;
			min-width: 90px;
		}

		th:nth-of-type(3),
		td:nth-of-type(3) {
			width: 17.5%;
			min-width: 90px;
		}

		th:nth-of-type(4),
		td:nth-of-type(4) {
			width: 17.5%;
			min-width: 90px;
		}

		th:nth-of-type(5),
		td:nth-of-type(5) {
			width: 17.5%;
			min-width: 90px;
		}
	}
}

.gs-ab-advanced {
	.gs-ab-advanced__button {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 8px 0;
		height: auto;
		margin-top: 10px;
		margin-bottom: -8px;
		opacity: 0.75;
		margin-inline: auto;

		&:hover {
			opacity: 1;
		}

		svg {
			width: 12px;
			height: 12px;
			display: inline-block;
		}

		&[aria-expanded="true"] {
			opacity: 1;

			svg {
				transform: rotate(180deg);
			}
			// display: none;
		}
	}

	&__content {
		// background: #f6f6f6;
		border: 1px solid #dfe3e7;
		border-radius: 6px;
		margin-top: 20px;
		padding: 16px;
		width: 100%;

		& > :first-child {
			margin-top: 0;
		}

		& > :last-child {
			margin-bottom: 0;
		}
	}
}

.gs-modal {
	&__actions {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 1.5rem;
	}
}

.gs-flex {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.gs-flex--justify-center {
	justify-content: center;
}

.gs-flex--justify-between {
	justify-content: space-between;
}

.gs-flex--column {
	flex-direction: column;
	align-items: flex-start;
}

.gs-flex--align-start {
	align-items: flex-start;
}

.gs-settings-form {
	h3 {
		margin-top: 32px;
		margin-bottom: 16px;
		padding-bottom: 10px;
		border-bottom: 1px solid #dfe3e7;
	}

	p:not(.gs-settings-label, .components-base-control__help) {
		margin-top: 0;
	}

	.gs-settings-label {
		margin-bottom: 8px;
		color: #3c434a;
		text-transform: none;
		font-size: 14px;
		font-weight: 500;
	}

	.components-base-control__field {
		margin: 0;
	}

	.gs-toggle {
		margin-bottom: 16px;
	}
}

.gs-flex > .gs-toggle {
	margin-bottom: 0;
}

.gs-field-segment {
	margin-bottom: 16px;
	padding: 20px;
	border: 1px solid #dfe3e7;
	border-radius: 7px;

	.gs-toggle {
		margin-bottom: 0;
	}

	.gs-toggle--checked + .components-base-control {
		margin-top: 16px;
		margin-bottom: 0 !important;
	}

	&.gs-field-segment--nostyle {
		padding: 0;
		border: none;
	}

	.components-base-control {
		margin-bottom: 0;
	}
}

.gs-settings-form,
.gs-modal {
	.components-base-control {
		margin-bottom: 8px;
		&:not(.gs-multiselect__combobox) {
			margin-bottom: 16px;
		}

		&__help {
			margin-top: 4px;
			margin-bottom: 0;
		}
	}
}

.gs-text-control,
.components-base-control.gs-select-control.components-select-control {
	width: 100%;

	.components-flex {
		width: 100%;
	}

	&.gs-select-control--error {
		.components-select-control__input {
			border-color: #fbc1bc;
			background-color: #fdedec;
		}
	}

	.components-base-control__label,
	.components-input-control__label {
		color: #3c434a;
		text-transform: none;
		font-size: 14px;
		font-weight: 500;
	}

	.components-text-control__input,
	.components-select-control__input {
		height: 38px;
		padding-left: 12px;
		padding-right: 12px;
		color: #353a40;
		border-radius: 7px;
		border: 1px solid #ced3d9;
		box-shadow: 0 3px 3px 0 #0000000a;
		font-size: 14px;
	}

	.components-input-control__backdrop {
		border-radius: 7px;
		border-color: transparent;
	}
}

.gs-submit-container {
	display: flex;
	gap: 10px;
	margin: 20px -24px 0 -24px;
	padding: 20px 24px 0 24px;
	border-top: 1px solid #dfe3e7;
	justify-content: center;

	button.components-button {
		column-gap: 5px;
	}
}

.wp-admin .gs-badge {
	font-size: 9px;
	min-height: 14px;
	border-radius: 8px;
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.6;
	padding: 0 7px;
	background-color: #e2f3ec;
	color: #439146;
	margin-left: 2px;
}

.wp-admin:has(.gs-banner) .growthstack-view {
	padding-top: 16px;
}

.growthstack-view-banner {
	margin-left: -20px;
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	// background: var(--growthstack-primary-lightest);

	border-bottom: 1px solid #CDE9DE;
	background: linear-gradient(135deg, #E2F3EC 14.76%, #CFEADF 85.36%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	// color: #fff;

	/* border-bottom: 1px solid #ccd0d4; */
	width: calc(100% + 20px);
	box-sizing: border-box;

	* {
		box-sizing: border-box;
	}

	&__inner {
		flex-grow: 1;
		gap: 0 0.75rem;
		display: flex;
		align-items: center;
		max-width: var(--growthstack-view-max-width);
		padding-inline: 10px;
		margin: 0 auto;
		width: 100%;
	}
}

.gs-banner {
	--columns: 1;
	--gap: 16px;
	display: grid;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	gap: var(--gap);
	align-items: center;
	width: 100%;
	padding-block: 8px;
	@media (min-width: 900px) {
		--columns: 2;
		--gap: 48px;
	}
	&__main {
		padding-block: 32px;
		& > * {
			max-width: 500px;
		}
	}
	&__side {
		display: flex;
		align-items: center;
		// justify-content: center;
		img {
			max-width: 496px;
			width: 100%;
			height: auto;
		}
		@media (max-width: 900px) {
			display: none;
		}
	}
	&__eyebrow {
		--margin: 10px;
		margin-bottom: var(--margin);
		@media (min-width: 900px) {
			--margin: 12px;
		}
		span {
			--size: 14px;
			font-weight: 600;
			font-size: var(--size);
			color: #4ca74e;
			@media (min-width: 900px) {
				--size: 15px;
			}
		}
	}
	&__title {
		--margin: 10px;
		margin-bottom: var(--margin);
		@media (min-width: 900px) {
			--margin: 12px;
		}
		h2 {
			--size: 20px;
			margin: 0;
			font-size: var(--size);
			line-height: 1.25;
			@media (min-width: 900px) {
				--size: 28px;
			}
		}
	}
	&__description {
		p {
			--size: 13px;
			margin: 0;
			font-size: var(--size);
			line-height: 1.6;
			display: block;
			@media (min-width: 900px) {
				--size: 14px;
			}
		}
	}
	&__ctas {
		--margin: 16px;
		margin-top: var(--margin);
		@media (min-width: 900px) {
			--margin: 18px;
		}
		a {
			--padding-y: 11px;
			--size: 12px;
			text-decoration: none;
			display: inline-block;
			padding: var(--padding-y) 36px var(--padding-y) 18px;
			border-radius: 32px;
			font-size: var(--size);
			color: #fff;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M8.313.656c0-.355.273-.656.656-.656h4.347c.383 0 .657.3.657.656v4.375a.63.63 0 0 1-.657.657.65.65 0 0 1-.656-.657V2.242L6.563 8.34a.6.6 0 0 1-.903 0c-.273-.246-.273-.656 0-.93l6.098-6.097h-2.79a.63.63 0 0 1-.655-.657M1.968.875h3.5c.355 0 .656.3.656.656 0 .383-.3.657-.656.657h-3.5c-.383 0-.657.3-.657.656v9.187c0 .383.274.656.657.656h9.187a.65.65 0 0 0 .656-.656v-3.5c0-.355.274-.656.657-.656.355 0 .656.3.656.656v3.5A1.98 1.98 0 0 1 11.156 14H1.97A1.96 1.96 0 0 1 0 12.031V2.844C0 1.777.875.875 1.969.875'/%3E%3C/svg%3E");
			background-color: #4ca74e;
			background-position: right 15px center;
			background-size: var(--size);
			background-repeat: no-repeat;
			font-weight: 600;
			transition: background 0.1s ease-in-out;
			@media (min-width: 900px) {
				--padding-y: 12px;
				--size: 13px;
			}
			&:hover, &:focus, &:active {
				color: #fff;
				background-color: #3b8c3b;
			}
		}
	}
}

.gs-upgrade-button {
	--padding-y: 9px;
	--size: 11px;
	text-decoration: none;
	display: inline-block;
	padding: var(--padding-y) 36px var(--padding-y) 18px;
	border-radius: 32px;
	font-size: var(--size);
	color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M8.313.656c0-.355.273-.656.656-.656h4.347c.383 0 .657.3.657.656v4.375a.63.63 0 0 1-.657.657.65.65 0 0 1-.656-.657V2.242L6.563 8.34a.6.6 0 0 1-.903 0c-.273-.246-.273-.656 0-.93l6.098-6.097h-2.79a.63.63 0 0 1-.655-.657M1.968.875h3.5c.355 0 .656.3.656.656 0 .383-.3.657-.656.657h-3.5c-.383 0-.657.3-.657.656v9.187c0 .383.274.656.657.656h9.187a.65.65 0 0 0 .656-.656v-3.5c0-.355.274-.656.657-.656.355 0 .656.3.656.656v3.5A1.98 1.98 0 0 1 11.156 14H1.97A1.96 1.96 0 0 1 0 12.031V2.844C0 1.777.875.875 1.969.875'/%3E%3C/svg%3E");
	background-color: #4ca74e;
	background-position: right 15px center;
	background-size: var(--size);
	background-repeat: no-repeat;
	font-weight: 600;
	transition: background 0.1s ease-in-out;
	@media (min-width: 900px) {
		--padding-y: 10px;
		--size: 12px;
	}
	&:hover, &:focus, &:active {
		color: #fff;
		background-color: #3b8c3b;
	}
}