/** @format */

.transaction-details-dispute-details-wrapper {
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 5px;

	.transaction-details-dispute-details-title {
		margin-top: 24px;
		margin-bottom: 24px;
		// Heading LG
		font-size: var( --l, 15px );
		font-style: normal;
		font-weight: var( --Medium, 500 );
		line-height: var( --s, 20px ); /* 133.333% */
		color: var( --Scales-Grays-gray-900, #1e1e1e );

		@media screen and ( max-width: $break-small ) {
			margin-top: 16px;
			margin-bottom: 16px;
		}
	}

	.transaction-details-dispute-details-body {
		padding-bottom: $grid-unit-20;
		margin-bottom: 3px;

		.wcpay-inline-notice {
			padding: 0;
		}
		.wcpay-inline-notice.components-notice {
			.components-notice__content {
				letter-spacing: 0.02em;
				font-size: 14px;
				line-height: 1.5em;
				margin: 16px;
			}
		}

		.dispute-summary-row {
			font-size: 13px;
			font-weight: 400;

			margin-top: 40px;

			@media screen and ( max-width: $break-small ) {
				margin-top: 24px;
			}
		}

		&__actions {
			display: flex;
			justify-content: start;
			gap: $grid-unit-10;
			margin-top: 24px;

			@media screen and ( max-width: $break-small ) {
				flex-direction: column;

				.components-button {
					width: 100%;
					justify-content: center;
				}
			}
		}

		&__help-link {
			margin: 24px 0 40px;
			text-align: left;

			@media screen and ( max-width: $break-small ) {
				margin-top: 24px 0;
			}

			.components-external-link {
				color: var( --wp-admin-theme-color, #007cba );
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}

				.components-external-link__icon {
					margin-bottom: 1.5px;
					margin-left: 2.5px;
				}
			}
		}
	}
}

.dispute-reason-tooltip {
	p {
		&:first-child {
			font-weight: bold;
		}
		&:last-child {
			margin-bottom: 0;
		}
		margin: 0;
		margin-bottom: 8px;
	}
}

.dispute-steps {
	margin-top: 40px;

	&__item {
		display: flex;
		align-items: center;
		padding: 16px 0 16px;
		border-bottom: 1px solid $gray-100;

		&:first-child {
			padding: 12px 0 16px;
		}

		&:last-child {
			border-bottom: none;
			padding-bottom: 28px;
		}

		@media screen and ( max-width: $break-small ) {
			flex-direction: column;
			padding: 16px 0;
			gap: 12px;
		}

		&-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			border-radius: var( --radius-s, 2px );
			padding: 10px;
			border: 1px solid $gray-200;
			margin-right: 12px;

			@media screen and ( max-width: $break-small ) {
				display: none;
			}

			svg {
				width: 24px;
				height: 24px;
				color: var( --Scales-Grays-gray-700, #757575 );
				fill: currentColor;
			}
		}

		&-content {
			flex: 1;
			min-width: 0; // Prevents flex item from overflowing

			@media screen and ( max-width: $break-small ) {
				width: 100%;
			}
		}

		&-name {
			margin-bottom: 4px;
			color: var( --Scales-Grays-gray-900, #1e1e1e );
			letter-spacing: 0.01em;

			/* Heading MD */
			font-size: var( --m, 13px );
			font-style: normal;
			font-weight: var( --Medium, 500 );
			line-height: var( --s, 20px ); /* 153.846% */
		}

		&-description {
			color: var( --Scales-Grays-gray-700, #757575 );

			/* Body MD */
			font-size: var( --m, 13px );
			font-style: normal;
			font-weight: var( --Regular, 400 );
			line-height: var( --s, 20px ); /* 153.846% */

			width: 80%;

			@media screen and ( max-width: $break-small ) {
				margin-bottom: 8px;
				width: 100%;
			}
		}

		&-action {
			margin-left: 16px;
			flex-shrink: 0;

			a {
				padding: 4px 10px;
				max-height: 32px;
			}

			@media screen and ( max-width: $break-small ) {
				margin-left: 0;
				width: 100%;

				.components-button {
					width: 100%;
					justify-content: center;
				}
			}
		}
	}

	&__steps {
		&__response-date {
			&--urgent {
				color: var( --Gutenberg-Alert-Red, #cc1818 );
				font-weight: 600;
				font-size: 13px;
			}
		}
	}

	&__notice {
		.dispute-steps__notice-content {
			.components-notice__content {
				letter-spacing: 0.02em;
				margin: 8px 24px 8px 0;
				font-size: 14px;
				line-height: 1.5em;

				@media screen and ( max-width: $break-small ) {
					margin: 8px 16px 8px 0;
					line-height: 1.4;
				}
			}
		}
	}
}

.transaction-details-dispute-accept-modal {
	&.components-modal__frame {
		max-width: 600px;
	}

	.components-modal__content {
		padding-top: $grid-unit-30;
	}

	&__icon {
		flex-shrink: 0;
		padding: 6px;
		margin-right: $grid-unit-10;
	}

	&__actions {
		margin-top: $grid-unit-30;
	}
}

.transaction-details-dispute-footer {
	color: $gray-700;
	background-color: #f2f4f5;

	&__actions {
		flex-shrink: 0;
	}

	&--primary {
		background-color: $wp-blue-0;
	}

	@media screen and ( max-width: $break-small ) {
		.components-flex {
			flex-direction: column;
			align-items: flex-start;
		}

		.components-flex-item {
			margin: 10px 0;
		}
	}
}

.dispute-evidence {
	// Override WordPress core PanelBody boxy styles. Ours is more inline content.
	&.components-panel__body {
		border: none;
	}
	// Override WordPress core PanelBody padding so fits snug in our container.
	&.components-panel__body.is-opened {
		padding-bottom: 0;
	}
	// Override WordPress core PanelBody title to align with other nearby headings.
	.components-panel__body-title button {
		// Copy of WooCommerce core list table header style.
		text-transform: uppercase;
		color: #757575;
		font-size: 11px;
		font-weight: 600;
	}
	// Override WordPress core PanelBody button/title – slim padding consistent with surrounding components.
	.components-panel__body-toggle.components-button {
		padding: 10px;
	}
	// Override WordPress core PanelBody focus/highlighting.
	.components-panel__body-toggle.components-button:focus {
		box-shadow: none;
		outline: 0;
	}
	&__list {
		list-style: none;
		margin: 8px 0 0;
	}
	&__list-item {
		display: inline-block;
		margin-right: 12px;
		margin-bottom: 0;
	}
}

.dispute-notice {
	.dispute-notice__link {
		display: block;
	}
}

@media screen and ( max-width: $break-small ) {
	.wcpay-inline-notice.components-notice
		.components-notice__content
		a.dispute-notice__link {
		white-space: normal;
	}
}
