/** @format */

.woocommerce-payments-page {
	.components-card__header {
		font-size: 20px;
	}

	.components-card {
		margin-bottom: 24px;
	}
}

.payment-details-summary {
	display: flex;
	flex: 1;
	@media screen and ( max-width: $break-medium ) {
		flex-direction: column;
	}

	.payment-details-summary__section {
		flex-grow: 1;
	}

	.payment-details-summary__amount-wrapper {
		display: flex;
		align-items: center;
	}

	@media screen and ( max-width: $break-small ) {
		.payment-details-summary__amount-wrapper {
			flex-direction: column;
			align-items: flex-start;

			.payment-details-summary__status {
				order: -1;
			}
		}
	}

	.payment-details-summary__amount {
		@include font-size( 32 );
		font-weight: 300;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;

		.payment-details-summary__amount-currency {
			@include font-size( 16 );
			text-transform: uppercase;
			margin: 0 0.5rem;
			color: $studio-gray-60;
		}
	}

	.payment-details-summary__breakdown {
		&__settlement-currency {
			padding-right: 16px;
			border-right: 1px solid $gray-200;
		}

		p {
			@include font-size( 14 );
			color: $gray-700;
			display: inline-flex;
			margin: 0.25rem 1rem 0 0;
			text-transform: uppercase;
			font-weight: 600;
			font-size: 12px;
		}
		p:last-child {
			margin-right: 0;
		}

		&__fee-tooltip {
			display: flex;
			flex-direction: column;
			padding: $grid-unit-15;
			gap: $grid-unit-10;
			font-weight: 400;
			font-size: 14px;

			& > *:last-child {
				padding-top: $grid-unit-10;
				border-top: 1px solid $gray-200;
			}

			label {
				margin-right: $grid-unit-20;
				color: $gray-700;
			}
		}
	}

	.payment-details-summary__fraud-outcome-action {
		display: flex;
		justify-content: flex-end;

		button + button {
			margin-left: 8px;
		}
	}

	.payment-details-summary__id {
		height: 100%;
		margin-top: 8px;
		color: $studio-gray-40;
		display: flex;
		align-items: start;
		justify-content: initial;
		flex-direction: column;
		flex-wrap: nowrap;
		@media screen and ( min-width: $break-medium ) {
			justify-content: flex-start;
			align-items: flex-end;
		}

		.payment-details-summary__id_wrapper {
			white-space: nowrap;
		}

		.payment-details-summary__id_value {
			font-family: monospace;
		}
	}
}

.woocommerce-list--horizontal {
	margin-top: 0 !important;
}

.payment-details__refund-controls {
	flex: 0 0 auto;

	.refund-controls__dropdown-menu {
		/**
		 * HACK: The following styles are needed to make the dropdown menu
		 * appear in its expected position. The dropdown menu is positioned absolutely, so we need to make sure
		 * that the parent container is positioned relatively.
		 * This should be taken care of by the dropdown menu component's CSS, but we seem to be relying in outdated
		 * wordpress/components styles.
		 *
		 * Github issue: https://github.com/Automattic/woocommerce-payments/issues/8012
		 */
		.components-popover {
			position: fixed;
		}
		.components-popover__content {
			position: absolute;
			right: 100%;
		}

		.components-tooltip {
			.components-popover__content {
				position: relative;
				right: 0;
			}
		}
		// END HACK
	}
}
