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

.sites-with-woopayments-list-mobile-view__column {
	@include body-medium;
}

.woopayments-dashboard {
	.consolidated-view {
		padding-block: 16px 48px;

		.card {
			@include break-mobile {
				max-width: 100%;
				flex: unset;
			}
		}
	}

	&.full-width-layout-with-table {
		.consolidated-view {
			padding: 16px 64px 48px;
		}
	}

	.a4a-text-placeholder {
		min-width: 70px;
		height: 20px;
	}
}

.download-commissions-modal {
	@include break-medium {
		min-width: 400px;
	}

	@include break-large {
		min-width: 512px;
	}

	.download-commissions-modal__title {
		@include heading-x-large;
		margin: 0 0 20px;
		padding: 0;
	}

	.download-commissions-modal__instruction {
		@include body-medium;
		margin: 0;
		color: var(--color-accent-60);
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.download-commissions-modal__instruction-text {
		flex: 1;
		line-height: 1.4;
	}

	.download-commissions-modal__close-button {
		position: absolute;
		inset-inline-end: 1rem;
		inset-block-start: 1rem;
		cursor: pointer;
		transition: scale 0.2s ease-in;
		max-height: 24px;

		&:hover {
			scale: 1.2;
		}

		&:focus-visible {
			border-color: var(--color-primary);
			outline: none;
			box-shadow: 0 0 0 2px var(--color-primary-10);
			border-radius: 4px;
		}
	}

	.components-spinner {
		width: 24px;
		height: 24px;
		margin: 0;
	}
}

.woopayments-status-column {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;

	.woopayments-status-column__info-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: var(--color-neutral-60);
		transition: color 0.2s ease;

		&:hover {
			color: var(--color-neutral-80);
		}

		&:focus-visible {
			outline: 2px solid var(--color-primary);
			outline-offset: 2px;
			border-radius: 2px;
		}
	}
}

.woopayments-status-popover {
	display: flex;
	flex-direction: column;
	gap: 12px;

	.woopayments-status-popover__text {
		@include body-medium;
		margin: 0;
		color: var(--color-text-black);
		line-height: 1.4;
	}

	.woopayments-status-popover__link {
		@include body-medium;
		display: inline-flex;
		justify-content: left;
		gap: 4px;
		color: var(--color-primary);

		&:hover {
			color: var(--color-primary-dark);
		}
	}
}
