zap-desktop/app/routes/activity/components/components/Invoices.scss

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

.invoiceModal {
	padding: 40px;

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

	.paymentRequest {
		text-align: center;
		font-size: 8px;
	}

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

		svg {
			font-size: 30px;
		}

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

	.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: lighten($grey, 5%);
	}
}