@use "../../variables/colors" as colors;

$fixed-column-width: 80px;
#edd-submit-refund-status {
	text-align: center;
	font-size: 1.2em;

	.edd-submit-refund-message {
		&:before{
			font-family: dashicons;
			font-size: 1.5em;
			vertical-align: middle;
			color: #fff;
			border-radius: 16px;
			margin: 5px;
		}

		&.success:before {
			content: "\f147";
			background-color: colors.$wp-green-50;
			padding-right: 1px;
		}

		&.fail {
			display: block;
			margin-bottom: 16px;

			&::before {
				content: "\f335";
				background-color: colors.$wp-red-50;
			}
		}
	}
}

.refund-items {
	td,
	th.check-column {
		vertical-align: baseline;
	}

	.column-amount,
	.column-quantity,
	.column-subtotal,
	.column-tax,
	.column-discount,
	.column-total {
		width: $fixed-column-width;
	}

	.edd-form-group__control {
		display: flex;
		align-items: center;

		select,
		input {
			background-color: transparent;
			border: 0;
			border-bottom: 1px solid;
			border-radius: 0;
			box-shadow: none;
			text-align: right;
			width: 100%;

			&:disabled {
				border-bottom: none;
			}

			&:focus {
				border-bottom: 1px solid var(--wp-admin-theme-color-darker-10);
				box-shadow: 0 1px 0 var(--wp-admin-theme-color-darker-10);
			}
		}

		select[data-original="1"] {
			background: transparent;
		}

		select,
		.is-before + span > input {
			text-align: left;
		}
	}

	.edd-refund-submit-line-total {
		background-color: colors.$white !important;

		td {
			text-align: right;
		}
	}

	.edd-refund-submit-line-total-amount {
		display: inline-block;
		margin-left: 20px;
		text-align: left;
		width: $fixed-column-width;
	}

	#edd-refund-submit-subtotal td {
		border-top: 2px solid colors.$wp-border;
	}

	@media screen and ( max-width: 782px ) {
		td.column-total {
			margin-bottom: 16px;
		}

		.edd-refund-submit-line-total-amount {
			padding-right: 16px;
			width: unset;
		}
	}
}

.edd-submit-refund-actions {
	margin: 16px 0 0;
}

.did-refund {
	.refund-items,
	.edd-submit-refund-actions {
		display: none;
	}
}
