@quidgest/ui 0.14.12 → 0.14.14

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.14.12
+ * Quidgest UI v0.14.14
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -178,12 +178,12 @@ $spaces: (
   '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-sm: (0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 5%));
 $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 4px 6px -1px rgb(0 0 0 / 10%),
+  0 2px 4px -2px rgb(0 0 0 / 10%)
 );
 $breakpoint-xs: 599px !default;
 $breakpoint-sm: 1023px !default;
@@ -200,10 +200,10 @@ $font-weight-black: 900;
 $border: var(--q-theme-neutral-light) !default;
 $outline-width: 2px !default;
 $outline-style: solid !default;
-$outline-color: rgb(var(--q-theme-info-rgb) / 0.5) !default;
+$outline-color: rgb(var(--q-theme-info-rgb) / 50%) !default;
 $outline: $outline-width $outline-style $outline-color;
 $scrollbar-thumb: var(--q-theme-neutral-light);
-$scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+$scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 $input-padding-y: 0.26rem !default;
 $input-padding-x: 0.25rem !default;
 :root {
@@ -312,30 +312,62 @@ body {
       background-color: var(--q-badge-color);
     }
   }
+  &--clickable {
+    cursor: pointer;
+    &:hover {
+      color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
+      #{$this}__underlay {
+        background-color: var(--q-badge-hover-color, var(--q-badge-color));
+      }
+    }
+    &:focus {
+      outline: $outline;
+      &:not(:focus-visible) {
+        outline: 0;
+      }
+    }
+  }
   
   &--pill {
     border-radius: 9999px;
   }
+  &--tonal {
+    &#{$this}--clickable:hover {
+      #{$this}__underlay {
+        opacity: 1;
+      }
+    }
+  }
   &--bold {
     #{$this}__underlay {
       opacity: 1;
     }
   }
   &--outlined {
-    border-color: currentColor;
+    border-color: currentcolor;
     #{$this}__underlay {
       opacity: 0;
     }
