@quidgest/ui 0.14.0 → 0.14.2

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.14.0
+ * Quidgest UI v0.14.2
  * (c) 2024 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -7,108 +7,108 @@
 *,
 ::before,
 ::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 html {
-	
-	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-		'Segoe UI Emoji';
-	line-height: 1.15; 
-	-webkit-text-size-adjust: 100%; 
-	-moz-tab-size: 4; 
-	tab-size: 4; 
+  
+  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+  line-height: 1.15; 
+  -webkit-text-size-adjust: 100%; 
+  -moz-tab-size: 4; 
+  tab-size: 4; 
 }
 body {
-	margin: 0; 
+  margin: 0; 
 }
 hr {
-	height: 0; 
-	color: inherit; 
+  height: 0; 
+  color: inherit; 
 }
 b,
 strong {
-	font-weight: bolder;
+  font-weight: bolder;
 }
 code,
 kbd,
 samp,
 pre {
-	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; 
-	font-size: 1em; 
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; 
+  font-size: 1em; 
 }
 small {
-	font-size: 80%;
+  font-size: 80%;
 }
 sub,
 sup {
-	font-size: 75%;
-	line-height: 0;
-	position: relative;
-	vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 sub {
-	bottom: -0.25em;
+  bottom: -0.25em;
 }
 sup {
-	top: -0.5em;
+  top: -0.5em;
 }
 table {
-	text-indent: 0; 
-	border-color: inherit; 
+  text-indent: 0; 
+  border-color: inherit; 
 }
 button,
 input,
 optgroup,
 select,
 textarea {
-	font-family: inherit; 
-	font-size: 100%; 
-	line-height: 1.15; 
-	margin: 0; 
+  font-family: inherit; 
+  font-size: 100%; 
+  line-height: 1.15; 
+  margin: 0; 
 }
 button,
 select {
-	text-transform: none;
+  text-transform: none;
 }
 button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-	-webkit-appearance: button;
+  -webkit-appearance: button;
 }
 ::-moz-focus-inner {
-	border-style: none;
-	padding: 0;
+  border-style: none;
+  padding: 0;
 }
 :-moz-focusring {
-	outline: 1px dotted ButtonText;
+  outline: 1px dotted ButtonText;
 }
 :-moz-ui-invalid {
-	box-shadow: none;
+  box-shadow: none;
 }
 legend {
-	padding: 0;
+  padding: 0;
 }
 progress {
-	vertical-align: baseline;
+  vertical-align: baseline;
 }
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-	height: auto;
+  height: auto;
 }
 [type='search'] {
-	-webkit-appearance: textfield; 
-	outline-offset: -2px; 
+  -webkit-appearance: textfield; 
+  outline-offset: -2px; 
 }
 ::-webkit-search-decoration {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 }
 ::-webkit-file-upload-button {
-	-webkit-appearance: button; 
-	font: inherit; 
+  -webkit-appearance: button; 
+  font: inherit; 
 }
 summary {
-	display: list-item;
+  display: list-item;
 }
 $border-radius: 0.25rem !default;
 $compact: true !default;
