@lavalogic/scoria 0.0.1

package/dist/scss/mixins.scss

@@ -0,0 +1,2778 @@
+@use '$lib/scss/colours';
+@use '$lib/scss/sizing';
+@use '$lib/scss/transitions';
+@use '$lib/scss/basics';
+
+@mixin header-label {
+	margin: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: colours.$font-primary;
+	user-select: none;
+	background-color: colours.$ui-blue-2;
+	font-weight: sizing.$font-weight-touch;
+	font-size: sizing.$text-large;
+}
+
+@mixin list {
+	width: 100%;
+	// height: 100%;
+	overflow-y: auto;
+	flex-grow: 1;
+	scroll-snap-type: y proximity;
+	list-style: none;
+	padding: sizing.$half-padding;
+	margin: 0;
+	gap: sizing.$half-gap;
+	display: flex;
+	flex-flow: column;
+	align-items: stretch;
+
+	box-sizing: border-box;
+}
+
+@mixin list-header {
+	background-color: inherit;
+	padding: sizing.$half-padding;
+	margin: 0;
+	gap: sizing.$half-gap;
+	display: flex;
+	flex-flow: column;
+	align-items: stretch;
+	box-sizing: border-box;
+}
+
+@mixin card-layout {
+	color: colours.$font-primary;
+	fill: colours.$font-primary;
+
+	padding: var(--padding-size, sizing.$card-padding);
+	border-radius: var(--border-radius, 0);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around; // could also try space-evenly
+	border: basics.$border;
+	transition: transitions.$colours;
+	box-sizing: border-box;
+	background-color: colours.$ui-white;
+	align-items: stretch;
+}
+
+@mixin outline {
+	outline: solid 1px colours.$brand-dark;
+}
+
+@mixin card {
+	@include card-layout;
+
+	cursor: pointer;
+
+	&:disabled {
+		background-color: var(--background-colour, colours.$ui-blue-2);
+		color: colours.$font-disabled;
+		--colour: #{colours.$font-disabled};
+		cursor: default;
+	}
+
+	// &button[type='submit']:not([disabled]),
+
+	&:not([disabled]) {
+		&:hover {
+			background-color: var(--hover-background-colour, colours.$transparent-10);
+			--background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			@include outline;
+		}
+
+		&.ticked,
+		&.primary {
+			color: colours.$ui-white;
+			background-color: var(--background-colour, colours.$brand-primary);
+			border-color: var(--border-colour, colours.$brand-primary);
+
+			&:focus,
+			&:focus-visible {
+				outline-color: colours.$brand-primary;
+			}
+
+			// &:focus,
+			&:hover {
+				background-color: var(--hover-background-colour, colours.$brand-dark);
+			}
+		}
+	}
+
+	* {
+		user-select: none;
+	}
+}
+
+@mixin card-label {
+	// position: absolute;
+	// top: sizing.$card-inner-gap;
+	// left: sizing.$card-inner-gap;
+	// padding-top: sizing.$card-inner-gap;
+	// padding-bottom: sizing.$card-inner-gap;
+	color: colours.$font-secondary;
+	--colour: #{colours.$ui-blue-9};
+	font-size: sizing.$text-small-small-medium;
+}
+
+@mixin summary-list {
+	ul {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+
+		padding: 0;
+		margin: 0;
+		gap: sizing.$half-gap;
+	}
+
+	span.desktop-heading {
+		@include absolute-label;
+	}
+
+	span.desktop-heading-border {
+		@include absolute-label-border;
+	}
+
+	li,
+	.summary-card {
+		border: solid 1px colours.$ui-blue-4;
+		background-color: colours.$ui-white;
+		// padding: sizing.$half-padding;
+		display: flex;
+		flex-flow: column;
+		gap: sizing.$half-gap;
+
+		.card-row {
+			display: flex;
+			flex-flow: row;
+			width: 100%;
+			justify-content: space-between;
+			align-items: center;
+
+			&.heading {
+				// margin-top: sizing.$half-padding;
+				// margin-bottom: sizing.$half-padding;
+				font-size: 1.16rem;
+				// font-weight: 700;
+			}
+			&.detail {
+				color: colours.$font-secondary;
+				--colour: #{colours.$ui-blue-9};
+				font-size: sizing.$text-small-small-medium;
+				span {
+					flex-shrink: 2;
+
+					// overflow: hidden;
+					// text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+				span:last-child {
+					flex-basis: fit-content;
+					flex-shrink: 1;
+				}
+				span.ellipsis {
+					margin-left: 0.1875rem;
+					opacity: 0.75;
+					text-overflow: clip;
+					flex-basis: 1rem;
+					flex-grow: 1;
+				}
+				span:not(:first-child) {
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+				span:first-child {
+					flex-basis: fit-content;
+					flex-shrink: 0;
+				}
+				// span:first-child:after {
+				// 	margin-left: 0.1875rem;
+				// 	opacity: 0.75;
+				// 	text-overflow: clip;
+				// 	content: '...............................................................................................................';
+				// }
+
+				.value {
+					margin-left: 0.1875rem;
+					flex-shrink: 0;
+				}
+			}
+		}
+
+		.details {
+			color: colours.$font-secondary;
+			--colour: #{colours.$ui-blue-9};
+		}
+	}
+
+	button.summary-card {
+		@include card;
+		display: flex;
+		flex-flow: column nowrap;
+		align-items: baseline;
+		padding: 1rem;
+
+		position: relative;
+
+		.columns {
+			width: 100%;
+		}
+
+		&:hover {
+			background-color: colours.$transparent-10;
+		}
+
+		&.desktop {
+			padding: 0;
+			border: none;
+			border-radius: sizing.$border-radius;
+
+			.columns {
+				padding: 0.75rem;
+				// gap: 0.75rem;
+				padding-right: 0;
+				padding-bottom: 0.5rem;
+				border-radius: sizing.$border-radius;
+				border: basics.$border;
+
+				display: flex;
+				flex-flow: row nowrap;
+				align-items: center;
+
+				overflow: hidden;
+
+				.left {
+					flex-shrink: 10;
+					overflow: hidden;
+				}
+
+				.right {
+					flex-shrink: 0;
+					padding: sizing.$half-padding;
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+
+		&.error {
+			background-color: colours.$error-background;
+			border-color: colours.$error-border;
+			color: colours.$error-border;
+
+			.card-label {
+				color: colours.$error-border;
+			}
+		}
+
+		// .row {
+		//     display: flex;
+		//     flex-flow: row nowrap;
+		//     width: 100%;
+		//     align-items: start;
+		//     justify-content: space-between;
+		//     // margin: 0 0 0.1875rem 0;
+		// }
+
+		h3 {
+			margin: 0;
+		}
+	}
+}
+
+@mixin edit-card {
+	@include card;
+	border-radius: unset;
+	min-height: 68px;
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+	padding-top: sizing.$card-inner-gap;
+	padding-bottom: sizing.$card-inner-gap;
+
+	text-align: start;
+	display: flex;
+	flex-flow: row nowrap;
+
+	.left {
+		display: flex;
+		flex-flow: column nowrap;
+		align-items: space-between;
+		flex-grow: 1;
+		overflow: hidden;
+	}
+	.right {
+		display: flex;
+		align-items: center;
+	}
+
+	.row {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: stretch;
+		flex-grow: 1;
+	}
+
+	&.pad-right {
+		padding-right: 4rem;
+	}
+
+	.card-label {
+		@include card-label;
+	}
+
+	.value {
+		flex-grow: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: sizing.$text-medium-large;
+		font-weight: 600;
+		// margin-top: -0.25rem; // why is this here?
+	}
+
+	&.error {
+		background-color: colours.$error-background;
+		border-color: colours.$error-border;
+		color: colours.$error-border;
+		--colour: #{colours.$error-border};
+
+		.card-label {
+			color: colours.$error-border;
+		}
+	}
+}
+
+@mixin large-card {
+	@include card;
+	padding: 1.5rem;
+	font-size: 1.5rem;
+}
+
+@mixin dialog {
+	dialog {
+		overflow: clip;
+		background-color: colours.$ui-blue-2;
+		// max-width: 95%;
+		max-height: 95%;
+		min-height: var(--dialog-min-height);
+		min-width: var(--dialog-min-width); //644px; //overly specific due to chrome shenanigans
+		width: var(--dialog-width, max-content);
+		height: var(--dialog-height, max-content);
+		border-radius: 0.1875rem;
+		border: none;
+		padding: 0;
+
+		&::backdrop {
+			background: rgba(0, 0, 0, 0.3);
+			backdrop-filter: blur(1px);
+		}
+		&.static-height {
+			height: 95%;
+		}
+		&.static-width {
+			width: min(95%, sizing.$max-modal-width);
+		}
+		&[open] {
+			animation: zoom 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+			display: flex;
+		}
+
+		@keyframes zoom {
+			from {
+				transform: scale(0.98);
+			}
+			to {
+				transform: scale(1);
+			}
+		}
+
+		.modal-header {
+			flex-shrink: 0;
+		}
+		.modal-main {
+			align-content: center;
+			flex-shrink: 1;
+			overflow: auto;
+
+			&.noscroll {
+				overflow: visible;
+			}
+		}
+		.footer {
+			flex-shrink: 0;
+		}
+	}
+}
+
+@mixin touch-modal {
+	@include dialog;
+
+	.modal-root {
+		overflow: visible;
+		// height: 100%;
+		flex-grow: 1;
+		max-height: 100%;
+		width: 100%;
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		overflow: auto;
+	}
+	.modal-header {
+		position: relative;
+
+		// .close-button {
+		// 	position: absolute;
+		// 	right: 0.33rem;
+		// 	top: 0.33rem;
+		// }
+	}
+	.modal-heading {
+		user-select: none;
+		background-color: colours.$brand-primary;
+		color: colours.$ui-white;
+		margin: 0;
+		padding: sizing.$regular-padding;
+		text-align: center;
+		font-size: sizing.$text-large;
+	}
+
+	.modal-main {
+		flex-grow: 1;
+		overflow-y: auto;
+		padding: sizing.$half-padding;
+
+		font-size: 1.33rem;
+		background-color: colours.$ui-blue-1;
+
+		&.noscroll {
+			overflow: visible;
+		}
+	}
+
+	.modal-footer {
+		bottom: 0;
+		border-top: basics.$border;
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		flex-flow: row-reverse wrap;
+		justify-content: space-between;
+
+		padding: sizing.$regular-padding;
+		gap: 2rem;
+
+		button {
+			// @include card;
+			padding: sizing.$button-padding-lg-wide;
+			border-width: sizing.$border-width-double;
+		}
+	}
+
+	.actions {
+		display: flex;
+		flex-flow: row-reverse nowrap;
+		gap: 2.5rem;
+	}
+
+	.input-container {
+		padding: sizing.$regular-padding;
+		padding-bottom: sizing.$regular-padding;
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-around;
+		gap: sizing.$regular-gap;
+
+		.country-margin {
+			width: 100%;
+			// box-sizing: border-box;
+			margin-top: 1rem;
+		}
+	}
+
+	.button-container {
+		padding: sizing.$double-padding;
+	}
+
+	.card-container,
+	.button-container {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: sizing.$regular-gap;
+	}
+
+	span {
+		text-align: center;
+		font-size: 1.33rem;
+		color: colours.$font-primary;
+	}
+
+	.card-container {
+		padding: 0 1rem;
+		height: 100%;
+
+		align-content: baseline;
+
+		&.with-top-padding {
+			padding: sizing.$regular-padding;
+		}
+	}
+	.actions {
+		button {
+			// @include large-card;
+			border-width: sizing.$border-width-double;
+			// border-radius: 3px;
+			border-radius: #{sizing.$border-radius};
+			// flex-grow: 1;
+			padding: 1rem 2rem;
+			// flex-basis: 8rem;
+			align-items: center;
+		}
+	}
+
+	.header-extra,
+	.cancel-container {
+		padding: sizing.$half-padding;
+		background-color: colours.$ui-blue-2;
+	}
+
+	.header-extra {
+		border-bottom: basics.$border;
+		display: none;
+
+		&.visible {
+			display: block;
+		}
+	}
+
+	.select-container,
+	.cancel-container {
+		display: flex;
+		flex-flow: column nowrap;
+		gap: sizing.$regular-gap;
+	}
+
+	.cancel-container {
+		border-top: basics.$border;
+		bottom: 0;
+		z-index: 1;
+	}
+
+	span {
+		text-align: center;
+		font-size: 1.33rem;
+		color: colours.$font-primary;
+	}
+
+	.select-container {
+		box-sizing: border-box;
+		padding: 1rem 2.5rem;
+		align-content: baseline;
+		flex-grow: 1;
+		// &.with-top-padding {
+		// 	padding: 2.5rem;
+		// }
+	}
+	button {
+		@include large-card;
+
+		display: block;
+		border-width: sizing.$border-width-double;
+		// border-radius: 3px;
+		border-radius: #{sizing.$border-radius};
+	}
+}
+
+@mixin modal {
+	@include dialog;
+
+	dialog {
+		// border-radius: 4px;
+		border-radius: #{sizing.$border-radius};
+	}
+
+	.modal-root {
+		overflow: visible;
+		// height: 100%;
+		flex-grow: 1;
+		max-height: 100%;
+		width: 100%;
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		overflow: auto;
+	}
+	.modal-header {
+		position: relative;
+
+		// .close-button {
+		// 	position: absolute;
+		// 	right: 0.33rem;
+		// 	top: 0.33rem;
+		// }
+	}
+	.modal-heading {
+		user-select: none;
+		background-color: colours.$brand-primary;
+		color: colours.$ui-white;
+		margin: 0;
+		padding: sizing.$regular-padding;
+		text-align: center;
+		font-size: sizing.$text-large;
+	}
+
+	.modal-main {
+		display: flex;
+		flex-grow: 1;
+		// overflow-y: auto;
+		padding: sizing.$half-padding;
+		background-color: colours.$ui-blue-1;
+
+		&.noscroll {
+			overflow: visible;
+		}
+	}
+
+	.modal-footer {
+		bottom: 0;
+		border-top: basics.$border;
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		flex-flow: row-reverse wrap;
+		justify-content: space-between;
+
+		padding: sizing.$regular-padding;
+		gap: 2rem;
+
+		button {
+			// @include card;
+			padding: sizing.$button-padding-lg-wide;
+			border-width: sizing.$border-width-double;
+		}
+	}
+
+	.actions {
+		display: flex;
+		flex-flow: row-reverse nowrap;
+		gap: 2.5rem;
+	}
+
+	.input-container {
+		padding: sizing.$regular-padding;
+		padding-bottom: sizing.$regular-padding;
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-around;
+		gap: sizing.$regular-gap;
+
+		.country-margin {
+			width: 100%;
+			// box-sizing: border-box;
+			margin-top: 1rem;
+		}
+	}
+
+	.button-container {
+		padding: sizing.$double-padding;
+	}
+
+	.card-container,
+	.button-container {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: sizing.$regular-gap;
+	}
+
+	span {
+		text-align: center;
+		font-size: 1.33rem;
+		color: colours.$font-primary;
+	}
+
+	.card-container {
+		padding: 0 1rem;
+		height: 100%;
+
+		align-content: baseline;
+
+		&.with-top-padding {
+			padding: sizing.$regular-padding;
+		}
+	}
+	.actions {
+		button {
+			// @include large-card;
+			border-width: sizing.$border-width-double;
+			// border-radius: 3px;
+			border-radius: #{sizing.$border-radius};
+			// flex-grow: 1;
+			padding: 1rem 2rem;
+			// flex-basis: 8rem;
+			align-items: center;
+		}
+	}
+
+	.header-extra,
+	.cancel-container {
+		padding: sizing.$half-padding;
+		background-color: colours.$ui-blue-2;
+	}
+
+	.header-extra {
+		border-bottom: basics.$border;
+		display: none;
+
+		&.visible {
+			display: block;
+		}
+	}
+
+	.select-container,
+	.cancel-container {
+		display: flex;
+		flex-flow: column nowrap;
+		gap: sizing.$regular-gap;
+	}
+
+	.cancel-container {
+		border-top: basics.$border;
+		bottom: 0;
+		z-index: 1;
+	}
+
+	span {
+		text-align: center;
+		font-size: 1.33rem;
+		color: colours.$font-primary;
+	}
+
+	.select-container {
+		box-sizing: border-box;
+		padding: 1rem 2.5rem;
+		align-content: baseline;
+
+		// &.with-top-padding {
+		// 	padding: 2.5rem;
+		// }
+	}
+	button {
+		@include large-card;
+
+		display: block;
+		border-width: sizing.$border-width-double;
+		border-radius: sizing.$border-radius;
+	}
+}
+
+@mixin regular-input {
+	box-sizing: border-box;
+	height: 100%;
+	width: 100%;
+	font-size: #{sizing.$text-small-small-medium};
+	font-weight: 400;
+	padding-top: var(--input-padding-top, 0.65rem);
+	padding-bottom: var(--input-padding-bottom, 0.55rem);
+	padding-left: var(--input-padding-left, 0.75rem);
+	padding-right: var(--input-padding-right, 0.75rem);
+	border: var(--input-border, solid 1px #{colours.$ui-blue-4});
+	color: colours.$font-primary;
+	transition: transitions.$colours;
+	border-radius: var(--input-border-radius, 4px);
+
+	&:disabled {
+		background-color: colours.$ui-blue-1;
+	}
+
+	&.for-default:focus-visible {
+		outline-offset: -1px;
+		outline-width: 1px;
+	}
+
+	&.invalid {
+		border-color: colours.$error-border;
+		color: colours.$error-border;
+		background-color: colours.$error-background;
+
+		&:focus,
+		&:focus-visible {
+			outline-color: colours.$error-border !important;
+		}
+	}
+}
+
+@mixin modal-input-base {
+	font-size: 2rem;
+
+	box-sizing: border-box;
+	flex-grow: 1;
+
+	&.uppercase {
+		text-transform: uppercase;
+	}
+
+	&:focus {
+		outline-color: colours.$brand-dark;
+	}
+
+	&.for-modal {
+		border-radius: 0;
+		height: 100%;
+		resize: none;
+		padding-top: 1.44rem;
+		padding-right: 0.75rem;
+		padding-bottom: 0.25rem;
+		padding-left: 0.75rem;
+
+		font-size: sizing.$text-large;
+		font-weight: sizing.$font-weight-touch;
+
+		&.left-pad {
+			padding-left: 3.5rem;
+		}
+
+		&.right-pad {
+			padding-right: 3.5rem;
+		}
+	}
+}
+
+@mixin modal-label {
+	box-sizing: border-box;
+	font-size: 1.5rem;
+	position: relative;
+	display: block;
+	width: 100%;
+
+	span.top-label {
+		@include card-label;
+		z-index: 1;
+		position: absolute;
+		top: 0.45rem;
+		left: 0.75rem;
+
+		&.invalid {
+			color: colours.$error-border;
+		}
+	}
+}
+
+@mixin absolute-label-shared {
+	position: absolute;
+	left: 0.5rem;
+	font-size: sizing.$text-small-small-medium;
+	user-select: none;
+	padding-left: 0.4rem;
+	padding-right: 0.4rem;
+}
+
+@mixin absolute-label {
+	@include absolute-label-shared;
+
+	padding: 0.1rem 0.4rem;
+	top: -0.6rem;
+	z-index: 2;
+	color: colours.$font-secondary;
+	white-space: nowrap;
+
+	&.invalid {
+		color: colours.$error-border;
+	}
+}
+
+@mixin absolute-label-border {
+	@include absolute-label-shared;
+
+	padding-top: 0;
+	padding-bottom: 0;
+	z-index: 1;
+	white-space: nowrap;
+	top: 0%;
+	height: 0;
+	color: transparent;
+	border-bottom: solid 1px colours.$ui-white;
+
+	&.invalid {
+		border-bottom-color: colours.$error-background;
+	}
+}
+
+@mixin input-misc {
+	span {
+		transition: transitions.$colours;
+	}
+
+	span.right-label.inset {
+		user-select: none;
+		font-size: 1rem;
+		font-weight: 500;
+		position: absolute;
+		background-color: colours.$ui-blue-1;
+		border-left: basics.$border;
+		right: 1px;
+		top: 1px;
+		bottom: 1px;
+		border-radius: 0 sizing.$border-radius sizing.$border-radius 0;
+		display: flex;
+		flex-flow: column;
+		justify-content: center;
+		aspect-ratio: 1/1;
+		align-content: center;
+		text-align: center;
+	}
+
+	span.right-label {
+		color: colours.$font-secondary-heading;
+		display: inline;
+		flex-basis: 2rem;
+
+		&.for-modal {
+			align-self: center; // may be moved to always be there, even when not in a modal. I don't know yet
+			margin-top: 1rem;
+		}
+	}
+
+	span.for-default {
+		@include absolute-label;
+	}
+
+	span.border {
+		@include absolute-label-border;
+	}
+
+	.select-none {
+		user-select: none;
+	}
+	.left-pad {
+		padding-left: 3rem;
+	}
+	.right-pad {
+		padding-right: 3rem;
+	}
+	.icon-container {
+		position: relative;
+		display: flex;
+		flex-flow: row;
+		width: 100%;
+		height: 100%;
+		gap: sizing.$regular-gap;
+
+		&.for-modal {
+			// position: absolute;
+			height: 100%;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+	.error {
+		color: colours.$error-border;
+		margin-left: 0.25rem;
+		display: block;
+		overflow-x: auto;
+		white-space: nowrap;
+	}
+}
+
+@mixin textarea {
+	textarea {
+		@include regular-input;
+
+		&.noresize {
+			resize: none;
+		}
+
+		&.full-width {
+			width: 100%;
+			flex-basis: 100%;
+			flex-grow: 1;
+		}
+	}
+
+	label {
+		position: relative;
+
+		width: var(--input-width, 100%);
+
+		&.max-width {
+			flex-grow: 1;
+		}
+	}
+
+	label.for-modal {
+		@include modal-label;
+
+		textarea {
+			@include modal-input-base;
+			height: 4rem;
+		}
+	}
+
+	@include input-misc;
+
+	.textarea-error-wrapper {
+		display: block;
+		width: 100%;
+		height: max(var(--input-height, #{sizing.$input-height}), 2rem);
+		width: var(--input-width, 100%);
+
+		&.for-modal {
+			position: relative;
+			height: 100%;
+		}
+	}
+}
+
+@mixin input {
+	input {
+		@include regular-input;
+	}
+
+	@include input-misc;
+
+	.right-icon {
+		position: absolute;
+		right: 0.5rem;
+		top: 50%;
+		translate: 0 -50%;
+	}
+
+	label {
+		position: relative;
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.error-wrapper {
+		display: block;
+		// width: 100%;
+		// height: max(var(--input-height, #{sizing.$input-height}), 2rem);
+		height: max(var(--input-height, #{sizing.$input-height}));
+		width: var(--input-width, 100%);
+
+		&.for-table {
+			width: 100%;
+			flex: 1;
+			display: flex;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+
+		&.for-modal {
+			flex: unset;
+			position: relative;
+			height: 4.17rem;
+		}
+	}
+}
+
+@mixin modal-input {
+	label.for-modal {
+		@include modal-label;
+
+		input {
+			@include modal-input-base;
+			height: 3rem;
+		}
+	}
+}
+@mixin table-input {
+	label.for-table {
+		display: flex;
+		width: 100%;
+
+		input {
+			height: unset;
+		}
+	}
+}
+
+@mixin call-to-action {
+	&:not([disabled]) {
+		background-color: colours.$brand-primary;
+		color: colours.$ui-white;
+		fill: colours.$ui-white;
+		border-color: colours.$brand-primary;
+		transition: transitions.$colours;
+
+		// &:focus,
+		&:hover {
+			background-color: colours.$brand-dark;
+			border-color: colours.$brand-dark;
+		}
+
+		&:focus,
+		&:focus-visible {
+			@include outline;
+			outline-color: colours.$font-primary !important;
+		}
+
+		&:focus {
+			outline-offset: -2px;
+		}
+	}
+}
+
+@mixin button-card {
+	@include card;
+	flex-flow: row nowrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 2rem;
+	font-size: var(--font-size, 1.33rem);
+	color: colours.$font-primary;
+	font-weight: sizing.$font-weight-touch;
+
+	width: 100%; //may suck
+
+	box-sizing: border-box;
+}
+
+@mixin large-card-detail {
+	font-size: sizing.$text-small-medium;
+	font-weight: sizing.$font-weight-touch;
+	background-color: colours.$ui-blue-1;
+	color: colours.$font-primary;
+	display: flex;
+	border: basics.$border;
+	border-radius: sizing.$border-radius;
+	padding: sizing.$card-detail-padding;
+	user-select: none;
+	gap: sizing.$half-gap;
+	align-items: center;
+
+	&.markable {
+		user-select: unset;
+		cursor: unset;
+	}
+
+	&.uom {
+		font-size: sizing.$text-medium-small-medium;
+		color: colours.$font-secondary;
+		--colour: #{colours.$ui-blue-9};
+		text-transform: uppercase;
+	}
+
+	&.editable {
+		transition: transitions.$colours;
+		background-color: colours.$ui-white;
+		cursor: pointer;
+		color: colours.$font-primary;
+		fill: colours.$font-primary;
+
+		&:hover {
+			background-color: colours.$transparent-10;
+		}
+	}
+
+	&.quantity {
+		@include call-to-action;
+	}
+
+	&.optional {
+		justify-content: end;
+		font-size: sizing.$text-medium-small-medium;
+		display: none;
+		line-height: 1.5;
+
+		&.visible {
+			display: flex;
+		}
+
+		&:not(.entered) {
+			background-color: colours.$error-background;
+		}
+	}
+}
+
+@mixin card-row {
+	display: flex;
+	justify-content: space-between;
+	text-align: start;
+
+	.card-detail {
+		font-size: sizing.$text-small-medium;
+		font-weight: sizing.$font-weight-touch;
+		background-color: var(--card-detail-background-colour, colours.$ui-blue-1);
+		color: var(--card-colour, colours.$font-primary);
+		display: flex;
+		align-items: center;
+
+		border-radius: sizing.$border-radius; // BORDER RADIUS HERE
+		padding: sizing.$card-detail-padding;
+
+		&.optional {
+			display: none;
+			&.visible {
+				border: basics.$border;
+				display: flex;
+			}
+		}
+
+		&.primary {
+			background-color: var(--primary-card-background-colour, colours.$brand-primary);
+			color: var(--primary-card-colour, colours.$ui-white);
+			fill: var(--primary-card-colour, colours.$ui-white);
+		}
+	}
+
+	h3 {
+		color: colours.$font-primary;
+		margin: 0;
+		font-size: sizing.$card-title;
+	}
+
+	.left,
+	.right {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		gap: sizing.$card-gap;
+	}
+}
+
+@mixin side-card {
+	button.item-root {
+		@include card;
+		gap: 0.25rem;
+	}
+
+	div.item-root {
+		@include card-layout;
+	}
+
+	.row {
+		@include card-row;
+	}
+	.product-title {
+		@include product-title;
+	}
+
+	h3 {
+		max-width: 100%;
+	}
+}
+
+@mixin product-title {
+	color: colours.$font-secondary;
+	--colour: #{colours.$ui-blue-9};
+	font-size: sizing.$text-small-medium;
+	line-height: 21.6px;
+}
+
+@mixin touch-main {
+	.touch-main {
+		background-color: colours.$ui-blue-1;
+		flex-grow: 1;
+		overflow-y: auto;
+		display: flex;
+	}
+	.touch-utility {
+		border-top: solid 1px colours.$ui-blue-4;
+		background-color: colours.$ui-blue-1;
+		display: flex;
+		flex-basis: 8rem;
+		flex-shrink: 0;
+	}
+}
+
+@mixin two-by-three-main {
+	.card-detail {
+		@include large-card-detail;
+	}
+
+	.root {
+		display: flex;
+		flex-direction: row;
+		border: basics.$border-thick;
+		// border-radius: sizing.$thick-border-radius;
+		transition: transitions.$colours;
+		background-color: colours.$ui-white;
+	}
+
+	.left-outer {
+		padding: sizing.$card-padding;
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+	.right-outer {
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: space-around;
+		border-left: basics.$border-thick;
+	}
+	.left-inner {
+		display: flex;
+		flex-direction: column;
+		gap: sizing.$card-inner-gap;
+		flex-grow: 1;
+	}
+	.right-inner {
+		display: flex;
+		flex-direction: column;
+		// gap: sizing.$card-gap;
+		justify-content: space-between;
+		align-items: end;
+	}
+	.row {
+		display: flex;
+		gap: sizing.$card-gap;
+
+		h3 {
+			color: colours.$font-primary;
+			margin: 0;
+			font-size: sizing.$card-title;
+		}
+	}
+
+	// TODO rename to something more generic
+
+	.product-title {
+		@include product-title;
+	}
+
+	.top {
+		display: flex;
+		height: 100%;
+	}
+}
+
+@mixin table-column-highlight {
+	td {
+		position: relative;
+		padding: 0;
+	}
+
+	div.wrapper {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: stretch;
+		justify-content: stretch;
+	}
+}
+
+@mixin two-by-three-main-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: sizing.$half-padding;
+	gap: sizing.$half-gap;
+	align-items: stretch;
+	flex-grow: 1;
+}
+
+@mixin utility-button-wrapper {
+	.bg-wrapper {
+		flex: 1;
+		display: flex;
+		background-color: colours.$ui-blue-1;
+	}
+
+	.spacer-half {
+		background-color: colours.$ui-blue-1;
+		flex-grow: 0.5;
+	}
+
+	.spacer {
+		background-color: colours.$ui-blue-1;
+		flex-grow: 1;
+	}
+
+	.button-list-wrapper {
+		background-color: colours.$ui-blue-4;
+		flex: 1;
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 1px;
+	}
+}
+
+@mixin title-card {
+	@include card-layout;
+	font-size: sizing.$text-x-large;
+	font-weight: sizing.$font-weight-touch;
+	color: colours.$font-primary;
+	background-color: var(--background-colour, #{colours.$ui-blue-1});
+	align-items: center;
+	user-select: none;
+}
+
+@mixin mid-title-card {
+	@include title-card;
+	margin: 0 -0.5rem;
+	border-left: none;
+	border-right: none;
+	background-color: colours.$ui-blue-2;
+}
+
+@mixin documents-modal {
+	width: 100%;
+	display: flex;
+	padding: sizing.$regular-padding;
+	flex-direction: column;
+	gap: sizing.$regular-gap;
+
+	.row {
+		display: flex;
+		flex-flow: row nowrap;
+		width: 100%;
+		justify-content: space-between;
+		gap: 2%;
+
+		.left,
+		.right,
+		.mid {
+			box-sizing: border-box;
+			display: flex;
+			flex-flow: column nowrap;
+			gap: 0.75rem;
+			align-items: start;
+		}
+
+		.mid {
+			flex-basis: calc(33% - 1.5rem);
+			flex-shrink: 1;
+			overflow: hidden;
+		}
+
+		.left {
+			flex-basis: 33%;
+			flex-shrink: 0;
+		}
+		.right {
+			flex-basis: 33%;
+			flex-shrink: 0;
+		}
+	}
+}
+
+@mixin modal-side-by-side {
+	padding: sizing.$regular-padding 0;
+	display: flex;
+	flex-flow: row nowrap;
+	gap: sizing.$regular-gap;
+}
+
+@mixin three-col-splash-screen {
+	.with-gap {
+		display: flex;
+		flex-flow: row wrap;
+		gap: sizing.$half-gap;
+	}
+	.main-wrapper {
+		display: flex;
+		flex: 1;
+		flex-flow: row nowrap;
+		justify-content: center;
+	}
+	.main {
+		display: flex;
+		flex-flow: column;
+		align-self: center;
+		justify-self: center;
+		align-items: center;
+		position: relative;
+		margin-bottom: 5vh;
+	}
+	h1 {
+		color: colours.$font-primary;
+	}
+	.secondary {
+		display: block;
+		color: colours.$font-secondary;
+		--colour: #{colours.$ui-blue-9};
+		line-height: 1.5;
+		font-size: 1.25rem;
+
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: flex-end;
+		align-items: center;
+		gap: sizing.$half-gap;
+	}
+	.left,
+	.right {
+		display: flex;
+		justify-content: space-between;
+		flex-flow: column;
+		padding: sizing.$double-padding;
+		flex-basis: 33%;
+	}
+
+	.row {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: sizing.$regular-gap;
+	}
+
+	.left {
+		margin-right: auto;
+		align-items: flex-start;
+		justify-content: space-between;
+	}
+	.right {
+		margin-left: auto;
+		align-items: flex-end;
+	}
+	span.block {
+		display: block;
+		box-sizing: border-box;
+	}
+}
+
+@mixin table-cell-basic {
+	td {
+		@include table-height-transition;
+		--input-border: none;
+		--input-height: var(--height);
+		white-space: nowrap;
+		overflow-x: clip;
+		text-overflow: ellipsis;
+		position: relative;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		border: solid 1px colours.$ui-blue-4;
+		border-left: none;
+	}
+}
+
+@mixin table-cell-multifocus {
+	td {
+		&.multifocus {
+			background-color: var(--multifocus-colour, colours.$primary-blue-2);
+
+			&.multifocus-start {
+				background-color: colours.$ui-white;
+			}
+		}
+	}
+}
+
+@mixin table-cell-focusable {
+	td {
+		&.focusable {
+			user-select: none;
+			cursor: default;
+			outline: none;
+			&.editable {
+				cursor: pointer;
+			}
+		}
+	}
+}
+
+@mixin table-cell-validity {
+	td {
+		&.info {
+			background-color: #{colours.$brand-dark};
+		}
+
+		&.warning {
+			background-color: #{colours.$warning};
+		}
+
+		&.error {
+			background-color: #{colours.$error-background};
+		}
+	}
+}
+
+@mixin table-cell-display {
+	td {
+		max-height: var(--max-height);
+		height: var(--height);
+		box-sizing: content-box;
+		overflow-x: clip;
+		--td-padding-left: 0;
+		--td-padding-right: 0;
+	}
+}
+
+@mixin table-cell-slot-wrapper {
+	div.slot-wrapper {
+		&.multifocus {
+			background-color: var(--multifocus-colour, colours.$primary-blue-1);
+
+			&.multifocus-start {
+				background-color: colours.$ui-white;
+			}
+		}
+
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+@mixin table-cell-svelecte {
+	td {
+		&.select-cell {
+			padding: unset;
+			box-sizing: border-box;
+			vertical-align: middle;
+
+			text-align: center;
+		}
+	}
+
+	td {
+		--sv-border: none;
+		:global(.select-wrapper) {
+			--sv-min-height: 0px;
+			--sv-general-padding: 0px;
+			--sv-item-wrap-padding: 0px 0.75rem;
+			--input-height: var(--height);
+		}
+	}
+}
+@mixin table-cell {
+	@include table-cell-basic;
+	@include table-cell-multifocus;
+	@include table-cell-focusable;
+	@include table-cell-validity;
+
+	td {
+		&.invalid {
+			background-color: colours.$error-background !important;
+		}
+
+		&.focusable.focus {
+			user-select: none;
+			cursor: default;
+			outline: none;
+		}
+
+		&.input-cell,
+		&.select-cell,
+		&.datepicker-cell {
+			padding: unset;
+			box-sizing: border-box;
+			vertical-align: middle;
+
+			.react-datepicker-wrapper {
+				width: 100%;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: center;
+
+				.react-datepicker__input-container {
+					width: 100%;
+					// width: calc(100% - 2px);
+					display: flex;
+					justify-content: center;
+					box-sizing: border-box;
+				}
+
+				input {
+					width: 100%;
+					border: none;
+					outline: none;
+					box-shadow: basics.$table-focus;
+					box-sizing: border-box;
+					border-radius: 0;
+					line-height: 1.5;
+					font-size: inherit;
+					font-family: inherit;
+					padding: 0.8rem 0.75rem;
+				}
+			}
+
+			.select {
+				width: 100%;
+
+				input {
+					padding: 0.8rem 0.75rem;
+					border-radius: 0;
+					width: 100%;
+					border: none;
+					outline: none;
+					box-shadow: basics.$table-focus;
+				}
+			}
+		}
+
+		.stretch {
+			display: flex;
+			// position: absolute;
+			// top: 0;
+			// bottom: 0;
+			// left: 0;
+			// right: 0;
+		}
+
+		&.checkbox-cell {
+			box-sizing: content-box;
+			height: var(--height);
+
+			& * {
+				outline-color: colours.$transparent-20;
+				// transition: outline-color transitions.$ease;
+				&.focus-within {
+					outline: solid 1px colours.$brand-primary;
+				}
+			}
+
+			// & .checkbox__icn {
+			//   transition: all transitions.$ease;
+			// }
+		}
+
+		&.select-cell {
+			input {
+				width: 100%;
+				// width: calc(100% - 2px);
+			}
+		}
+
+		&.checkbox-cell,
+		&.select-cell {
+			text-align: center;
+		}
+
+		.input-container {
+			width: 100%;
+			// width: calc(100% - 2px);
+
+			input {
+				width: 100%;
+				box-sizing: border-box;
+				border-radius: 0;
+
+				font-size: inherit;
+
+				&:focus {
+					outline: none;
+					box-shadow: basics.$table-focus;
+				}
+			}
+		}
+	}
+}
+
+@mixin table-cell-quick-search {
+	.spaced-around {
+		height: 100%;
+		overflow: hidden;
+		display: flex;
+		padding-left: 4px;
+		padding-right: 4px;
+		gap: 4px;
+	}
+	td {
+		background-color: colours.$ui-blue-1;
+		height: var(--height);
+		overflow: visible;
+		padding-left: 0;
+		padding-right: 0;
+
+		div.stick-right {
+			position: absolute;
+			right: 0.5rem;
+			height: 100%;
+			bottom: 50%;
+			top: 0;
+			display: flex;
+			background-color: transparent;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+	div.floating {
+		position: absolute;
+		width: 18rem;
+		right: -14.5rem;
+		top: calc(100% + 0.75rem);
+		z-index: 99999;
+		border: solid 2px #{colours.$ui-blue-4};
+		border-radius: sizing.$border-radius;
+		box-shadow: 0px 0px 5px 0px #{colours.$ui-blue-3};
+
+		&::after {
+			// TODO fix shape and z-index
+			position: absolute;
+			content: '';
+			padding: 0.7rem;
+			z-index: 5;
+			top: -0.75rem;
+			border-radius: sizing.$border-radius;
+			left: 1rem;
+			transform: rotate(45deg);
+			background-color: #{colours.$ui-white};
+			border: solid 2px #{colours.$ui-blue-4};
+		}
+
+		div.select-wrapper {
+			position: relative;
+			z-index: 99999;
+			padding: 1rem;
+			width: 100%;
+			height: 100%;
+			background-color: #{colours.$ui-white};
+			border-radius: sizing.$border-radius;
+		}
+	}
+
+	div.input-wrapper-parent {
+		height: 100%;
+		width: 100%;
+		--input-height: 100%;
+		--input-min-width: 180px;
+		--sv-min-height: 0px;
+		--sv-border: none;
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 0.25rem;
+		flex-grow: 1;
+		--input-border: none;
+
+		div.input-wrapper {
+			position: relative;
+
+			&.left {
+				flex-grow: 2;
+			}
+
+			&.right {
+				min-width: 100px;
+				flex-grow: 2;
+				--input-padding-right: 2.6rem;
+			}
+		}
+	}
+}
+
+@mixin table-cell-input-basic {
+	td {
+		&.input-cell {
+			padding: unset;
+			box-sizing: border-box;
+			vertical-align: middle;
+		}
+	}
+}
+
+@mixin table-checkbox-label {
+	label {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: center;
+
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: center;
+	}
+}
+
+@mixin table-header-checkbox {
+	input[type='checkbox'] {
+		height: var(--checkbox-height);
+		padding: 1rem;
+		// height: 100%;
+		box-sizing: border-box;
+		cursor: pointer;
+		accent-color: var(--colour, colours.$brand-primary);
+		flex-grow: 1;
+
+		&:focus,
+		&:focus-visible,
+		&:focus-within {
+			outline: none !important;
+			// box-shadow: basics.$table-focus;
+		}
+	}
+
+	@include table-checkbox-label;
+	label {
+		cursor: pointer;
+	}
+}
+
+@mixin table-checkbox {
+	@include table-header-checkbox;
+
+	label {
+		&.multifocus {
+			background-color: var(--multifocus-colour, colours.$primary-blue-1);
+
+			&.multifocus-start {
+				background-color: colours.$ui-white;
+			}
+		}
+	}
+}
+
+@mixin checkbox-cell {
+	@include table-cell;
+	@include table-checkbox;
+
+	label {
+		&.focus-within {
+			outline: none !important;
+			box-shadow: basics.$table-focus;
+		}
+	}
+}
+
+@mixin table-head {
+	th {
+		position: relative;
+		min-width: fit-content;
+		color: colours.$ui-black;
+		border: solid 1px colours.$ui-blue-4;
+	}
+}
+
+@mixin table-row-basic {
+	tr {
+		line-height: var(--line-height, 3);
+		@include table-height-transition;
+		background-color: colours.$ui-white;
+
+		td.no-padding {
+			padding: 0;
+		}
+
+		&.alt {
+			background-color: colours.$ui-blue-1;
+		}
+
+		&.highlighted,
+		&.hoverable:hover {
+			background-color: colours.$primary-blue-2;
+		}
+	}
+}
+
+@mixin table-row-no-hover {
+	tr {
+		line-height: var(--line-height, 3);
+
+		th {
+			border-top: none;
+			border-bottom: none;
+			&:first-of-type {
+				// border-top-left-radius: sizing.$border-radius;
+				border-left: none;
+			}
+			&:last-of-type {
+				// border-top-right-radius: sizing.$border-radius;
+				border-right: none;
+			}
+		}
+	}
+}
+
+@mixin table-row {
+	@include table-row-no-hover;
+	tr {
+		&.hovered {
+			background-color: colours.$ui-blue-1;
+		}
+	}
+}
+
+@mixin table-height-transition {
+	transition:
+		line-height 0.2s ease,
+		height 0.2s ease;
+}
+
+@mixin datamatrix-row {
+	div.datamatrix-row {
+		display: flex;
+		gap: 0.5rem;
+		flex-flow: row nowrap;
+		width: 100%;
+	}
+}
+
+@mixin touch-modal-dyo {
+	dialog {
+		overflow: clip;
+		background-color: colours.$ui-blue-2;
+		// max-width: 95%;
+		max-height: 95%;
+		min-height: var(--dialog-min-height);
+		min-width: var(--dialog-min-width); //644px; //overly specific due to chrome shenanigans
+		width: var(--dialog-width, max-content);
+		height: var(--dialog-height, max-content);
+		border-radius: 0.1875rem;
+		border: none;
+		padding: 0;
+
+		&::backdrop {
+			background: rgba(0, 0, 0, 0.3);
+			backdrop-filter: blur(1px);
+		}
+		&.static-height {
+			height: 95%;
+		}
+		&.static-width {
+			width: min(95%, sizing.$max-modal-width);
+		}
+		&[open] {
+			animation: zoom 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+			display: flex;
+		}
+
+		@keyframes zoom {
+			from {
+				transform: scale(0.98);
+			}
+			to {
+				transform: scale(1);
+			}
+		}
+
+		.modal-header {
+			flex-shrink: 0;
+		}
+		.modal-main {
+			align-content: center;
+			flex-shrink: 1;
+			overflow: auto;
+
+			&.noscroll {
+				overflow: visible;
+			}
+		}
+	}
+
+	.modal-root {
+		overflow: visible;
+		// height: 100%;
+		flex-grow: 1;
+		max-height: 100%;
+		width: 100%;
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		overflow: auto;
+	}
+	.modal-header {
+		position: relative;
+
+		// .close-button {
+		// 	position: absolute;
+		// 	right: 0.33rem;
+		// 	top: 0.33rem;
+		// }
+	}
+	.modal-heading {
+		user-select: none;
+		background-color: colours.$brand-primary;
+		color: colours.$ui-white;
+		margin: 0;
+		padding: sizing.$regular-padding;
+		text-align: center;
+		font-size: sizing.$text-large;
+	}
+
+	.modal-main {
+		flex-grow: 1;
+		overflow-y: auto;
+		padding: sizing.$half-padding;
+
+		font-size: 1.33rem;
+		background-color: colours.$ui-blue-1;
+
+		&.noscroll {
+			overflow: visible;
+		}
+	}
+
+	.modal-footer {
+		bottom: 0;
+		border-top: basics.$border;
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		flex-flow: row-reverse wrap;
+		justify-content: space-between;
+
+		padding: sizing.$regular-padding;
+		gap: 2rem;
+
+		button {
+			// @include card;
+			padding: sizing.$button-padding-lg-wide;
+			border-width: sizing.$border-width-double;
+		}
+	}
+
+	button {
+		@include card-layout;
+
+		cursor: pointer;
+
+		&:disabled {
+			background-color: var(--background-colour, colours.$ui-blue-2);
+			color: colours.$font-disabled;
+			--colour: #{colours.$font-disabled};
+			cursor: default;
+		}
+
+		// &button[type='submit']:not([disabled]),
+
+		&:not([disabled]) {
+			&:hover {
+				background-color: var(--hover-background-colour, colours.$transparent-10);
+				--background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+			}
+
+			&:focus,
+			&:focus-visible {
+				@include outline;
+			}
+
+			&.primary {
+				color: colours.$ui-white;
+				background-color: var(--background-colour, colours.$brand-primary);
+				border-color: var(--border-colour, colours.$brand-primary);
+
+				&:focus,
+				&:focus-visible {
+					outline-color: colours.$brand-primary;
+				}
+
+				// &:focus,
+				&:hover {
+					background-color: var(--hover-background-colour, colours.$brand-dark);
+				}
+			}
+		}
+
+		padding: 1.5rem;
+		font-size: 1.5rem;
+
+		display: block;
+		border-width: sizing.$border-width-double;
+		// border-radius: 3px;
+		border-radius: #{sizing.$border-radius};
+	}
+
+	//all good
+	.modal-main {
+		display: flex;
+		flex-flow: column nowrap;
+
+		&.row {
+			flex-flow: row nowrap;
+
+			&.wrap {
+				flex-flow: row wrap;
+			}
+		}
+	}
+
+	.noscroll {
+		overflow: visible;
+	}
+
+	div.button-barcode-set {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: sizing.$regular-padding;
+	}
+
+	.close-button {
+		margin: 0.25rem;
+	}
+
+	.modal-heading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.title-wrapper {
+		position: relative;
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: flex-end;
+		height: 4.25rem;
+
+		.modal-heading {
+			width: 100%;
+			// position: absolute;
+			// left: 0;
+			// right: 0;
+			// top: 0;
+			// bottom: 0;
+
+			&.padded {
+				padding-right: 4.5rem;
+			}
+		}
+
+		// background-color: colours.$dark-blue;
+		.close-button {
+			position: absolute;
+		}
+	}
+
+	button[type='submit'] {
+		@include call-to-action;
+	}
+
+	div.bar-container {
+		position: relative;
+		background-color: colours.$ui-blue-1;
+		width: 100%;
+		margin-top: 1px;
+		height: 1rem;
+		overflow: hidden;
+
+		@keyframes timer {
+			from {
+				width: 100%;
+			}
+
+			to {
+				width: 0%;
+			}
+		}
+
+		div.bar-timer {
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 1rem;
+			background-color: colours.$brand-primary;
+			animation: timer linear var(--timer);
+
+			&.paused {
+				animation-play-state: paused;
+				opacity: 0%;
+				transition: opacity 300ms 0s ease-out;
+			}
+		}
+	}
+}
+
+@mixin date-modal {
+	.modal-footer {
+		bottom: 0;
+		border-top: basics.$border;
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		flex-flow: row-reverse wrap;
+		justify-content: space-between;
+
+		padding: sizing.$regular-padding;
+		gap: 2rem;
+
+		button {
+			// @include card;
+			padding: sizing.$button-padding-lg-wide;
+			border-width: sizing.$border-width-double;
+		}
+	}
+
+	button {
+		@include card-layout;
+
+		cursor: pointer;
+
+		&:disabled {
+			background-color: var(--background-colour, colours.$ui-blue-2);
+			color: colours.$font-disabled;
+			--colour: #{colours.$font-disabled};
+			cursor: default;
+		}
+
+		// &button[type='submit']:not([disabled]),
+
+		&:not([disabled]) {
+			&:hover {
+				background-color: var(--hover-background-colour, colours.$transparent-10);
+				--background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+			}
+
+			&:focus,
+			&:focus-visible {
+				@include outline;
+			}
+		}
+
+		padding: 1.5rem;
+		font-size: 1.5rem;
+
+		display: block;
+		border-width: sizing.$border-width-double;
+		// border-radius: 3px;
+		border-radius: #{sizing.$border-radius};
+	}
+
+	div.inputs {
+		margin-bottom: 1rem;
+
+		display: flex;
+		flex-flow: row nowrap;
+		gap: sizing.$regular-gap;
+		justify-content: space-around;
+	}
+}
+
+@mixin select {
+	.select-wrapper {
+		// --input-width: #{sizing.$input-width};
+		// --input-height: #{sizing.$input-height};
+		// --sv-min-height: 44px;
+
+		min-width: var(--input-min-width);
+		width: min(100%, max(var(--input-width), #{sizing.$input-width}));
+		// height: min(var(--max-height), max(var(--input-height, 2rem), #{sizing.$input-height}));
+		height: max(var(--input-height, #{sizing.$input-height}));
+
+		display: flex;
+		gap: 2rem;
+		color: colours.$font-primary;
+		// width: 100%;
+		// padding-top: 0.5rem;
+		position: relative;
+
+		&.invalid {
+			--sv-border: solid 1px #{colours.$error-border};
+			--sv-control-bg: #{colours.$error-background};
+
+			label span {
+				&:not(.border) {
+					color: #{colours.$error-border};
+				}
+				border-top-color: #{colours.$error-background};
+			}
+		}
+
+		label {
+			position: absolute;
+			// top: -0.5rem;
+			left: 0.5rem;
+			z-index: 1;
+
+			// background-color: colours.$white;
+			font-size: sizing.$text-small-small-medium;
+			padding: 0.05rem 0.4rem;
+			color: colours.$font-secondary;
+
+			span:not(.border) {
+				// position: absolute;
+				// padding: 0.1rem 0.4rem;
+				// top: -0.6rem;
+				// z-index: 2;
+				// color: colours.$font-secondary;
+				// white-space: nowrap;
+				@include absolute-label;
+			}
+
+			span.border {
+				// position: absolute;
+				// left: 0.5rem;
+				// font-size: sizing.$text-small-small-medium;
+				// padding-left: 0.4rem;
+				// padding-right: 0.4rem;
+
+				// z-index: 1;
+				// white-space: nowrap;
+				// top: 0;
+				// height: 0;
+				// color: transparent;
+				// border-top: solid 1px #{colours.$ui-white};
+				@include absolute-label-border;
+			}
+		}
+
+		:global(.svelecte.svelecte-control) {
+			cursor: pointer;
+			max-width: 100%;
+			max-height: 100%;
+			box-sizing: border-box;
+		}
+
+		:global(.sv-item--content) {
+			font-size: #{sizing.$text-small-small-medium};
+		}
+
+		:global(.sv-item--wrap.in-dropdown) {
+			cursor: pointer;
+			min-height: 40px;
+			align-items: center;
+		}
+		:global(.sv-item--content) {
+			min-height: 1.2rem;
+		}
+
+		:global(.sv-btn-indicator) {
+			cursor: pointer;
+		}
+		&.no-border {
+			--sv-border: none;
+		}
+
+		.select-wrapper.force-upwards {
+			:global {
+				.sv_dropdown.is-open {
+					// position: fixed !important;
+					bottom: var(--dropdown-bottom);
+				}
+			}
+		}
+
+		:global {
+			.sv-control {
+				width: 100%;
+				height: 100%;
+				font-size: #{sizing.$text-small-small-medium};
+			}
+			.sv-control--selection {
+				flex-flow: row nowrap;
+				span.sv-input--sizer {
+					position: static;
+					margin: -1px; // HACK aligns it with the rest of the table inputs
+					input {
+						font-size: #{sizing.$text-small-small-medium};
+					}
+				}
+			}
+
+			.svelecte.svelecte-control {
+				cursor: pointer;
+			}
+
+			.sv-item--wrap.in-dropdown {
+				cursor: pointer;
+				min-height: 40px;
+				align-items: center;
+			}
+			.sv-item--content {
+				min-height: 1.2rem;
+			}
+
+			span {
+				transition: transitions.$colours;
+			}
+
+			.sv-control {
+				transition: transitions.$colours;
+			}
+
+			div.sv_dropdown.is-open {
+				z-index: 99;
+			}
+		}
+
+		div.nothing {
+			height: 0;
+			width: 0;
+		}
+
+		.dropdown-item,
+		.selection {
+			font-size: #{sizing.$text-small-small-medium};
+		}
+
+		.selection {
+			padding-left: 0.5rem;
+			white-space: nowrap;
+			display: flex;
+
+			&.invalid {
+				color: colours.$error-border;
+			}
+
+			&.hidden {
+				display: none;
+			}
+		}
+		.icon-bg {
+			display: contents;
+		}
+	}
+
+	div.icons {
+		display: flex;
+		flex-flow: row nowrap;
+		// padding: 0.25rem;
+		gap: 0.25rem;
+		height: 100%;
+		margin-right: 0.25rem;
+		box-sizing: border-box;
+	}
+
+	.dropdown-item {
+		display: flex;
+		flex-flow: row nowrap;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		gap: 1rem;
+		fill: colours.$brand-primary;
+
+		.toggle-icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-flow: column nowrap;
+			opacity: 0;
+
+			&.yes {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin heading {
+	.outer {
+		padding: 1.5rem;
+		display: flex;
+		flex-flow: row nowrap;
+		width: 100%;
+		background-color: colours.$ui-white;
+		border-bottom: solid 1px colours.$ui-blue-4;
+
+		.buttons {
+			display: flex;
+			flex-flow: row-reverse nowrap;
+			align-items: center;
+			justify-content: flex-end;
+			gap: 0.75rem;
+			flex-grow: 1;
+			justify-content: flex-start;
+		}
+
+		.column {
+			flex-grow: 2;
+			display: flex;
+			flex-flow: column nowrap;
+			background-color: colours.$ui-white;
+			h1 {
+				margin-top: 0.25rem;
+				margin-bottom: 0.25rem;
+				color: colours.$ui-blue-14;
+				font-weight: 600;
+				font-size: 1.4rem;
+			}
+			.one-line {
+				display: inline-flex;
+				flex-flow: row;
+				// align-items: flex-start;
+				gap: 1rem;
+				span {
+					display: inline-flex;
+					flex-flow: row;
+					align-items: center;
+					gap: 0.1875rem;
+					fill: colours.$font-secondary;
+					color: colours.$font-secondary;
+					font-size: #{sizing.$text-small-small-medium};
+				}
+			}
+		}
+	}
+}
+
+@mixin attributes-modal-inner {
+	.flex {
+		display: flex;
+		flex-flow: row wrap;
+		gap: 1rem;
+
+		&.column {
+			flex-flow: column nowrap;
+		}
+	}
+
+	.padded {
+		font-size: 1rem;
+		padding: 1rem;
+		flex-grow: 1;
+		background-color: #{colours.$ui-white};
+		height: 100%;
+		border-radius: 0 #{sizing.$border-radius} 0 #{sizing.$border-radius};
+
+		h3 {
+			margin-top: 0;
+			font-weight: 500;
+		}
+
+		.row {
+			align-items: center;
+			flex-basis: calc(50% - 0.5rem);
+			flex-shrink: 1;
+			display: flex;
+			flex-flow: row nowrap;
+			gap: 0.5rem;
+
+			--sv-min0width: 100%;
+
+			&.wrap {
+				flex-flow: row wrap;
+			}
+		}
+	}
+}
+
+@mixin home-page-with-table {
+	.page {
+		position: relative;
+		display: flex;
+		flex-flow: column nowrap;
+		flex-grow: 1;
+		max-height: 100%;
+		// overflow: auto;
+		z-index: 1;
+	}
+	div.table {
+		background-color: colours.$ui-blue-1;
+		display: flex;
+		flex-flow: column nowrap;
+		padding: sizing.$regular-padding;
+		min-height: 400px;
+		width: 100%;
+		flex-grow: 1;
+	}
+}
+
+@mixin card-with-info {
+	.container {
+		padding: sizing.$regular-padding;
+		gap: sizing.$regular-gap;
+		display: flex;
+		flex-flow: column nowrap;
+		background-color: colours.$ui-blue-1;
+	}
+
+	.card-content {
+		display: flex;
+		flex-flow: column nowrap;
+
+		hr {
+			width: 100%;
+			border-top: 0;
+			border-bottom: solid 1px #e8e8e8;
+		}
+
+		.group {
+			display: flex;
+			flex-flow: row nowrap;
+
+			.info {
+				// padding: sizing.$half-padding;
+				// width: 16rem;
+				width: 11.3125rem;
+				display: flex;
+				flex-flow: column nowrap;
+
+				h4 {
+					color: colours.$font-secondary-heading;
+					font-weight: 500;
+					margin: 0;
+				}
+				p {
+					color: colours.$font-secondary;
+					font-size: 0.875rem;
+					margin: 0.5rem 0;
+				}
+			}
+
+			.inputs {
+				--input-width: 26rem;
+				display: flex;
+				width: 100%;
+				flex-flow: row wrap;
+				padding: 1rem sizing.$regular-padding;
+				gap: sizing.$five-quarters-gap;
+				// justify-content: space-around;
+			}
+		}
+	}
+}
+
+@mixin packing-attribute-modal {
+	div.attribute-container {
+		display: flex;
+		flex-flow: column nowrap;
+		width: 100%;
+	}
+
+	h4 {
+		margin: 0;
+	}
+	ul {
+		margin: sizing.$half-gap 0;
+		list-style: none;
+		max-height: 4rem;
+		overflow: hidden;
+		transition: max-height ease-out transitions.$transition-length transitions.$transition-delay;
+
+		&.expanded {
+			max-height: 10rem;
+			overflow: scroll;
+		}
+
+		@keyframes accordion {
+			0% {
+				max-height: 1rem;
+				overflow: auto;
+			}
+
+			100% {
+				max-height: 10rem;
+				overflow: scroll;
+			}
+		}
+	}
+
+	div.right-side {
+		margin-left: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	span.hide-on-expand.expanded {
+		display: none;
+	}
+}
+
+@mixin not-dialog {
+	div.overlay {
+		position: fixed;
+		top: calc(sizing.$nav-height + var(--env-border-height, 0));
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 98;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+}