.wcpay-disputes-list {
	.woocommerce-table__header.is-center-aligned {
		text-align: center;
	}
	.woocommerce-table__item a.components-button {
		display: inline-flex;
	}
	.due-soon {
		display: flex;
		align-items: center;
		color: $alert-red;
		font-weight: 700;
		.due-soon-icon {
			fill: $alert-red;
			margin-left: 5px;
		}
	}

	.woocommerce-pagination {
		align-items: flex-end;
	}
}

// TODO generalize most of these styles to other WCPay views, if not WooCommerce Admin in general.
.wcpay-dispute-details,
.wcpay-dispute-evidence {
	$horizontal-card-padding: 24px;

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

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

	.components-button + .components-button {
		margin-left: 10px;
	}

	// Evidence form

	.components-textarea-control__input {
		display: block;
		margin-top: 4px;
		width: 100%;
	}

	.components-text-control__input {
		margin-top: 4px;
	}

	.components-base-control {
		position: relative;
	}
	.components-base-control .components-base-control__label {
		margin-bottom: 4px;
	}
	.components-base-control + .components-base-control {
		margin: 16px 0 0;
	}

	.components-base-control > .components-base-control__help {
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 16px;
		color: $studio-gray-40;
		margin-top: 8px;
	}

	// Fix broken wc-admin style for file upload buttons specifically.
	.file-upload {
		display: flex;
		flex-direction: row;
		align-items: center;

		// Selector here is super specific to ensure styles are overwritten.
		.components-button.is-secondary:not( :disabled ):not( [aria-disabled='true'] ) {
			&.is-success {
				box-shadow: inset 0 0 0 1px $studio-green;
				color: $studio-green;

				&:hover {
					box-shadow: inset 0 0 0 1px $studio-green-60;
					color: $studio-green-60;
				}
			}

			&.is-destructive {
				box-shadow: inset 0 0 0 1px $studio-red;
				color: $studio-red;

				&:hover {
					box-shadow: inset 0 0 0 1px $studio-red-60;
					color: $studio-red-60;
				}
			}
		}

		.components-button.delete-uploaded-file-button:not( :disabled ):not( [aria-disabled='true'] ) {
			&:hover {
				color: $studio-red-60;
				box-shadow: none;
			}
		}

		// Set styles for file name text and icon.
		.upload-message {
			padding-left: 24px;
			color: $studio-gray-40;

			&.is-destructive {
				color: $studio-red;
			}
		}
	}
}