@@ -116,59 +116,59 @@ $space-base: 0.25rem !default;
 $space-x-base: $space-base !default;
 $space-y-base: $space-base !default;
 $space-none: (
-	x: 0,
-	y: 0
+  x: 0,
+  y: 0
 ) !default;
 $space-xs: (
-	x: (
-		$space-x-base * 0.25
-	),
-	y: (
-		$space-y-base * 0.25
-	)
+  x: (
+    $space-x-base * 0.25
+  ),
+  y: (
+    $space-y-base * 0.25
+  )
 ) !default;
 $space-sm: (
-	x: (
-		$space-x-base * 0.5
-	),
-	y: (
-		$space-y-base * 0.5
-	)
+  x: (
+    $space-x-base * 0.5
+  ),
+  y: (
+    $space-y-base * 0.5
+  )
 ) !default;
 $space-md: (
-	x: $space-x-base,
-	y: $space-y-base
+  x: $space-x-base,
+  y: $space-y-base
 ) !default;
 $space-lg: (
-	x: (
-		$space-x-base * 1.5
-	),
-	y: (
-		$space-y-base * 1.5
-	)
+  x: (
+    $space-x-base * 1.5
+  ),
+  y: (
+    $space-y-base * 1.5
+  )
 ) !default;
 $space-xl: (
-	x: (
-		$space-x-base * 3
-	),
-	y: (
-		$space-y-base * 3
-	)
+  x: (
+    $space-x-base * 3
+  ),
+  y: (
+    $space-y-base * 3
+  )
 ) !default;
 $spaces: (
-	'none': $space-none,
-	'xs': $space-xs,
-	'sm': $space-sm,
-	'md': $space-md,
-	'lg': $space-lg,
-	'xl': $space-xl
+  'none': $space-none,
+  'xs': $space-xs,
+  'sm': $space-sm,
+  'md': $space-md,
+  'lg': $space-lg,
+  'xl': $space-xl
 ) !default;
 $shadow-sm: (0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
 $shadow-md: (
-	0 0 #0000,
-	0 0 #0000,
-	0 4px 6px -1px rgba(0, 0, 0, 0.1),
-	0 2px 4px -2px rgba(0, 0, 0, 0.1)
+  0 0 #0000,
+  0 0 #0000,
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -2px rgba(0, 0, 0, 0.1)
 );
 $breakpoint-xs: 599px !default;
 $breakpoint-sm: 1023px !default;
@@ -192,124 +192,124 @@ $scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 $input-padding-y: 0.26rem !default;
 $input-padding-x: 0.25rem !default;
 .no-scroll {
-	height: 100%;
-	margin: 0;
-	overflow: hidden;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
 }
 *,
 ::after,
 ::before {
-	border: 0 solid $border;
-	outline-offset: 1px;
+  border: 0 solid $border;
+  outline-offset: 1px;
 }
 body {
-	font-size: $font-size-base;
-	color: var(--q-theme-on-background);
-	caret-color: var(--q-theme-on-background);
-	
-	* {
-		
-		scrollbar-color: $scrollbar-thumb $scrollbar-track;
-		scrollbar-width: thin;
-		
-		&::-webkit-scrollbar {
-			width: 7px;
-			height: 7px;
-		}
-		&::-webkit-scrollbar-thumb {
-			background-color: $scrollbar-thumb;
-			border-radius: $border-radius;
-		}
-		&::-webkit-scrollbar-track {
-			background-color: $scrollbar-track;
-			border-radius: $border-radius;
-		}
-	}
+  font-size: $font-size-base;
+  color: var(--q-theme-on-background);
+  caret-color: var(--q-theme-on-background);
+  
+  * {
+    
+    scrollbar-color: $scrollbar-thumb $scrollbar-track;
+    scrollbar-width: thin;
+    
+    &::-webkit-scrollbar {
+      width: 7px;
+      height: 7px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: $scrollbar-thumb;
+      border-radius: $border-radius;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: $scrollbar-track;
+      border-radius: $border-radius;
+    }
+  }
 }
 .fade-enter-from,
 .fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 .fade-enter-to,
 .fade-leave-from {
-	opacity: 1;
+  opacity: 1;
 }
 .fade-enter-active,
 .fade-leave-active {
-	transition: opacity 0.2s;
+  transition: opacity 0.2s;
 }
 .q-badge {
-	$this: &;
-	display: inline-flex;
-	border-width: 1px;
-	border-color: transparent;
-	border-radius: $border-radius;
-	padding: 0.25em 0.5em;
-	line-height: 1rem;
-	font-size: 0.75rem;
-	position: relative;
-	color: var(--q-badge-text-color);
-	&__underlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: inherit;
-		background-color: var(--q-badge-color);
-		opacity: 0.1;
-	}
-	&__content {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		min-height: 1rem;
-		z-index: 1;
-	}
-	&__remove.q-btn:not(:disabled) {
-		padding: 0;
-		border-radius: 9999px;
-		color: inherit;
-		&:hover {
-			background-color: var(--q-badge-color);
-		}
-	}
-	
-	&--pill {
-		border-radius: 9999px;
-	}
-	&--bold {
-		#{$this}__underlay {
-			opacity: 1;
-		}
-	}
-	&--outlined {
-		border-color: currentColor;
-		#{$this}__underlay {
-			opacity: 0;
-		}
-	}
-	@mixin color-variant($color) {
-		&--#{$color} {
-			--q-badge-color: var(--q-theme-#{$color});
-		}
-		&--#{$color}.q-badge--tonal,
-		&--#{$color}.q-badge--outlined {
-			--q-badge-text-color: var(--q-theme-#{$color});
-		}
-		&--#{$color}.q-badge--bold {
-			--q-badge-text-color: var(--q-theme-on-#{$color});
-			.q-badge__remove.q-btn:not(:disabled):hover {
-				background-color: var(--q-badge-text-color);
-				color: var(--q-badge-color);
-			}
-		}
-	}
-	@include color-variant(primary);
-	@include color-variant(info);
-	@include color-variant(success);
-	@include color-variant(warning);
-	@include color-variant(danger);
+  $this: &;
+  display: inline-flex;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: $border-radius;
+  padding: 0.25em 0.5em;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  position: relative;
+  color: var(--q-badge-text-color);
+  &__underlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--q-badge-color);
+    opacity: 0.1;
+  }
+  &__content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1rem;
+    z-index: 1;
+  }
+  &__remove.q-btn:not(:disabled) {
+    padding: 0;
+    border-radius: 9999px;
+    color: inherit;
+    &:hover {
+      background-color: var(--q-badge-color);
+    }
+  }
+  
+  &--pill {
+    border-radius: 9999px;
+  }
+  &--bold {
+    #{$this}__underlay {
+      opacity: 1;
+    }
+  }
+  &--outlined {
+    border-color: currentColor;
+    #{$this}__underlay {
+      opacity: 0;
+    }
+  }
+  @mixin color-variant($color) {
+    &--#{$color} {
+      --q-badge-color: var(--q-theme-#{$color});
+    }
+    &--#{$color}.q-badge--tonal,
+    &--#{$color}.q-badge--outlined {
+      --q-badge-text-color: var(--q-theme-#{$color});
+    }
+    &--#{$color}.q-badge--bold {
+      --q-badge-text-color: var(--q-theme-on-#{$color});
+      .q-badge__remove.q-btn:not(:disabled):hover {
+        background-color: var(--q-badge-text-color);
+        color: var(--q-badge-color);
+      }
+    }
+  }
+  @include color-variant(primary);
+  @include color-variant(info);
+  @include color-variant(success);
+  @include color-variant(warning);
+  @include color-variant(danger);
 }
 $button-primary: var(--q-theme-primary);
 $button-primary-hover: var(--q-theme-primary-dark);
