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

$iframe-background-color: #f7f7f7;

.bank-details__iframe-container {
	margin-block-start: 24px;
	min-height: calc(100vh - 182px); // Take the full height & hide the scrollbar on the main page
	height: 100%; // Setting the height to 100% to make sure the iFrame is always visible

	.a4a-text-placeholder {
		display: block;
		min-height: calc(100vh - 182px); // Take the full height & hide the scrollbar on the main page
		height: 100%;
	}
}

.bank-details__layout.main.hosting-dashboard-layout {
	height: 100%; // Setting the height to 100% to make sure the iFrame is always visible

	@include breakpoint-deprecated( ">660px" ) {
		height: calc(100vh - 32px);
	}

	.hosting-dashboard-layout__body {
		background-color: $iframe-background-color;
	}
}

.bank-details__heading {
	padding-block: 8px;
	@include heading-x-large;
}

.bank-details__subheading {
	@include body-large;
	color: var(--color-neutral-60);
}

.bank-details__status {
	@include body-large;
	color: var(--color-accent-80);

	.badge {
		margin-inline-start: 6px;
	}
}

.referrals-overview__link {
	color: var(--color-accent-100);
	text-decoration: underline;

	&:hover,
	&:visited,
	&:focus {
		color: var(--color-accent-100);
	}
}
