mall-app/src/app/orders/orders.component.scss

.heading-holder {
	background-color: #efefef;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 5%;

	.name {
		color: var(--brand-dark-grey);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.5px;
	}

	ion-button {
		margin: 0;
		--color: var(--brand-blue);
		font-size: 12px;
		--padding-end: 0;
	}
}


ul.orders {
	padding: 0;
	margin: 0;

	.order {
		list-style: none;
		padding: 20px 5%;
		color: var(--brand-dark-grey);
		line-height: 1.6;
		border-bottom: 1px solid #efefef;

		.heading {
			width: 50%;
			font-size: 15px;
			width: 50%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			font-weight: 600;
		}

		.time-details {
			font-size: 13px;
			color: var(--brand-grey);
		}
	}

	.ordered-items {
		list-style: none;
		padding: 0;
		margin: 10px 0 0;

		li {
			display: flex;
			width: 100%;
			justify-content: space-between;
			margin: 0px auto;
			align-items: center;
			color: var(--brand-grey);

			.name {
				font-size: 13px;
				letter-spacing: 0.5px;
			}

			.time {
				font-size: 12px;
			}
		}
	}

	.note {
		color: var(--brand-grey);
		font-size: 13px;
		padding: 10px 0;
		margin-top: 10px;
		border-top: 1px solid #efefef;
	}

	.action-buttons-holder {
		display: flex;
		align-items: center;
		width: 100%;

		ion-button {
			--padding-top: 0px;
			--padding-bottom: 0px;
			height: 30px;
			margin-right: 10px;
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0.5px;

			&:first-child {
				--background: var(--brand-blue);
			}

			&:last-child {
				--color: var(--brand-blue);
				--border-color: var(--brand-blue);
			}
		}
	}
}