@import '../../../../variables.scss';

.invoiceModal {
	padding: 40px;

	h3 {
		font-size: 24px;
		color: $black;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
	}

	h1 {
		text-align: center;
		color: $main;
		margin: 20px 20px 60px 0;

		svg {
			font-size: 20px;
		}

		.value {
			font-size: 60px;
		}
	}

	.qrcode {
		text-align: center;

		.paymentRequest {
			text-align: center;
			font-size: 0.5vw;
			margin-top: 20px;
			padding: 5px;
			border-radius: 5px;
			background: $lightgrey;
			border: 1px solid $darkgrey;
			display: block;
			width: 100%;
		}
	}

	.settled {
		text-align: center;
		color: $main;
		text-transform: uppercase;
		font-size: 20px;
		margin: 30px 0;
		font-weight: bold;

		svg {
			line-height: 20px;
		}
	}

	.date {
		text-align: center;

		time {
			margin-left: 3px;
		}
	}
}

.invoices {
	width: 75%;
	margin: 0 auto;
	background: $white;
}

.invoice, .invoiceTitles {
	display: flex;
	flex-direction: 'row';
	padding: 35px 10px;
	border-bottom: 1px solid $grey;
	font-size: 14px;

	.left {
		flex: 7;
	}

	.center {
		flex: 2;
	}

	.right {
		flex: 1;
	}

	.settled {
		color: $main;
		font-weight: bold;
	}
}

.invoiceTitles {
	border: none;

	.left, .center, .right {
		color: $black;
		text-transform: uppercase;
		font-size: 16px;
		font-weight: bold;
	}
}

.invoice {
	cursor: pointer;

	&:hover {
		background: #f0f0f0;
	}
}