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

$data-view-border-color: #f1f1f1;

.referrals-overview__section-notice {
	margin-block-end: 48px;
}

.referrals-overview__button-popover {
	.a4a-popover__content {
		.a4a-popover__title {
			@include heading-medium;
			color: var(--studio-gray-80);
		}

		.referrals-overview__button-popover-description {
			@include body-small;
		}
	}
}

.referrals-overview__section-heading {
	margin-block-start: 32px;
	@include heading-x-large;
	margin-block-end: 8px;
}

.referrals-overview__section-subtitle {
	display: flex;
	flex-direction: column;
	gap: 16px;
	@include body-medium;
	margin-block-end: 32px;
	color: var(--color-neutral-50);
}

.referrals-overview__step-section-woo-payments {
	margin-block-end: 0;

	a,
	a:visited {
		text-decoration: none;
		justify-content: center;
	}

	&.step-section-item .step-section-item__button {
		margin-block-start: 16px;

		@include break-large {
			margin-block: auto;
		}
	}
}

.referrals-overview__section-container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.referrals-overview__section-container .a4a-text-placeholder {
	height: 80px;
}

.referrals-layout {
	@media (min-width: $break-large) {
		background: inherit;

		.dataviews-wrapper tr.dataviews-view-table__row th {
			text-wrap: nowrap;
		}

		.dataviews-view-table tr th:first-child,
		.dataviews-view-table tr td:first-child {
			padding-inline-start: 64px;
		}

		.dataviews-view-table__row .a4a-text-placeholder {
			width: 50px;
		}
	}

	&:not(.full-width-layout-with-table) .hosting-dashboard-layout__body-wrapper {
		max-width: 700px;
	}

	.consolidated-view {
		padding: 16px;

		@include breakpoint-deprecated( ">660px" ) {
			padding: 16px 64px 48px;
		}
	}

	&.main.hosting-dashboard-layout {
		@include break-large {
			background: inherit;
		}
	}

	&.referrals-layout--has-selected {
		ul.dataviews-view-list {
			margin: 0;
			list-style: none;
		}

		li:not(.section-nav-tab) {
			border-bottom: 1px solid $data-view-border-color;
		}

		.dataviews-view-list__item .components-flex {
			gap: 0;
		}

		.hosting-dashboard-layout__top-wrapper > * {
			padding-inline: 24px;
		}

		.referrals-layout__column {
			flex: unset;
			height: 100%;
			transition: all 0.2s;
			width: 400px;
			display: none;

			@include break-wide {
				display: block;
			}
		}
	}

	.step-section-item {
		.step-section-item__button .button {
			min-width: 120px;
		}

		.step-section-item__button {
			@include break-large {
				margin-block: auto;
			}
		}

		.step-section-item__status.is-large-screen {
			@include break-large {
				display: inline-flex;
				position: relative;
				left: 8px;
			}

		}
	}
}

.referrals-overview__step-section-learn-more {
	a.button {
		padding-block: 4px;
	}

	.step-section__header {
		margin-block-end: 0;
	}
}

.referrals-overview__opacity-70-percent {
	opacity: 0.7;
}

.jetpack-logo {
	fill: var(--color-jetpack);
}

.woocommerce-logo {
	fill: var(--color-woocommerce);
}

.referrals-overview__section-icons {
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-block-start: 56px;

	.pressable-icon {
		width: 24px;
		height: 24px;
	}
}

.hosting-dashboard-layout__header-actions {
	a.button {
		text-wrap: nowrap;
	}
}

/* FIXME: This is a temporary fix to make the referral
 * layout columns the same height
 */
.main.hosting-dashboard-layout-column.referrals-layout__column {
	height: auto;
	overflow-y: scroll;
}

.referrals-layout .notice-banner {
	display: none;
	margin-block-end: 24px;
}

.referrals-layout:not(.referrals-layout--has-selected) .notice-banner {
	display: flex;
}

.referrals-layout .hosting-dashboard-item-view {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 32px);
}

.new-referral-order-notification {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}