+    &#{$this}--clickable:hover {
+      #{$this}__underlay {
+        background-color: var(--q-badge-color);
+        opacity: 1;
+      }
+    }
   }
   @mixin color-variant($color) {
     &--#{$color} {
       --q-badge-color: var(--q-theme-#{$color});
+      &.q-badge--bold.q-badge--clickable:hover {
+        --q-badge-color: var(--q-theme-#{$color}-dark);
+      }
     }
     &--#{$color}.q-badge--tonal,
     &--#{$color}.q-badge--outlined {
       --q-badge-text-color: var(--q-theme-#{$color});
     }
-    &--#{$color}.q-badge--bold {
+    &--#{$color}.q-badge--bold,
+    &.q-badge--clickable:hover {
       --q-badge-text-color: var(--q-theme-on-#{$color});
       .q-badge__remove.q-btn:not(:disabled):hover {
         background-color: var(--q-badge-text-color);
@@ -343,11 +375,44 @@ body {
       }
     }
   }
-  @include color-variant(primary);
-  @include color-variant(info);
-  @include color-variant(success);
-  @include color-variant(warning);
-  @include color-variant(danger);
+  @include color-variant('primary');
+  @include color-variant('info');
+  @include color-variant('success');
+  @include color-variant('warning');
+  @include color-variant('danger');
+  @include color-variant('highlight');
+}
+.q-badge-indicator {
+  $this: &;
+  position: absolute;
+  padding: 0.1rem 0.5em;
+  border: 0;
+  &__wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+  
+  &--dot {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+  }
+  &--top-right {
+    bottom: calc(100% - 0.5rem);
+    left: calc(100% - 0.5rem);
+  }
+  &--top-left {
+    bottom: calc(100% - 0.5rem);
+    right: calc(100% - 0.5rem);
+  }
+  &--bottom-right {
+    top: calc(100% - 0.5rem);
+    left: calc(100% - 0.5rem);
+  }
+  &--bottom-left {
+    top: calc(100% - 0.5rem);
+    right: calc(100% - 0.5rem);
+  }
 }
 $button-primary: var(--q-theme-primary);
 $button-primary-hover: var(--q-theme-primary-dark);
@@ -359,7 +424,7 @@ $button-danger-hover: var(--q-theme-danger-dark);
 $button-danger-shadow: var(--q-theme-danger-dark-rgb);
 $button-text-on-danger: var(--q-theme-on-danger);
 $button-text-on-danger-hover: var(--q-theme-background);
-$button-plain-hover: rgb(var(--q-theme-neutral-rgb) / 0.1);
+$button-plain-hover: rgb(var(--q-theme-neutral-rgb) / 10%);
 $button-text-on-plain: var(--q-theme-on-background);
 .q-btn {
   $this: &;
@@ -379,8 +444,8 @@ $button-text-on-plain: var(--q-theme-on-background);
     fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
-  &:hover:not(:disabled) {
-    cursor: pointer;
+  &:disabled {
+    opacity: 0.6;
   }
   &:focus {
     outline: $outline;
@@ -389,6 +454,9 @@ $button-text-on-plain: var(--q-theme-on-background);
       outline: 0;
     }
   }
+  &:hover:not(:disabled) {
+    cursor: pointer;
+  }
   &__content {
     position: relative;
     display: flex;
@@ -408,7 +476,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     }
   }
   .q-spinner-loader {
-    color: currentColor;
+    color: currentcolor;
   }
   
   &--primary {
@@ -424,7 +492,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   &--secondary {
     --box-shadow-tint: #{$button-primary-shadow};
-    border-color: currentColor;
+    border-color: currentcolor;
     color: $button-primary;
     &:hover:not(:disabled) {
       background-color: $button-primary-hover;
@@ -464,10 +532,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     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;
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
   }
   &--loading {
     &:hover {
@@ -492,9 +557,9 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   &--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);
+      0 2px 4px -1px rgb(var(--box-shadow-tint) / 20%),
+      0 4px 5px 0 rgb(var(--box-shadow-tint) / 14%),
+      0 1px 10px 0 rgb(var(--box-shadow-tint) / 12%);
   }
   
   &--block {
@@ -518,9 +583,9 @@ $button-text-on-plain: var(--q-theme-on-background);
   &--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);
+      0 2px 4px -1px rgb(var(--box-shadow-tint) / 20%),
+      0 4px 5px 0 rgb(var(--box-shadow-tint) / 14%),
+      0 1px 10px 0 rgb(var(--box-shadow-tint) / 12%);
   }
   > .q-btn {
     position: relative;
@@ -544,7 +609,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   --card-padding: 1rem;
   --card-border: 1px solid #{$border};
   --card-width: fit-content;
-  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 0.25);
+  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 25%);
   --card-scale: 1;
   --card-shadow: none;
   --card-background: var(--q-theme-container);
@@ -603,23 +668,23 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   
   &--elevation-low {
-    --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 0.15);
+    --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 15%);
   }
   &--elevation-medium {
-    --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 0.2);
+    --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 20%);
   }
   &--elevation-high {
-    --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 0.25);
+    --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 25%);
   }
   &--background {
-    --card-background: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+    --card-background: rgb(var(--q-theme-primary-light-rgb) / 50%);
     .q-field__control {
       background-color: var(--q-theme-container);
     }
   }
   &--title-background {
     .q-card__header-content {
-      background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       padding-bottom: 0.75rem;
     }
     .q-card__title {
@@ -639,7 +704,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     }
     .q-card__subtitle {
       font-size: 0.75rem;
-      color: rgb(var(--q-theme-neutral-rgb) / 0.8);
+      color: rgb(var(--q-theme-neutral-rgb) / 80%);
     }
   }
   
@@ -765,7 +830,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     cursor: default;
     &:not(#{$this}--checked):not(#{$this}--indeterminate) {
       #{$this}__input {
-        background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+        background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       }
     }
   }
@@ -942,6 +1007,48 @@ $button-text-on-plain: var(--q-theme-on-background);
     cursor: inherit;
   }
 }