@@ -322,559 +322,561 @@ $button-text-on-danger: var(--q-theme-background);
 $button-plain-hover: rgb(var(--q-theme-neutral-rgb) / 0.1);
 $button-text-on-plain: var(--q-theme-on-background);
 .q-btn {
-	$this: &;
-	--box-shadow-tint: 0 0 0;
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	padding: 0.4rem;
-	border-width: 1px;
-	background-color: transparent;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	border-radius: $border-radius;
-	transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
-		fill, stroke;
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-	transition-duration: 0.15s;
-	&:hover:not(:disabled) {
-		cursor: pointer;
-	}
-	&:focus {
-		outline: $outline;
-		z-index: 3;
-		&:not(:focus-visible) {
-			outline: 0;
-		}
-	}
-	&__content {
-		position: relative;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		font-size: $font-size-base;
-		white-space: nowrap;
-		gap: 0.25rem;
-		pointer-events: none;
-		@if $compact {
-			line-height: 15px;
-			min-width: 15px;
-		} @else {
-			line-height: 16px;
-			min-width: 16px;
-		}
-	}
-	.q-spinner-loader {
-		color: currentColor;
-	}
-	
-	&--primary {
-		--box-shadow-tint: #{$button-primary-shadow};
-		background-color: $button-primary;
-		border-color: $button-primary;
-		color: $button-text-on-primary;
-		&:hover:not(:disabled) {
-			background-color: $button-primary-hover;
-			border-color: $button-primary-hover;
-		}
-	}
-	&--secondary {
-		--box-shadow-tint: #{$button-primary-shadow};
-		border-color: currentColor;
-		color: $button-primary;
-		&:hover:not(:disabled) {
-			background-color: $button-primary-hover;
-			border-color: $button-primary-hover;
-			color: $button-text-on-primary;
-		}
-	}
-	&--tertiary {
-		--box-shadow-tint: #{$button-primary-shadow};
-		background-color: transparent;
-		border-color: transparent;
-		color: $button-primary;
-		&:hover:not(:disabled),
-		&:focus:not(:disabled) {
-			color: $button-primary-hover;
-		}
-	}
-	&--danger {
-		--box-shadow-tint: #{$button-danger-shadow};
-		background-color: $button-danger;
-		border-color: $button-danger;
-		color: $button-text-on-danger;
-		&:hover:not(:disabled) {
-			background-color: $button-danger-hover;
-			border-color: $button-danger-hover;
-		}
-	}
-	&--plain {
-		color: $button-text-on-plain;
-		&:hover:not(:disabled) {
-			background-color: $button-plain-hover;
-		}
-	}
-	
-	&--active {
-		z-index: 2;
-		color: var(--q-theme-primary-dark);
-		border-color: var(--q-theme-primary);
-		background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
-	}
-	&:disabled {
-		opacity: 0.6;
-	}
-	&--loading {
-		&:hover {
-			cursor: not-allowed;
-		}
-		span {
-			visibility: hidden;
-		}
-	}
-	
-	&--small {
-		padding: 0.25rem;
-		line-height: 14px;
-		span {
-			font-size: 0.75rem;
-			line-height: 14px;
-		}
-	}
-	
-	&--borderless {
-		border-color: transparent !important;
-	}
-	&--elevated {
-		box-shadow:
-			0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
-			0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
-			0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
-	}
-	
-	&--block {
-		display: block;
-		width: 100%;
-		& + & {
-			margin-top: 0.5rem;
-		}
-	}
-	&__spinner {
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-	}
+  $this: &;
+  --box-shadow-tint: 0 0 0;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.4rem;
+  border-width: 1px;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  border-radius: $border-radius;
+  transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
+    fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+  &:hover:not(:disabled) {
+    cursor: pointer;
+  }
+  &:focus {
+    outline: $outline;
+    z-index: 3;
+    &:not(:focus-visible) {
+      outline: 0;
+    }
+  }
+  &__content {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: $font-size-base;
+    white-space: nowrap;
+    gap: 0.25rem;
+    pointer-events: none;
+    @if $compact {
+      line-height: 15px;
+      min-width: 15px;
+    } @else {
+      line-height: 16px;
+      min-width: 16px;
+    }
+  }
+  .q-spinner-loader {
+    color: currentColor;
+  }
+  
+  &--primary {
+    --box-shadow-tint: #{$button-primary-shadow};
+    background-color: $button-primary;
+    border-color: $button-primary;
+    color: $button-text-on-primary;
+    &:hover:not(:disabled) {
+      background-color: $button-primary-hover;
+      border-color: $button-primary-hover;
+    }
+  }
+  &--secondary {
+    --box-shadow-tint: #{$button-primary-shadow};
+    border-color: currentColor;
+    color: $button-primary;
+    &:hover:not(:disabled) {
+      background-color: $button-primary-hover;
+      border-color: $button-primary-hover;
+      color: $button-text-on-primary;
+    }
+  }
+  &--tertiary {
+    --box-shadow-tint: #{$button-primary-shadow};
+    background-color: transparent;
+    border-color: transparent;
+    color: $button-primary;
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
+      color: $button-primary-hover;
+    }
+  }
+  &--danger {
+    --box-shadow-tint: #{$button-danger-shadow};
+    background-color: $button-danger;
+    border-color: $button-danger;
+    color: $button-text-on-danger;
+    &:hover:not(:disabled) {
+      background-color: $button-danger-hover;
+      border-color: $button-danger-hover;
+    }
+  }
+  &--plain {
+    color: $button-text-on-plain;
+    &:hover:not(:disabled) {
+      background-color: $button-plain-hover;
+    }
+  }
+  
+  &--active {
+    z-index: 2;
+    color: var(--q-theme-primary-dark);
+    border-color: var(--q-theme-primary);
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+  }
+  &:disabled {
+    opacity: 0.6;
+  }
+  &--loading {
+    &:hover {
+      cursor: not-allowed;
+    }
+    span {
+      visibility: hidden;
+    }
+  }
+  
+  &--small {
+    padding: 0.25rem;
+    line-height: 14px;
+    span {
+      font-size: 0.75rem;
+      line-height: 14px;
+    }
+  }
+  
+  &--borderless {
+    border-color: transparent !important;
+  }
+  &--elevated {
+    box-shadow:
+      0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
+      0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
+      0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
+  }
+  
+  &--block {
+    display: block;
+    width: 100%;
+    & + & {
+      margin-top: 0.5rem;
+    }
+  }
+  &__spinner {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 .q-btn-group {
-	--box-shadow-tint: 0 0 0;
-	position: relative;
-	display: inline-flex;
-	border-radius: $border-radius;
-	&--elevated {
-		--box-shadow-tint: var(--q-theme-primary-rgb);
-		box-shadow:
-			0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
-			0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
-			0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
-	}
-	> .q-btn {
-		position: relative;
-		flex: 0 1 auto;
-		&:not(:last-child) {
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-		&:not(:first-child) {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
-			margin-left: -1px;
-		}
-		&:hover {
-			z-index: 3;
-		}
-	}
+  --box-shadow-tint: 0 0 0;
+  position: relative;
+  display: inline-flex;
+  border-radius: $border-radius;
+  &--elevated {
+    --box-shadow-tint: var(--q-theme-primary-rgb);
+    box-shadow:
+      0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
+      0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
+      0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
+  }
+  > .q-btn {
+    position: relative;
+    flex: 0 1 auto;
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-left: -1px;
+    }
+    &:hover {
+      z-index: 3;
+    }
+  }
 }
 .q-combobox {
-	$this: &;
-	&:not(#{$this}--disabled) {
-		#{$this}__clear,
-		#{$this}__chevron {
-			&:hover,
-			&:focus {
-				cursor: pointer;
-				opacity: 1;
-			}
-		}
-	}
-	&--expanded {
-		#{$this}__chevron svg {
-			transform: rotate(-180deg);
-		}
-	}
+  $this: &;
+  &:not(#{$this}--disabled) {
+    #{$this}__clear,
+    #{$this}__chevron {
+      &:hover,
+      &:focus {
+        cursor: pointer;
+        opacity: 1;
+      }
+    }
+  }
+  &--expanded {
+    #{$this}__chevron svg {
+      transform: rotate(-180deg);
+    }
+  }
 }
 .q-combobox__clear,
 .q-combobox__chevron {
-	padding: 0.1rem;
-	opacity: 0.5;
-	&:hover {
-		cursor: inherit;
-	}
+  padding: 0.1rem;
+  opacity: 0.5;
+  &:hover {
+    cursor: inherit;
+  }
 }
 .q-combobox__chevron svg {
-	transition: all 0.2s;
+  transition: all 0.2s;
 }
 .q-dialog {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	max-width: 50rem;
-	min-width: 20rem;
-	padding: $space-base;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 50rem;
+  min-width: 20rem;
+  padding: $space-base;
 }
 .q-dialog__underlay {
-	background-color: rgb(var(--q-theme-on-background-rgb) / 0.3);
+  background-color: rgb(var(--q-theme-on-background-rgb) / 0.3);
 }
 .q-dialog__header {
-	display: flex;
-	width: 100%;
-	justify-content: space-between;
-	padding: 0.4rem $space-base;
-	&-title {
-		align-self: flex-start;
-		font-weight: $font-weight-bold;
-		padding: 0.4rem;
-		font-size: 1rem;
-	}
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0.4rem $space-base;
+  &-title {
+    align-self: flex-start;
+    font-weight: $font-weight-bold;
+    padding: 0.4rem;
+    font-size: 1rem;
+  }
 }
 .q-dialog__header .q-btn {
-	align-items: center;
+  align-items: center;
 }
 .q-dialog__body {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: $space-base 0.65rem;
-	gap: 0.4rem;
-	&-icon svg {
-		height: 5em;
-		width: 5em;
-	}
-	&-actions {
-		display: flex;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		padding: 0.65rem;
-		padding-bottom: 0.5rem;
-	}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: $space-base 0.65rem;
+  gap: 0.4rem;
+  &-icon svg {
+    height: 5em;
+    width: 5em;
+  }
+  &-actions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0.65rem;
+    padding-bottom: 0.5rem;
+  }
 }
 .q-field {
-	$this: &;
-	display: flex;
-	flex-direction: column;
-	border-radius: $border-radius;
-	width: fit-content;
-	&__label {
-		display: flex;
-		gap: $space-base;
-		align-items: center;
-		color: var(--q-theme-neutral-dark);
-		line-height: 1.5;
-	}
-	&__control {
-		display: flex;
-		align-items: center;
-		height: inherit;
-		width: 100%;
-		border-radius: inherit;
-		border-width: 1px;
-		background-color: transparent;
-		padding: $input-padding-y $input-padding-x;
-		line-height: 1.5;
-		transition: color var(--transition-duration) var(--transition-timing-function);
-	}
-	&__extras {
-		display: flex;
-		gap: $space-base;
-		align-items: center;
-		color: var(--q-theme-neutral);
-		margin-top: $space-base;
-		font-size: calc(0.9 * $font-size-base);
-	}
-	&__prepend,
-	&__append {
-		display: flex;
-		align-items: center;
-	}
-	&__prepend {
-		padding-right: 0.25rem;
-		padding-left: 0.05rem;
-	}
-	&__append {
-		margin-left: auto;
-		padding-left: 0.25rem;
-		padding-right: 0.05rem;
-	}
-	
-	&--required {
-		> #{$this}__label label::after {
-			content: ' *';
-			font-weight: 700;
-			color: var(--q-theme-danger);
-		}
-	}
-	&--readonly {
-		> #{$this}__control {
-			background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
-		}
-	}
-	&--disabled {
-		> #{$this}__control {
-			opacity: 0.5;
-			&:hover {
-				cursor: not-allowed;
-			}
-		}
-	}
-	&:not(#{$this}--disabled) {
-		#{$this}__control {
-			&:focus-within {
-				outline: $outline;
-			}
-		}
-	}
-	
-	@mixin field-size($size, $multiplier: 1) {
-		&--#{$size} {
-			> #{$this}__control {
-				width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * $space-base);
-			}
-		}
-	}
-	@include field-size(mini, 1);
-	@include field-size(small, 2);
-	@include field-size(medium, 3);
-	@include field-size(large, 4);
-	@include field-size(xlarge, 6);
-	@include field-size(xxlarge, 8);
-	&--block {
-		width: 100%;
-	}
+  $this: &;
+  display: flex;
+  flex-direction: column;
+  border-radius: $border-radius;
+  width: fit-content;
+  &__label {
+    display: flex;
+    gap: $space-base;
+    align-items: center;
+    color: var(--q-theme-neutral-dark);
+    line-height: 1.5;
+  }
+  &__control {
+    display: flex;
+    align-items: center;
+    height: inherit;
+    width: 100%;
+    border-radius: inherit;
+    border-width: 1px;
+    background-color: transparent;
+    padding: $input-padding-y $input-padding-x;
+    line-height: 1.5;
+    transition: color var(--transition-duration) var(--transition-timing-function);
+  }
+  &__extras {
+    display: flex;
+    gap: $space-base;
+    align-items: center;
+    color: var(--q-theme-neutral);
+    margin-top: $space-base;
+    font-size: calc(0.9 * $font-size-base);
+  }
+  &__prepend,
+  &__append {
+    display: flex;
+    align-items: center;
+  }
+  &__prepend {
+    padding-right: 0.25rem;
+    padding-left: 0.05rem;
+  }
+  &__append {
+    margin-left: auto;
+    padding-left: 0.25rem;
+    padding-right: 0.05rem;
+  }
+  
+  &--required {
+    > #{$this}__label label::after {
+      content: ' *';
+      font-weight: 700;
+      color: var(--q-theme-danger);
+    }
+  }
+  &--readonly {
+    > #{$this}__control {
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+    }
+  }
+  &--disabled {
+    > #{$this}__control {
+      opacity: 0.5;
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+  &:not(#{$this}--disabled) {
+    #{$this}__control {
+      &:focus-within {
+        outline: $outline;
+      }
+    }
+  }
+  
+  @mixin field-size($size, $multiplier: 1) {
+    &--#{$size} {
+      > #{$this}__control {
+        width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * $space-base);
+      }
+    }
+  }
+  @include field-size(mini, 1);
+  @include field-size(small, 2);
+  @include field-size(medium, 3);
+  @include field-size(large, 4);
+  @include field-size(xlarge, 6);
+  @include field-size(xxlarge, 8);
+  &--block {
+    width: 100%;
+  }
 }
 .q-icon {
-	display: inline-block;
-	&__svg {
-		fill: currentColor;
-	}
-	&__svg,
-	&__img {
-		width: 1em;
-		height: 1em;
-	}
+  display: inline-block;
+  &__svg {
+    fill: currentColor;
+  }
+  &__svg,
+  &__img {
+    width: 1em;
+    height: 1em;
+  }
 }
 $input-group-addon-color: var(--q-theme-primary);
 $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 .q-input-group {
-	&__prepend > :first-child {
-		border-top-left-radius: $border-radius;
-		border-bottom-left-radius: $border-radius;
-	}
-	&__append > :last-child {
-		border-top-right-radius: $border-radius;
-		border-bottom-right-radius: $border-radius;
-	}
-	&__prepend,
-	&__append {
-		display: flex;
-		align-items: stretch;
-		height: inherit;
-		> * {
-			border-radius: 0;
-			min-width: 40px;
-			height: 100%;
-			justify-content: center;
-		}
-		> span {
-			display: flex;
-			align-items: center;
-			text-align: center;
-			line-height: 1.5;
-			font-size: $font-size-base;
-			border-width: 1px;
-			background-color: $input-group-addon-background;
-			color: $input-group-addon-color;
-			white-space: nowrap;
-			padding: 0 0.4rem;
-		}
-		> * + * {
-			margin-left: -1px;
-		}
-	}
-	> .q-field__control {
-		display: flex;
-		align-items: stretch;
-		height: auto;
-		border-width: 0;
-		padding: 0;
-		outline: none !important;
-		> * {
-			border-radius: 0;
-			&:focus-within {
-				z-index: 2;
-			}
-		}
-		> :first-child {
-			border-top-left-radius: $border-radius;
-			border-bottom-left-radius: $border-radius;
-		}
-		> :last-child {
-			border-top-right-radius: $border-radius;
-			border-bottom-right-radius: $border-radius;
-		}
-		> * + * {
-			margin-left: -1px;
-		}
-	}
+  &__prepend > :first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+  &__append > :last-child {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+  &__prepend,
+  &__append {
+    display: flex;
+    align-items: stretch;
+    height: inherit;
+    > * {
+      border-radius: 0;
+      min-width: 40px;
+      height: 100%;
+      justify-content: center;
+    }
+    > span {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      line-height: 1.5;
+      font-size: $font-size-base;
+      border-width: 1px;
+      background-color: $input-group-addon-background;
+      color: $input-group-addon-color;
+      white-space: nowrap;
+      padding: 0 0.4rem;
+    }
+    > * + * {
+      margin-left: -1px;
+    }
+  }
+  > .q-field__control {
+    display: flex;
+    align-items: stretch;
+    height: auto;
+    border-width: 0;
+    padding: 0;
+    outline: none !important;
+    > * {
+      border-radius: 0;
+      &:focus-within {
+        z-index: 2;
+      }
+    }
+    > :first-child {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+    > :last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+    > * + * {
+      margin-left: -1px;
+    }
+  }
 }
 $line-color: var(--q-theme-primary);
 .q-line-loader {
-	width: 100%;
-	height: 2px;
-	display: inline-block;
-	position: relative;
-	background: transparent;
-	overflow: hidden;
-	&::after {
-		content: '';
-		min-width: 33%;
-		height: 2px;
-		background: linear-gradient(
-			to right,
-			rgb(237, 235, 233) 0%,
-			$line-color 50%,
-			rgb(237, 235, 233) 100%
-		);
-		position: absolute;
-		top: 0;
-		left: 0;
-		box-sizing: border-box;
-		animation: q-move 2s linear infinite;
-	}
+  width: 100%;
+  height: 2px;
+  display: inline-block;
+  position: relative;
+  background: transparent;
+  overflow: hidden;
+  &::after {
+    content: '';
+    min-width: 33%;
+    height: 2px;
+    
+    background: linear-gradient(
+      to right,
+      rgb(237, 235, 233) 0%,
+      $line-color 50%,
+      rgb(237, 235, 233) 100%
+    );
+    
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    animation: q-move 2s linear infinite;
+  }
 }
 @keyframes q-move {
-	0% {
-		left: 0;
-		transform: translateX(-100%);
-	}
-	100% {
-		left: 100%;
-		transform: translateX(0%);
-	}
+  0% {
+    left: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
 }
 .q-list {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
-	overflow-x: hidden;
-	overflow-y: auto;
-	margin: 0;
-	padding: 0;
-	-webkit-overflow-scrolling: touch;
-	width: 100%;
-	border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  border-radius: $border-radius;
 }
 .q-list-item-group {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1px;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	width: inherit;
-	&__title {
-		color: var(--q-theme-neutral);
-		padding: 5px 6px;
-		line-height: 15px;
-		width: inherit;
-	}
-	& + & {
-		padding-top: $space-base;
-		margin-top: $space-base;
-		border-top-width: 1px;
-	}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: inherit;
+  &__title {
+    color: var(--q-theme-neutral);
+    padding: 5px 6px;
+    line-height: 15px;
+    width: inherit;
+  }
+  & + & {
+    padding-top: $space-base;
+    margin-top: $space-base;
+    border-top-width: 1px;
+  }
 }
 .q-list-item {
-	$this: &;
-	display: flex;
-	gap: 0.25rem;
-	align-items: center;
-	padding: 5px 6px;
-	list-style: none;
-	line-height: 15px;
-	word-wrap: break-word;
-	-webkit-touch-callout: none;
-	width: inherit;
-	border-radius: $border-radius;
-	outline: none;
-	&:hover {
-		cursor: pointer;
-	}
-	&:hover,
-	&:focus-visible,
-	&--highlighted {
-		background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
-	}
-	&--disabled {
-		pointer-events: none;
-		opacity: 0.5;
-		&:hover {
-			cursor: not-allowed;
-		}
-	}
-	&--selected {
-		background-color: var(--q-theme-primary-light) !important;
-	}
-	em {
-		font-style: normal;
-		text-decoration: underline;
-	}
-	&__container {
-		display: flex;
-		flex-direction: column;
-		flex-wrap: wrap;
-		gap: $space-base;
-	}
-	&__content {
-		display: flex;
-		gap: $space-base;
-	}
-	&__check-container {
-		display: flex;
-		margin-left: auto;
-		min-width: 1em;
-		align-self: flex-start;
-	}
-	&__description {
-		display: flex;
-		gap: $space-base;
-		align-items: flex-start;
-		color: var(--q-theme-neutral);
-		font-size: 0.75em;
-		.q-icon {
-			font-size: inherit;
-			flex-shrink: 0;
-			height: 1lh;
-		}
-	}
-	& + & {
-		margin-top: 1px;
-	}
+  $this: &;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 5px 6px;
+  list-style: none;
+  line-height: 15px;
+  word-wrap: break-word;
+  -webkit-touch-callout: none;
+  width: inherit;
+  border-radius: $border-radius;
+  outline: none;
+  &:hover {
+    cursor: pointer;
+  }
+  &:hover,
+  &:focus-visible,
+  &--highlighted {
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+  }
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+  &--selected {
+    background-color: var(--q-theme-primary-light) !important;
+  }
+  em {
+    font-style: normal;
+    text-decoration: underline;
+  }
+  &__container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: $space-base;
+  }
+  &__content {
+    display: flex;
+    gap: $space-base;
+  }
+  &__check-container {
+    display: flex;
+    margin-left: auto;
+    min-width: 1em;
+    align-self: flex-start;
+  }
+  &__description {
+    display: flex;
+    gap: $space-base;
+    align-items: flex-start;
+    color: var(--q-theme-neutral);
+    font-size: 0.75em;
+    .q-icon {
+      font-size: inherit;
+      flex-shrink: 0;
+      height: 1lh;
+    }
+  }
+  & + & {
+    margin-top: 1px;
+  }
 }
 $overlay-border-width: 1px;
 $overlay-arrow-width: 11.31px;
@@ -882,398 +884,400 @@ $overlay-arrow-height: 11.31px;
 $overlay-z-index: 1070;
 $arrow-tip-radius: 0.1rem;
 .q-overlay {
-	$this: &;
-	--q-overlay-bg: var(--q-theme-background);
-	--q-overlay-color: var(--q-theme-on-background);
-	--q-overlay-border-color: var(--q-theme-neutral-light);
-	position: fixed;
-	z-index: $overlay-z-index;
-	&__underlay {
-		position: fixed;
-		inset: 0;
-		z-index: $overlay-z-index - 1;
-		&--blur {
-			backdrop-filter: blur(2px);
-		}
-	}
-	&__content {
-		display: block;
-		position: relative;
-		min-width: fit-content;
-		width: 100%;
-		background-color: var(--q-overlay-bg);
-		color: var(--q-overlay-color);
-		border: $overlay-border-width solid var(--q-overlay-border-color);
-		border-radius: $border-radius;
-		outline: none;
-		box-shadow:
-			0 0 #0000,
-			0 0 #0000,
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-	&__arrow {
-		position: absolute;
-		display: block;
-		width: $overlay-arrow-width;
-		height: $overlay-arrow-height;
-		transition: opacity 0.2s ease 0s;
-		transform: rotate(45deg);
-		background-color: inherit;
-		border: 0 solid var(--q-overlay-border-color);
-	}
-	&--top {
-		#{$this}__arrow {
-			bottom: - calc($overlay-arrow-height / 2) - $overlay-border-width;
-			border-bottom-right-radius: $arrow-tip-radius;
-			border-right-width: $overlay-border-width;
-			border-bottom-width: $overlay-border-width;
-		}
-	}
-	&--bottom {
-		#{$this}__arrow {
-			top: - calc($overlay-arrow-height / 2) - $overlay-border-width;
-			border-top-left-radius: $arrow-tip-radius;
-			border-left-width: $overlay-border-width;
-			border-top-width: $overlay-border-width;
-		}
-	}
-	&--left {
-		#{$this}__arrow {
-			right: - calc($overlay-arrow-width / 2) - $overlay-border-width;
-			border-top-right-radius: $arrow-tip-radius;
-			border-right-width: $overlay-border-width;
-			border-top-width: $overlay-border-width;
-		}
-	}
-	&--right {
-		#{$this}__arrow {
-			left: - calc($overlay-arrow-width / 2) - $overlay-border-width;
-			border-bottom-left-radius: $arrow-tip-radius;
-			border-left-width: $overlay-border-width;
-			border-bottom-width: $overlay-border-width;
-		}
-	}
-	
-	&--independent {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-	&--inverted {
-		
-		--q-overlay-bg: var(--q-theme-on-background);
-		--q-overlay-color: var(--q-theme-background);
-		--q-overlay-border-color: var(--q-theme-neutral-dark);
-	}
+  $this: &;
+  --q-overlay-bg: var(--q-theme-background);
+  --q-overlay-color: var(--q-theme-on-background);
+  --q-overlay-border-color: var(--q-theme-neutral-light);
+  position: fixed;
+  z-index: $overlay-z-index;
+  &__underlay {
+    position: fixed;
+    inset: 0;
+    z-index: $overlay-z-index - 1;
+    &--blur {
+      backdrop-filter: blur(2px);
+    }
+  }
+  &__content {
+    display: block;
+    position: relative;
+    min-width: fit-content;
+    width: 100%;
+    background-color: var(--q-overlay-bg);
+    color: var(--q-overlay-color);
+    border: $overlay-border-width solid var(--q-overlay-border-color);
+    border-radius: $border-radius;
+    outline: none;
+    box-shadow:
+      0 0 #0000,
+      0 0 #0000,
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+  &__arrow {
+    position: absolute;
+    display: block;
+    width: $overlay-arrow-width;
+    height: $overlay-arrow-height;
+    transition: opacity 0.2s ease 0s;
+    transform: rotate(45deg);
+    background-color: inherit;
+    border: 0 solid var(--q-overlay-border-color);
+  }
+  &--top {
+    #{$this}__arrow {
+      bottom: - calc($overlay-arrow-height / 2) - $overlay-border-width;
+      border-bottom-right-radius: $arrow-tip-radius;
+      border-right-width: $overlay-border-width;
+      border-bottom-width: $overlay-border-width;
+    }
+  }
+  &--bottom {
+    #{$this}__arrow {
+      top: - calc($overlay-arrow-height / 2) - $overlay-border-width;
+      border-top-left-radius: $arrow-tip-radius;
+      border-left-width: $overlay-border-width;
+      border-top-width: $overlay-border-width;
+    }
+  }
+  &--left {
+    #{$this}__arrow {
+      right: - calc($overlay-arrow-width / 2) - $overlay-border-width;
+      border-top-right-radius: $arrow-tip-radius;
+      border-right-width: $overlay-border-width;
+      border-top-width: $overlay-border-width;
+    }
+  }
+  &--right {
+    #{$this}__arrow {
+      left: - calc($overlay-arrow-width / 2) - $overlay-border-width;
+      border-bottom-left-radius: $arrow-tip-radius;
+      border-left-width: $overlay-border-width;
+      border-bottom-width: $overlay-border-width;
+    }
+  }
+  
+  &--independent {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  &--inverted {
+    
+    --q-overlay-bg: var(--q-theme-on-background);
+    --q-overlay-color: var(--q-theme-background);
+    --q-overlay-border-color: var(--q-theme-neutral-dark);
+  }
 }
 $popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 .q-popover {
-	.q-overlay__content {
-		z-index: 1070;
-		position: relative;
-		max-width: 276px;
-		line-height: 1.5;
-		word-break: normal;
-		word-spacing: normal;
-		word-wrap: break-word;
-		white-space: normal;
-		line-break: auto;
-		font-size: calc($font-size-base * 0.9);
-	}
-	&__header {
-		padding: 0.5rem 1rem;
-		margin: 0;
-		font-size: $font-size-base;
-		background-color: $popover-header-bg;
-		border-bottom: 1px solid var(--q-overlay-border-color);
-		border-top-left-radius: inherit;
-		border-top-right-radius: inherit;
-	}
-	&__body {
-		padding: 1rem;
-	}
+  .q-overlay__content {
+    z-index: 1070;
+    position: relative;
+    max-width: 276px;
+    line-height: 1.5;
+    word-break: normal;
+    word-spacing: normal;
+    word-wrap: break-word;
+    white-space: normal;
+    line-break: auto;
+    font-size: calc($font-size-base * 0.9);
+  }
+  &__header {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    font-size: $font-size-base;
+    background-color: $popover-header-bg;
+    border-bottom: 1px solid var(--q-overlay-border-color);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  &__body {
+    padding: 1rem;
+  }
 }
 .q-popover.q-overlay--bottom .q-overlay__arrow::after {
-	border-bottom-color: $popover-header-bg;
+  border-bottom-color: $popover-header-bg;
 }
 $table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 $row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 0.5);
 $row-selected-bg: rgb(var(--q-theme-primary-rgb) / 0.15);
 $base-border: 1px solid rgba(0, 0, 0, 0.1);
 .q-property-list {
-	margin: 0;
-	font-size: 0.9rem;
-	display: flex;
-	flex-direction: column;
-	border: $base-border;
-	&--side-panel {
-		flex-direction: row;
-		.q-property-list-panel__container {
-			border-left: $base-border;
-			width: 20%;
-		}
-	}
-	&-panel__container {
-		padding: 0.4rem;
-		display: flex;
-		flex-direction: column;
-		min-height: 50px;
-		gap: 1rem;
-	}
-	&-panel__label {
-		font-weight: bold;
-	}
-	&__table {
-		width: 100%;
-		border-spacing: 0;
-		margin: 0;
-	}
-	&__header {
-		background: $table-header-bg;
-		height: 25px; 
-	}
-	&__row {
-		&:hover {
-			background-color: $row-hover-bg;
-		}
-		.q-field:not(.q-field--readonly) .q-field__control {
-			background-color: var(--q-theme-background);
-		}
-		&--closed {
-			display: none;
-		}
-		&--selected {
-			background-color: $row-selected-bg;
-		}
-	}
-	&__cell {
-		padding: 0.1rem 0.5rem;
-		&--label {
-			width: 20%;
-			font-size: 0.85rem;
-			text-wrap: nowrap;
-			opacity: 0.8;
-		}
-	}
-	tbody td {
-		border-bottom: $base-border;
-	}
-	&-group {
-		cursor: pointer;
-		td {
-			padding: 0.2rem 0.25rem;
-		}
-		&__content {
-			display: flex;
-			align-items: center;
-		}
-		~ .q-property-list__row .q-property-list__cell--label {
-			padding: 0 2rem;
-		}
-		&--no-toggle {
-			cursor: default;
-			td {
-				padding: 0.5rem 1rem;
-			}
-		}
-	}
+  margin: 0;
+  font-size: 0.9rem;
+  display: flex;
+  flex-direction: column;
+  border: $base-border;
+  &--side-panel {
+    flex-direction: row;
+    .q-property-list-panel__container {
+      border-left: $base-border;
+      width: 20%;
+    }
+  }
+  &-panel__container {
+    padding: 0.4rem;
+    display: flex;
+    flex-direction: column;
+    min-height: 50px;
+    gap: 1rem;
+  }
+  &-panel__label {
+    font-weight: bold;
+  }
+  &__table {
+    width: 100%;
+    border-spacing: 0;
+    margin: 0;
+  }
+  &__header {
+    background: $table-header-bg;
+    height: 25px; 
+  }
+  &__row {
+    &:hover {
+      background-color: $row-hover-bg;
+    }
+    .q-field:not(.q-field--readonly) .q-field__control {
+      background-color: var(--q-theme-background);
+    }
+    &--closed {
+      display: none;
+    }
+    &--selected {
+      background-color: $row-selected-bg;
+    }
+  }
+  &__cell {
+    padding: 0.1rem 0.5rem;
+    &--label {
+      width: 20%;
+      font-size: 0.85rem;
+      text-wrap: nowrap;
+      opacity: 0.8;
+    }
+  }
+  tbody td {
+    border-bottom: $base-border;
+  }
+  &-group {
+    cursor: pointer;
+    td {
+      padding: 0.2rem 0.25rem;
+    }
+    &__content {
+      display: flex;
+      align-items: center;
+    }
+    ~ .q-property-list__row .q-property-list__cell--label {
+      padding: 0 2rem;
+    }
+    &--no-toggle {
+      cursor: default;
+      td {
+        padding: 0.5rem 1rem;
+      }
+    }
+  }
 }
 .q-select {
-	$this: &;
-	&:not(#{$this}--readonly):not(#{$this}--disabled) {
-		cursor: pointer;
-	}
-	&:not(#{$this}--disabled) {
-		#{$this}__clear,
-		#{$this}__chevron {
-			&:hover,
-			&:focus {
-				opacity: 1;
-			}
-		}
-	}
-	&__value,
-	&__placeholder {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		pointer-events: none;
-		min-height: 1lh;
-	}
-	&__placeholder {
-		font-style: italic;
-		color: var(--q-theme-neutral);
-	}
-	&--expanded {
-		#{$this}__chevron svg {
-			transform: rotate(-180deg);
-		}
-	}
-	
-	.q-field__prepend {
-		padding-left: 6px;
-		padding-right: $space-base;
-	}
+  $this: &;
+  &:not(#{$this}--readonly):not(#{$this}--disabled) {
+    cursor: pointer;
+  }
+  &:not(#{$this}--disabled) {
+    #{$this}__clear,
+    #{$this}__chevron {
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+  }
+  &__value,
+  &__placeholder {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    min-height: 1lh;
+  }
+  &__placeholder {
+    font-style: italic;
+    color: var(--q-theme-neutral);
+  }
+  &--expanded {
+    #{$this}__chevron svg {
+      transform: rotate(-180deg);
+    }
+  }
+  
+  .q-field__prepend {
+    padding-left: 6px;
+    padding-right: $space-base;
+  }
 }
 .q-select__clear,
 .q-select__chevron {
-	padding: 0.1rem;
-	opacity: 0.5;
-	&:hover {
-		cursor: inherit;
-	}
+  padding: 0.1rem;
+  opacity: 0.5;
+  &:hover {
+    cursor: inherit;
+  }
 }
 .q-select__chevron svg {
-	transition: all 0.2s;
+  transition: all 0.2s;
 }
 .q-select__body {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: $space-base;
-	width: 100%;
-	padding: $space-base 0;
-	outline: none;
-	.q-list-item {
-		width: calc(100% - 2 * $space-base);
-		margin-left: $space-base;
-		margin-right: $space-base;
-	}
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: $space-base;
+  width: 100%;
+  padding: $space-base 0;
+  outline: none;
+  .q-list-item {
+    width: calc(100% - 2 * $space-base);
+    margin-left: $space-base;
+    margin-right: $space-base;
+  }
 }
 .q-select__items {
-	min-width: fit-content;
-	width: 100%;
-	max-height: 240px;
-	align-items: start;
+  min-width: fit-content;
+  width: 100%;
+  max-height: 240px;
+  align-items: start;
 }
 .q-select__loader {
-	display: flex;
-	justify-content: center;
-	width: 100%;
+  display: flex;
+  justify-content: center;
+  width: 100%;
 }
 .q-select__loader,
 .q-select__empty {
-	margin: calc(4 * $space-base) 0;
+  margin: calc(4 * $space-base) 0;
 }
 .q-skeleton-loader {
-	$this: &;
-	&__bone {
-		display: inline-flex;
-		width: 100%;
-		height: 100%;
-		position: relative;
-		overflow: hidden;
-		background-color: var(--q-theme-neutral-light);
-		animation: fadeIn 1s;
-		border-radius: $border-radius;
-		&::after {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			transform: translateX(-100%);
-			background-image: linear-gradient(
-				90deg,
-				rgb(var(--q-theme-background-rgb) / 0) 0,
-				rgb(var(--q-theme-background-rgb) / 0.2) 20%,
-				rgb(var(--q-theme-background-rgb) / 0.5) 60%,
-				rgb(var(--q-theme-background-rgb) / 0)
-			);
-			animation: shimmer 2s infinite;
-			content: '';
-		}
-	}
-	&--text {
-		height: 1em;
-	}
-	&--icon {
-		width: 20px;
-		height: 20px;
-		#{$this}__bone {
-			border-radius: 50%;
-		}
-	}
-	@keyframes shimmer {
-		100% {
-			transform: translateX(100%);
-		}
-	}
-	@keyframes fadeIn {
-		0% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
+  $this: &;
+  &__bone {
+    display: inline-flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--q-theme-neutral-light);
+    animation: fadeIn 1s;
+    border-radius: $border-radius;
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      
+      background-image: linear-gradient(
+        90deg,
+        rgb(var(--q-theme-background-rgb) / 0) 0,
+        rgb(var(--q-theme-background-rgb) / 0.2) 20%,
+        rgb(var(--q-theme-background-rgb) / 0.5) 60%,
+        rgb(var(--q-theme-background-rgb) / 0)
+      );
+      
+      animation: shimmer 2s infinite;
+      content: '';
+    }
+  }
+  &--text {
+    height: 1em;
+  }
+  &--icon {
+    width: 20px;
+    height: 20px;
+    #{$this}__bone {
+      border-radius: 50%;
+    }
+  }
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 $spinner-color: var(--q-theme-primary);
 .q-spinner-loader {
-	font-size: 48px;
-	width: 1em;
-	padding: 0.15em;
-	aspect-ratio: 1;
-	border-radius: 50%;
-	color: $spinner-color;
-	background: currentColor;
-	--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-	-webkit-mask: var(--_m);
-	mask: var(--_m);
-	-webkit-mask-composite: source-out;
-	mask-composite: subtract;
-	animation: q-rotate 1s infinite linear;
+  font-size: 48px;
+  width: 1em;
+  padding: 0.15em;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  color: $spinner-color;
+  background: currentColor;
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: q-rotate 1s infinite linear;
 }
 @keyframes q-rotate {
-	to {
-		transform: rotate(1turn);
-	}
+  to {
+    transform: rotate(1turn);
+  }
 }
 .q-text-field__input {
-	width: 100%;
-	line-height: inherit;
-	outline: none;
-	color: inherit;
-	background-color: transparent;
-	padding: 0;
-	&::placeholder {
-		font-style: italic;
-		color: var(--q-theme-neutral);
-	}
-	&:disabled {
-		user-select: none;
-	}
-	&:hover {
-		cursor: inherit;
-	}
+  width: 100%;
+  line-height: inherit;
+  outline: none;
+  color: inherit;
+  background-color: transparent;
+  padding: 0;
+  &::placeholder {
+    font-style: italic;
+    color: var(--q-theme-neutral);
+  }
+  &:disabled {
+    user-select: none;
+  }
+  &:hover {
+    cursor: inherit;
+  }
 }
 .q-theme-provider {
-	color: var(--q-theme-on-background);
-	caret-color: var(--q-theme-on-background);
+  color: var(--q-theme-on-background);
+  caret-color: var(--q-theme-on-background);
 }
 .q-tooltip .q-overlay__content {
-	display: flex;
-	flex-direction: column;
-	gap: $space-base;
-	align-items: center;
-	padding: 0.5rem;
-	font-style: normal;
-	font-size: calc($font-size-base * 0.9);
-	font-weight: $font-weight-regular;
-	text-decoration: none;
-	text-shadow: none;
-	text-transform: none;
-	line-height: 1.5;
-	line-break: auto;
-	word-wrap: break-word;
-	word-break: normal;
-	word-spacing: normal;
-	white-space: normal;
-	letter-spacing: normal;
-	max-width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: $space-base;
+  align-items: center;
+  padding: 0.5rem;
+  font-style: normal;
+  font-size: calc($font-size-base * 0.9);
+  font-weight: $font-weight-regular;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  line-height: 1.5;
+  line-break: auto;
+  word-wrap: break-word;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  letter-spacing: normal;
+  max-width: 200px;
 }
 .q-tooltip.q-overlay--inverted .q-overlay__content {
-	--q-overlay-border-color: var(--q-theme-on-background);
+  --q-overlay-border-color: var(--q-theme-on-background);
 }