vendor-app/src/app/dashboard/dashboard.component.scss

.container {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: stretch;
}

.order-stats {
	width: 70%;

	ul {
		list-style: none;
	}

	li {
		display: flex;
		width: 90%;
		margin: 30px auto;
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		justify-content: space-between;
		align-items: center;

		.column {
			letter-spacing: 0.5px;

			header {
				font-weight: 500;
				color: var(--dark-grey);
				font-size: 16px;
			}

			p {
				font-size: 14px;
				color: var(--grey);
				margin-top: 10px;
			}

			&:nth-child(1) {
				width: 40%;
			}

			&:nth-child(2) {
				width: 100px;
				color: var(--grey);
				font-size: 14px;

				.count {
					font-size: 36px;
					font-weight: 700;
					color: var(--dark-grey);
					display: inline-block;
				}
			}

			button {
				width: 100px;
			}
		}
	}
}

.pending-orders {
	width: 30%;
	background-color: white;
	padding: 30px 30px;
	list-style: none;
	height: calc(100vh - 70px);
	overflow: auto;

	&:hover {
		&::-webkit-scrollbar {
		  display: block;
		}
	}

	&::-webkit-scrollbar {
		width: 8px;
		display: none;
	}

		/* Track */
	&::-webkit-scrollbar-track {
		background-color: white;
	}
	/* Handle */
	&::-webkit-scrollbar-thumb {
		background-color: rgba(black, 0.2);
	}
	/* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(black, 0.5);
	}


	.heading {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;


		header {
			font-size: 16px;
			letter-spacing: 1px;
			font-weight: 500;
		}

		a {
			color: var(--brand-blue);
			text-decoration: underline;
			font-size: 14px;
		}
	}

	li {
		padding: 10px 0;
		margin: 20px 0;
		border-top: 1px solid #cecece;
	}

	.info {
		display: flex;
		width: 100%;
		justify-content: space-between;
		margin: 15px 0;
		font-weight: 500;

		label {
			font-size: 13px;
			color: var(--grey);
		}

		span {
			font-size: 13px;
		}
	}

	.name-holder {
		border-bottom: 1px solid #efefef;

		.name {
			font-size: 16px;
			font-weight: 500;
			color: var(--dark-grey);
		}
	}

	.action-buttons {
		display: flex;
		width: 100%;

		button {
			&:first-child {
				background-color: var(--brand-blue);
				margin-right: 10px;
			}
		}
	}
}