+.q-date-time-picker {
+  &__input-icon {
+    opacity: 0.5;
+  }
+}
+.dp__main {
+  font-family: inherit;
+  width: 100%;
+}
+.dp__input_wrap {
+  display: flex;
+}
+.dp__input {
+  background-color: inherit;
+  border-radius: inherit;
+  font-family: inherit;
+  border: 0;
+  outline: none;
+  width: 100%;
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  color: inherit;
+  &::placeholder {
+    font-style: italic;
+  }
+}
+.dp__active_date {
+  background-color: var(--q-theme-primary);
+  border-color: var(--q-theme-primary);
+}
+.dp__today {
+  border-color: var(--q-theme-primary);
+}
+.dp__menu {
+  font-size: $font-size-base;
+  border-radius: $border-radius;
+  .dp__cell_inner {
+    font-family: sans-serif;
+  }
+}
+.dp__input_wrap{position:relative;width:100%;box-sizing:unset}.dp__input_wrap:focus{border-color:var(--dp-border-color-hover);outline:none}.dp__input_valid{box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);border-color:var(--dp-success-color)}.dp__input_valid:hover{border-color:var(--dp-success-color)}.dp__input_invalid{box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);border-color:var(--dp-danger-color)}.dp__input_invalid:hover{border-color:var(--dp-danger-color)}.dp__input{background-color:var(--dp-background-color);border-radius:var(--dp-border-radius);font-family:var(--dp-font-family);border:1px solid var(--dp-border-color);outline:none;transition:border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);width:100%;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:var(--dp-input-padding);color:var(--dp-text-color);box-sizing:border-box}.dp__input::placeholder{opacity:.7}.dp__input:hover:not(.dp__input_focus){border-color:var(--dp-border-color-hover)}.dp__input_reg{caret-color:rgba(0,0,0,0)}.dp__input_focus{border-color:var(--dp-border-color-focus)}.dp__disabled{background:var(--dp-disabled-color)}.dp__disabled::placeholder{color:var(--dp-disabled-color-text)}.dp__input_icons{display:inline-block;width:var(--dp-font-size);height:var(--dp-font-size);stroke-width:0;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:6px 12px;color:var(--dp-icon-color);box-sizing:content-box}.dp__input_icon{cursor:pointer;position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);color:var(--dp-icon-color)}.dp--clear-btn{position:absolute;top:50%;inset-inline-end:0;transform:translateY(-50%);cursor:pointer;color:var(--dp-icon-color);background:rgba(0,0,0,0);border:none;display:inline-flex;align-items:center;padding:0;margin:0}.dp__input_icon_pad{padding-inline-start:var(--dp-input-icon-padding)}.dp__menu{background:var(--dp-background-color);border-radius:var(--dp-border-radius);min-width:var(--dp-menu-min-width);font-family:var(--dp-font-family);font-size:var(--dp-font-size);user-select:none;border:1px solid var(--dp-menu-border-color);box-sizing:border-box}.dp__menu::after{box-sizing:border-box}.dp__menu::before{box-sizing:border-box}.dp__menu:focus{border:1px solid var(--dp-menu-border-color);outline:none}.dp--menu-wrapper{position:absolute;z-index:99999}.dp__menu_inner{padding:var(--dp-menu-padding)}.dp--menu--inner-stretched{padding:6px 0}.dp__menu_index{z-index:99999}.dp-menu-loading,.dp__menu_readonly,.dp__menu_disabled{position:absolute;inset:0;z-index:999999}.dp__menu_disabled{background:hsla(0,0%,100%,.5);cursor:not-allowed}.dp__menu_readonly{background:rgba(0,0,0,0);cursor:default}.dp-menu-loading{background:hsla(0,0%,100%,.5);cursor:default}.dp--menu-load-container{display:flex;height:100%;width:100%;justify-content:center;align-items:center}.dp--menu-loader{width:48px;height:48px;border:var(--dp-loader);border-bottom-color:rgba(0,0,0,0);border-radius:50%;display:inline-block;box-sizing:border-box;animation:dp-load-rotation 1s linear infinite;position:absolute}@keyframes dp-load-rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.dp__arrow_top{left:var(--dp-arrow-left);top:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-top:1px solid var(--dp-menu-border-color);transform:translate(-50%, -50%) rotate(-45deg)}.dp__arrow_bottom{left:var(--dp-arrow-left);bottom:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-bottom:1px solid var(--dp-menu-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__action_extra{text-align:center;padding:2px 0}.dp--preset-dates{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp--preset-dates[data-dp-mobile]{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp--preset-dates-collapsed{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp__sidebar_left{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp__sidebar_right{padding:5px;margin-inline-end:1px solid var(--dp-border-color)}.dp--preset-range{display:block;width:100%;padding:5px;text-align:left;white-space:nowrap;color:var(--dp-text-color);border-radius:var(--dp-border-radius);transition:var(--dp-common-transition)}.dp--preset-range:hover{background-color:var(--dp-hover-color);color:var(--dp-hover-text-color);cursor:pointer}.dp--preset-range[data-dp-mobile]{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range[data-dp-mobile]:first-child{margin-left:0}.dp--preset-range[data-dp-mobile]:last-child{margin-right:0}.dp--preset-range-collapsed{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range-collapsed:first-child{margin-left:0}.dp--preset-range-collapsed:last-child{margin-right:0}.dp__menu_content_wrapper{display:flex}.dp__menu_content_wrapper[data-dp-mobile]{flex-direction:column-reverse}.dp--menu-content-wrapper-collapsed{flex-direction:column-reverse}.dp__calendar_header{position:relative;display:flex;justify-content:center;align-items:center;color:var(--dp-text-color);white-space:nowrap;font-weight:bold}.dp__calendar_header_item{text-align:center;flex-grow:1;height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);box-sizing:border-box}.dp__calendar_row{display:flex;justify-content:center;align-items:center;margin:var(--dp-row-margin)}.dp__calendar_item{text-align:center;flex-grow:1;box-sizing:border-box;color:var(--dp-text-color)}.dp__calendar{position:relative}.dp__calendar_header_cell{border-bottom:thin solid var(--dp-border-color);padding:var(--dp-calendar-header-cell-padding)}.dp__cell_inner{display:flex;align-items:center;text-align:center;justify-content:center;border-radius:var(--dp-cell-border-radius);height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);border:1px solid rgba(0,0,0,0);box-sizing:border-box;position:relative}.dp__cell_inner:hover{transition:all .2s}.dp__cell_auto_range_start,.dp__date_hover_start:hover,.dp__range_start{border-end-end-radius:0;border-start-end-radius:0}.dp__cell_auto_range_end,.dp__date_hover_end:hover,.dp__range_end{border-end-start-radius:0;border-start-start-radius:0}.dp__range_end,.dp__range_start,.dp__active_date{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__date_hover_end:hover,.dp__date_hover_start:hover,.dp__date_hover:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__cell_offset{color:var(--dp-secondary-color)}.dp__cell_disabled{color:var(--dp-secondary-color);cursor:not-allowed}.dp__range_between{background:var(--dp-range-between-dates-background-color);color:var(--dp-range-between-dates-text-color);border-radius:0;border:1px solid var(--dp-range-between-border-color)}.dp__range_between_week{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border-radius:0;border-top:1px solid var(--dp-primary-color);border-bottom:1px solid var(--dp-primary-color)}.dp__today{border:1px solid var(--dp-primary-color)}.dp__week_num{color:var(--dp-secondary-color);text-align:center}.dp__cell_auto_range{border-radius:0;border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_start{border-start-start-radius:var(--dp-cell-border-radius);border-end-start-radius:var(--dp-cell-border-radius);border-inline-start:1px dashed var(--dp-primary-color);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_end{border-start-end-radius:var(--dp-cell-border-radius);border-end-end-radius:var(--dp-cell-border-radius);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color);border-inline-end:1px dashed var(--dp-primary-color)}.dp__calendar_header_separator{width:100%;height:1px;background:var(--dp-border-color)}.dp__calendar_next{margin-inline-start:var(--dp-multi-calendars-spacing)}.dp__marker_line,.dp__marker_dot{height:5px;background-color:var(--dp-marker-color);position:absolute;bottom:0}.dp__marker_dot{width:5px;border-radius:50%;left:50%;transform:translateX(-50%)}.dp__marker_line{width:100%;left:0}.dp__marker_tooltip{position:absolute;border-radius:var(--dp-border-radius);background-color:var(--dp-tooltip-color);padding:5px;border:1px solid var(--dp-border-color);z-index:99999;box-sizing:border-box;cursor:default}.dp__tooltip_content{white-space:nowrap}.dp__tooltip_text{display:flex;align-items:center;flex-flow:row nowrap;color:var(--dp-text-color)}.dp__tooltip_mark{height:5px;width:5px;border-radius:50%;background-color:var(--dp-text-color);color:var(--dp-text-color);margin-inline-end:5px}.dp__arrow_bottom_tp{bottom:0;height:8px;width:8px;background-color:var(--dp-tooltip-color);position:absolute;border-inline-end:1px solid var(--dp-border-color);border-bottom:1px solid var(--dp-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__instance_calendar{position:relative;width:100%}.dp__flex_display[data-dp-mobile]{flex-direction:column}.dp--flex-display-collapsed{flex-direction:column}.dp__cell_highlight{background-color:var(--dp-highlight-color)}.dp__month_year_row{display:flex;align-items:center;height:var(--dp-month-year-row-height);color:var(--dp-text-color);box-sizing:border-box}.dp__inner_nav{display:flex;align-items:center;justify-content:center;cursor:pointer;height:var(--dp-month-year-row-button-size);width:var(--dp-month-year-row-button-size);color:var(--dp-icon-color);text-align:center;border-radius:50%}.dp__inner_nav svg{height:var(--dp-button-icon-height);width:var(--dp-button-icon-height)}.dp__inner_nav:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}[dir=rtl] .dp__inner_nav{transform:rotate(180deg)}.dp__inner_nav_disabled:hover,.dp__inner_nav_disabled{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp--year-select,.dp__month_year_select{text-align:center;cursor:pointer;height:var(--dp-month-year-row-height);display:flex;align-items:center;justify-content:center;border-radius:var(--dp-border-radius);box-sizing:border-box;color:var(--dp-text-color)}.dp--year-select:hover,.dp__month_year_select:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__month_year_select{width:50%}.dp--year-select{width:100%}.dp__month_year_wrap{display:flex;flex-direction:row;width:100%}.dp__year_disable_select{justify-content:space-around}.dp--header-wrap{display:flex;width:100%;flex-direction:column}.dp__overlay{width:100%;background:var(--dp-background-color);transition:opacity 1s ease-out;z-index:99999;font-family:var(--dp-font-family);color:var(--dp-text-color);box-sizing:border-box}.dp--overlay-absolute{position:absolute;height:100%;top:0;left:0}.dp--overlay-relative{position:relative}.dp__overlay_container::-webkit-scrollbar-track{box-shadow:var(--dp-scroll-bar-background);background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar{width:5px;background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar-thumb{background-color:var(--dp-scroll-bar-color);border-radius:10px}.dp__overlay:focus{border:none;outline:none}.dp__container_flex{display:flex}.dp__container_block{display:block}.dp__overlay_container{flex-direction:column;overflow-y:auto;height:var(--dp-overlay-height)}.dp__time_picker_overlay_container{height:100%}.dp__overlay_row{padding:0;box-sizing:border-box;display:flex;margin-inline:auto;flex-wrap:wrap;max-width:100%;width:100%;align-items:center}.dp__flex_row{flex:1}.dp__overlay_col{box-sizing:border-box;width:33%;padding:var(--dp-overlay-col-padding);white-space:nowrap}.dp__overlay_cell_pad{padding:var(--dp-common-padding) 0}.dp__overlay_cell_active{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center;background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__overlay_cell{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center}.dp__overlay_cell:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__cell_in_between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__over_action_scroll{right:5px;box-sizing:border-box}.dp__overlay_cell_disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp__overlay_cell_disabled:hover{background:var(--dp-disabled-color)}.dp__overlay_cell_active_disabled{cursor:not-allowed;background:var(--dp-primary-disabled-color)}.dp__overlay_cell_active_disabled:hover{background:var(--dp-primary-disabled-color)}.dp__btn,.dp--qr-btn,.dp--time-overlay-btn,.dp--time-invalid{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}.dp--tp-wrap{max-width:var(--dp-menu-min-width)}.dp--tp-wrap[data-dp-mobile]{max-width:100%}.dp__time_input{width:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-family:var(--dp-font-family);color:var(--dp-text-color)}.dp__time_col_reg_block{padding:0 20px}.dp__time_col_reg_inline{padding:0 10px}.dp__time_col_reg_with_button{padding:0 15px}.dp__time_col_reg_with_button[data-compact~=true]{padding:0 5px}.dp__time_col_sec{padding:0 10px}.dp__time_col_sec_with_button{padding:0 5px}.dp__time_col_sec_with_button[data-collapsed~=true]{padding:0}.dp__time_col{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.dp__time_col_block{font-size:var(--dp-time-font-size)}.dp__time_display_block{padding:0 3px}.dp__time_display_inline{padding:5px}.dp__time_picker_inline_container{display:flex;width:100%;justify-content:center}.dp__inc_dec_button{padding:5px;margin:0;height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--dp-icon-color);box-sizing:border-box}.dp__inc_dec_button svg{height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size)}.dp__inc_dec_button:hover{background:var(--dp-hover-color);color:var(--dp-primary-color)}.dp__time_display{cursor:pointer;color:var(--dp-text-color);border-radius:var(--dp-border-radius);display:flex;align-items:center;justify-content:center}.dp__time_display:hover:enabled{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__inc_dec_button_inline{width:100%;padding:0;height:8px;cursor:pointer;display:flex;align-items:center}.dp__inc_dec_button_disabled,.dp__inc_dec_button_disabled:hover{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp__pm_am_button{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border:none;padding:var(--dp-common-padding);border-radius:var(--dp-border-radius);cursor:pointer}.dp__pm_am_button[data-compact~=true]{padding:7px}.dp__tp_inline_btn_bar{width:100%;height:4px;background-color:var(--dp-secondary-color);transition:var(--dp-common-transition);border-collapse:collapse}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp--time-overlay-btn{background:none}.dp--time-invalid{background-color:var(--dp-disabled-color)}.dp__action_row{display:flex;align-items:center;width:100%;padding:var(--dp-action-row-padding);box-sizing:border-box;color:var(--dp-text-color);flex-flow:row nowrap}.dp__action_row svg{height:var(--dp-button-icon-height);width:auto}.dp__selection_preview{display:block;color:var(--dp-text-color);font-size:var(--dp-preview-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dp__action_buttons{display:flex;flex:0;white-space:nowrap;align-items:center;justify-content:flex-end;margin-inline-start:auto}.dp__action_button{display:inline-flex;align-items:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:var(--dp-action-buttons-padding);line-height:var(--dp-action-button-height);margin-inline-start:3px;height:var(--dp-action-button-height);cursor:pointer;border-radius:var(--dp-border-radius);font-size:var(--dp-preview-font-size);font-family:var(--dp-font-family)}.dp__action_cancel{color:var(--dp-text-color);border:1px solid var(--dp-border-color)}.dp__action_cancel:hover{border-color:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__action_buttons .dp__action_select:hover{background:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select:disabled{background:var(--dp-primary-disabled-color);cursor:not-allowed}.dp-quarter-picker-wrap{display:flex;flex-direction:column;height:100%;min-width:var(--dp-menu-min-width)}.dp--qr-btn-disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp--qr-btn-disabled:hover{background:var(--dp-disabled-color)}.dp--qr-btn{width:100%;padding:var(--dp-common-padding)}.dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between){background:none}.dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled){background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp--quarter-items{display:flex;flex-direction:column;flex:1;width:100%;height:100%;justify-content:space-evenly}.dp--qr-btn-active{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp--qr-btn-between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}:root{--dp-common-transition: all 0.1s ease-in;--dp-menu-padding: 6px 8px;--dp-animation-duration: 0.1s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);--dp-transition-timing: ease-out;--dp-action-row-transtion: all 0.2s ease-in;--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 4px;--dp-cell-border-radius: 4px;--dp-transition-length: 22px;--dp-transition-timing-general: 0.1s;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 25px;--dp-button-icon-height: 20px;--dp-calendar-wrap-padding: 0 5px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 6px 30px 6px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 1px 6px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: 0.5rem;--dp-multi-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-font-size: 1rem;--dp-preview-font-size: 0.8rem;--dp-time-font-size: 2rem;--dp-action-button-height: 22px;--dp-action-row-padding: 8px;--dp-direction: ltr}.dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgb(0 92 178 / 20%);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff);--dp-loader: 5px solid #005cb2}.dp__theme_light{--dp-background-color: #fff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #fff;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgb(25 118 210 / 10%);--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);--dp-loader: 5px solid #1976d2}.dp__flex{display:flex;align-items:center}.dp__btn{background:none}.dp__main{font-family:var(--dp-font-family);user-select:none;box-sizing:border-box;position:relative;width:100%}.dp__main *{direction:var(--dp-direction, ltr)}.dp__pointer{cursor:pointer}.dp__icon{stroke:currentcolor;fill:currentcolor}.dp__button{width:100%;text-align:center;color:var(--dp-icon-color);cursor:pointer;display:flex;align-items:center;place-content:center center;padding:var(--dp-common-padding);box-sizing:border-box;height:var(--dp-button-height)}.dp__button.dp__overlay_action{position:absolute;bottom:0}.dp__button:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}.dp__button svg{height:var(--dp-button-icon-height);width:auto}.dp__button_bottom{border-bottom-left-radius:var(--dp-border-radius);border-bottom-right-radius:var(--dp-border-radius)}.dp__flex_display{display:flex}.dp__flex_display_with_input{flex-direction:column;align-items:flex-start}.dp__relative{position:relative}.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{transition:all var(--dp-transition-timing-general) ease-out}.calendar-next-enter-from{opacity:0;transform:translateX(var(--dp-transition-length))}.calendar-next-leave-to{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-enter-from{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-leave-to{opacity:0;transform:translateX(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{transition:all var(--dp-animation-duration) var(--dp-transition-timing)}.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{opacity:0;transform:translateY(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{opacity:0;transform:translateY(calc(var(--dp-transition-length) * -1))}.dp--arrow-btn-nav{transition:var(--dp-common-transition)}.dp--highlighted{background-color:var(--dp-highlight-color)}.dp--hidden-el{visibility:hidden}
 .q-dialog {
   display: flex;
   flex-direction: column;
@@ -952,7 +1059,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   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) / 30%);
 }
 .q-dialog__header {
   display: flex;
@@ -1065,7 +1172,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   &--readonly {
     > #{$this}__control {
-      background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     }
   }
   &--disabled {
@@ -1101,10 +1208,104 @@ $button-text-on-plain: var(--q-theme-on-background);
     width: 100%;
   }
 }
+.q-file-input {
+  $this: &;
+  --q-file-input-preview-side: 3rem;
+  --q-file-input-preview-padding: 0.75rem;
+  justify-content: center;
+  flex-direction: column;
+  border-width: 2px; 
+  border-style: dashed;
+  padding: var(--q-file-input-preview-padding);
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+  &__drop-area {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    color: var(--q-theme-neutral);
+    min-height: var(--q-file-input-preview-side);
+  }
+  &__file-details {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    width: 100%;
+  }
+  &__attached-file {
+    display: flex;
+    align-items: center;
+    gap: var(--q-file-input-preview-padding);
+    width: 100%;
+  }
+  &__file-input {
+    display: none;
+  }
+  &__preview,
+  &__preview.q-icon {
+    color: var(--q-theme-neutral);
+    width: var(--q-file-input-preview-side);
+    height: var(--q-file-input-preview-side);
+    flex-shrink: 0;
+  }
+  &__image-preview {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  &__file-meta {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1;
+    gap: $space-base;
+  }
+  &__file-name {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    word-break: break-word;
+    white-space: normal;
+    color: var(--q-theme-neutral-dark);
+  }
+  &__file-type {
+    color: var(--q-theme-neutral);
+  }
+  &__action-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+  &__empty-container {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--q-theme-neutral);
+    min-height: var(--q-file-input-preview-side);
+  }
+  
+  &--highlighted {
+    border-color: var(--q-theme-primary);
+    background-color: var(--q-theme-primary-light);
+  }
+  &--readonly,
+  &--disabled {
+    border-style: solid;
+  }
+  &:not(#{$this}--disabled.q-field-control) {
+    &:focus-within {
+      outline: none;
+    }
+  }
+}
 .q-icon {
   display: inline-block;
   &__svg {
-    fill: currentColor;
+    fill: currentcolor;
   }
   &__svg,
   &__img {
@@ -1113,7 +1314,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
 }
 $input-group-addon-color: var(--q-theme-primary);
-$input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+$input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 .q-input-group {
   &__prepend > :first-child {
     border-top-left-radius: var(--border-radius);
@@ -1157,6 +1358,9 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
     border-width: 0;
     padding: 0;
     outline: none !important;
+    > * + * {
+      margin-left: -1px;
+    }
     > * {
       border-radius: 0;
       &:focus-within {
@@ -1171,9 +1375,6 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
       border-top-right-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
     }
-    > * + * {
-      margin-left: -1px;
-    }
   }
 }
 $line-color: var(--q-theme-primary);
@@ -1191,9 +1392,9 @@ $line-color: var(--q-theme-primary);
     
     background: linear-gradient(
       to right,
-      rgb(237, 235, 233) 0%,
+      rgb(237 235 233) 0%,
       $line-color 50%,
-      rgb(237, 235, 233) 100%
+      rgb(237 235 233) 100%
     );
     
     position: absolute;
@@ -1218,8 +1419,7 @@ $line-color: var(--q-theme-primary);
   flex-direction: column;
   align-items: center;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   margin: 0;
   padding: 0;
   -webkit-overflow-scrolling: touch;
@@ -1266,7 +1466,7 @@ $line-color: var(--q-theme-primary);
   &:hover,
   &:focus-visible,
   &--highlighted {
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
   }
   &--disabled {
     pointer-events: none;
@@ -1284,8 +1484,7 @@ $line-color: var(--q-theme-primary);
   }
   &__container {
     display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+    flex-flow: column wrap;
     flex-grow: 1;
     gap: $space-base;
   }
@@ -1349,8 +1548,8 @@ $arrow-tip-radius: 0.1rem;
     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);
+      0 4px 6px -1px rgb(0 0 0 / 10%),
+      0 2px 4px -2px rgb(0 0 0 / 10%);
   }
   &__arrow {
     position: absolute;
@@ -1396,10 +1595,7 @@ $arrow-tip-radius: 0.1rem;
   }
   
   &--independent {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
     margin: auto;
     width: max-content;
     height: max-content;
@@ -1411,7 +1607,7 @@ $arrow-tip-radius: 0.1rem;
     --q-overlay-border-color: var(--q-theme-neutral-dark);
   }
 }
-$popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+$popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 .q-popover {
   .q-overlay__content {
     z-index: 1070;
@@ -1441,23 +1637,16 @@ $popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 .q-popover.q-overlay--bottom .q-overlay__arrow::after {
   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);
+$table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
+$row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 50%);
+$row-selected-bg: rgb(var(--q-theme-primary-rgb) / 15%);
+$base-border: 1px solid rgb(0 0 0 / 10%);
 .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;
@@ -1465,6 +1654,13 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
     min-height: 50px;
     gap: 1rem;
   }
+  &--side-panel {
+    flex-direction: row;
+    .q-property-list-panel__container {
+      border-left: $base-border;
+      width: 20%;
+    }
+  }
   &-panel__label {
     font-weight: bold;
   }
@@ -1500,9 +1696,6 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
       opacity: 0.8;
     }
   }
-  tbody td {
-    border-bottom: $base-border;
-  }
   &-group {
     cursor: pointer;
     td {
@@ -1522,6 +1715,9 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
       }
     }
   }
+  tbody td {
+    border-bottom: $base-border;
+  }
 }
 .q-select {
   $this: &;
@@ -1599,22 +1795,19 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     background-color: var(--q-theme-neutral-light);
-    animation: fadeIn 1s;
+    animation: fade-in 1s;
     border-radius: var(--border-radius);
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 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)
+        rgb(var(--q-theme-background-rgb) / 0%) 0,
+        rgb(var(--q-theme-background-rgb) / 20%) 20%,
+        rgb(var(--q-theme-background-rgb) / 50%) 60%,
+        rgb(var(--q-theme-background-rgb) / 0%)
       );
       
       animation: shimmer 2s infinite;
@@ -1636,7 +1829,7 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
       transform: translateX(100%);
     }
   }
-  @keyframes fadeIn {
+  @keyframes fade-in {
     0% {
       opacity: 0;
     }
@@ -1653,10 +1846,10 @@ $spinner-color: var(--q-theme-primary);
   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);
+  background: currentcolor;
+  --q-spinner-loader-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--q-spinner-loader-mask);
+  mask: var(--q-spinner-loader-mask);
   -webkit-mask-composite: source-out;
   mask-composite: subtract;
   animation: q-rotate 1s infinite linear;