.block.order-history {

	.tabs-list {
		display: flex;
		border-bottom: 1px solid var(--border);
	}

	.tab {
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 0 1em;
		height: 48px;
		background: var(--surface-secondary);
		border: 1px solid var(--border);
		transition: 200ms;

		svg path {
			fill: currentColor;
		}

		&[aria-selected="false"] {
			
			svg {
				display: none;
			}

			&:hover {
				background: var(--gray-20);
			}
		}

		&[aria-selected="true"] {
			color: var(--white-100);
			font-weight: 700;
			background: var(--brand-blue-50);
			border-color: var(--brand-blue-50);
		}
	}

	.order.-online {
		display: flex;
		justify-content: space-between;
		align-items: start;
		gap: var(--spx4);
		margin-top: var(--spx4);
		padding-bottom: var(--spx4);
		border-bottom: 1px solid var(--border);

		.products {
			display: flex;
			flex-wrap: wrap;
			gap: var(--spx2);
		}

		.product {
			width: 104px;
		}

		.order-details-layout {
			display: flex;
			gap: var(--spx2);
			flex-direction: column-reverse;
		}

		.order-data {

			@container (min-width: 349px) {

				dl {
					display: flex;
					flex-wrap: wrap;
				}

				dt {
					clear: none;
					float: none;

					&:not(:first-child) {
						margin-left: 1em;
					}
				}
			}
		}

		.order-actions {
			flex-shrink: 0;
		}
	}

	@container (max-width: 499px) {

		.order.-online {
			flex-direction: column;

			.order-details {
				width: 100%;
			}

			.order-data-heading {
				font-size: 18px;
			}

			.order-data-subheading {
				font-size: 14px;
			}

			.order-data {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				flex-wrap: wrap;

				dl {
					display: block !important;
					width: 100%;
					font-size: 15px;

					dt {
						clear: left !important;
						float: left !important;
						margin: 0 !important;
					}
				}
			}

			.order-actions {
				align-self: center;
				width: 100%;

				.button {
					max-width: none;
				}
			}
		}
	}

	@container (max-width: 349px) {

		.order.-online {
			
			.product {
				width: 90px;
			}
		}
	}

	.order.-in-store {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: var(--spx4);
		margin-top: var(--spx4);
		padding-bottom: var(--spx4);
		border-bottom: 1px solid var(--border);

		&.-empty {
			padding-bottom: 0;
			border-bottom: none;
		}

		.order-location {
			margin-bottom: 0.25em;
			font-size: var(--h4);
			font-weight: 700;
			line-height: 1.2;
		}

		.order-date {
			font-size: var(--body-small);
			margin-bottom: 0.5em;
		}

		.order-items {
			display: grid;
			gap: var(--spx2);
		}

		.order-summary .order-data {

			dl {
				display: flex;
				flex-wrap: wrap;
			}

			dt {
				clear: none;
				float: none;

				&:not(:first-child) {
					margin-left: 1em;
				}
			}
		}

		.order-data-heading {
			font-size: var(--body);
		}

		.order-data-subheading {
			margin-bottom: 0.5em;
		}

		.order-item .order-data dd {
			font-weight: 400;
		}

		@container (max-width: 500px) {
			grid-template-columns: 1fr;

			.order-summary {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: baseline;
			}

			.order-data {
				flex-basis: 100%;
			}
		}
	}

	.pagination {
		display: flex;
		gap: 1em;
		margin-top: 1em;
		font-size: var(--body);
	}
}