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

.widget-heading-holder {
	header {
		margin-right: 10%;
	}

	.filter-container {
		display: flex;
		flex-grow: 1;

		@media screen and (max-width: 1023px) {
			flex-direction: column-reverse;
		}
	}

	.selector-container {
		display: flex;
        flex-grow: 1;

		.selector {
			margin: 0 10px;
            flex-grow: 1;

			@media screen and (max-width: 1023px) {
				margin: 0;
			}
		}

		@media screen and (max-width: 1023px) {
			justify-content: space-between;
			width: 100%;
			margin: 20px 0;
		}
	}
}

.search-input {
	display: flex;
	flex-grow: 1;
	height: 40px;
	border-radius: 20px;
	background-color: white;
	color: var(--brand-blue);
	align-items: center;
	justify-content: space-between;

	input {
		border: 0;
		font-size: 12px;
		padding-left: 10px;
		font-weight: 500;
		color: var(--dark-grey);
		flex-grow: 1;
		letter-spacing: 1px;

		&::placeholder {
			color: var(--grey);
		}
	}

	button {
		border-radius: 50%;
		width: 30px;
		height: 30px;
		color: var(--brand-blue);
		font-size: 20px;
		border: 1px solid var(--brand-blue);
		background-color: white;
		transition: background-color 0.3s, color 0.3s;

		&:hover {
			background-color: var(--brand-blue);
			color: white;
		}
	}
}


.order-table {
	width: 100%;
	margin: 30px auto;
	text-align: left;
    table-layout: fixed;
    overflow: auto;

	@media screen and (max-width: 1023px) {
		display: none;
	}

	th {
		color: var(--grey);
		font-size: 14px;
		font-weight: 500;
		padding: 10px 0;
		letter-spacing: 1px;
		line-height: 2;
		vertical-align: top;
		text-align: center;
	}

	td {
		border-top: 1px solid rgba(#cecece, 0.5);
		padding: 10px 0;
		color: var(--dark-grey);
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 2;
		vertical-align: top;
		text-align: center;
	}

    .item {
        background-color: rgba(#cecece, 0.5);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
        padding: 0 10px;
    }

	tr {
		&.cancelled {
			td {
				text-decoration: line-through;
				text-decoration-color: var(--dark-grey);

				&:last-child {
					text-decoration: none;
				}
			}
		}
	}

	.status {

		&.success {
			color: green;
		}

		&.failed {
			color: red;
		}
	}

	.action-buttons {
		button {
            display: inline-block;
            margin-left: 10px;
            margin-top: 10px;

			&.accept {
				background-color: var(--brand-blue);
            }
            
		}
	}
}

.order-list {
	list-style: none;

	@media screen and (min-width: 1023px) {
		display: none;
	}

	.card {
		width: 90%;
		margin: 30px auto;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0px 0px 5px var(--grey);
		overflow: hidden;
	}

	.header {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 10px 15px;
		border-bottom: 1px solid #efefef;
		color: var(--dark-grey);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 1px;
	}

	.info {
        font-size: 14px;
        color: var(--dark-grey);
        font-weight: 500;
        letter-spacing: 0.5px;
        padding: 10px 15px;
    }

	.order-status-holder {
		background-color: #efefef;
		padding: 10px 15px;
		color: var(--dark-grey);
		font-size: 12px;
		display: flex;
		width: 100%;
		font-weight: 500;
		justify-content: space-between;
		align-items: center;

        .status {

    		&.success {
    			color: green;
    		}

    		&.failed {
    			color: red;
    		}
    	}

		.action-buttons {
			display: flex;
			width: auto;
			border-radius: 5px;
			overflow: hidden;

			button {
				padding: 5px 20px;
				color: white;
				background-color: var(--brand-blue);
				border: 0px;

				&:nth-child(2) {
					background-color: #cecece;
				}
			}
		}
	}
}