q2-tecton-elements 1.10.4 → 1.10.7

package/dist/collection/components/q2-input/styles.css

@@ -1,444 +1,363 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 :host(.sr),
 :host(.sr) button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .sr,
 .sr button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 :host {
-    display: block;
-    margin-top: var(--tct-input-margin-top, var(--app-scale-6x, 30px));
-    margin-bottom: var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));
-    font-size: var(--tct-input-font-size, var(--app-font-size, inherit));
+  display: block;
+  margin-top: var(--tct-input-margin-top, var(--app-scale-6x, 30px));
+  margin-bottom: var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));
+  font-size: var(--tct-input-font-size, var(--app-font-size, inherit));
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .field-container,
 .input-container {
-    position: relative;
+  position: relative;
 }
 
 label {
-    display: block;
-    padding-left: var(--tct-input-label-padding-left, 0);
-    padding-right: var(--tct-input-label-padding-right, 0);
-    margin-top: var(--tct-input-label-margin-top, 0);
-    margin-bottom: var(
-        --tct-input-label-margin-bottom,
-        var(--tct-scale-1, var(--app-scale-1, 5px))
-    );
-    color: var(--tct-input-label-font-color, inherit);
-    font-size: var(--tct-input-label-font-size, inherit);
-    font-weight: var(--tct-input-label-font-weight, 600);
-    text-transform: var(--tct-input-label-text-transform, none);
-    letter-spacing: var(--tct-input-label-letter-spacing, normal);
-    transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  display: block;
+  padding-left: var(--tct-input-label-padding-left, 0);
+  padding-right: var(--tct-input-label-padding-right, 0);
+  margin-top: var(--tct-input-label-margin-top, 0);
+  margin-bottom: var(--tct-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px)));
+  color: var(--tct-input-label-font-color, inherit);
+  font-size: var(--tct-input-label-font-size, inherit);
+  font-weight: var(--tct-input-label-font-weight, 600);
+  text-transform: var(--tct-input-label-text-transform, none);
+  letter-spacing: var(--tct-input-label-letter-spacing, normal);
+  transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
 }
 
 .optional-tag {
-    margin-left: var(
-        --tct-input-label-optional-margin-left,
-        var(--tct-scale-1, var(--app-scale-1, 5px))
-    );
-    color: var(
-        --tct-input-label-optional-font-color,
-        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))
-    );
-    font-size: var(--tct-input-label-optional-font-size, 12px);
-    font-weight: var(--tct-input-label-optional-font-weight, 400);
+  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
+  color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
+  font-size: var(--tct-input-label-optional-font-size, 12px);
+  font-weight: var(--tct-input-label-optional-font-weight, 400);
 }
 
 .input-container {
-    background-color: var(
-        --tct-input-bg,
-        var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))
-    );
-    display: flex;
-    align-items: center;
-    --comp-input-horizontal-gap: var(
-        --tct-input-horizontal-gap,
-        var(--t-input-horizontal-gap, 8px)
-    );
-    --comp-input-border-top-left-radius: var(
-        --tct-input-border-top-left-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-input-border-top-right-radius: var(
-        --tct-input-border-top-right-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-input-border-bottom-right-radius: var(
-        --tct-input-border-bottom-right-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-input-border-bottom-left-radius: var(
-        --tct-input-border-bottom-left-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-input-border-radius: var(--comp-input-border-top-left-radius)
-        var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)
-        var(--comp-input-border-bottom-left-radius);
-    --comp-input-border-width: var(--tct-input-border-top-width, 1px)
-        var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)
-        var(--tct-input-border-left-width, 1px);
-    --comp-input-focus-border-width: var(--tct-input-focus-border-top-width, 1px)
-        var(--tct-input-focus-border-right-width, 1px)
-        var(--tct-input-focus-border-bottom-width, 1px)
-        var(--tct-input-focus-border-left-width, 1px);
-    --comp-input-prefix-clearance: calc(
-        3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
-    );
-    --comp-input-icon-clearance: 34px;
-    --comp-input-min-height: 44px;
-
-    border-width: var(--comp-input-border-width);
-    border-style: solid;
-    border-color: var(
-        --tct-input-border-color,
-        var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc)))
-    );
-    border-radius: var(--comp-input-border-radius);
-    box-shadow: var(--tct-input-box-shadow, none);
-    transition: border-width
-            var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),
-        border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),
-        box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  background-color: var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));
+  display: flex;
+  align-items: center;
+  --comp-input-horizontal-gap: var(
+      --tct-input-horizontal-gap,
+      var(--t-input-horizontal-gap, 8px)
+  );
+  --comp-input-border-top-left-radius: var(
+      --tct-input-border-top-left-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-input-border-top-right-radius: var(
+      --tct-input-border-top-right-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-input-border-bottom-right-radius: var(
+      --tct-input-border-bottom-right-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-input-border-bottom-left-radius: var(
+      --tct-input-border-bottom-left-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-input-border-radius: var(--comp-input-border-top-left-radius)
+      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)
+      var(--comp-input-border-bottom-left-radius);
+  --comp-input-border-width: var(--tct-input-border-top-width, 1px)
+      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)
+      var(--tct-input-border-left-width, 1px);
+  --comp-input-focus-border-width: var(--tct-input-focus-border-top-width, 1px)
+      var(--tct-input-focus-border-right-width, 1px)
+      var(--tct-input-focus-border-bottom-width, 1px)
+      var(--tct-input-focus-border-left-width, 1px);
+  --comp-input-prefix-clearance: calc(
+      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
+  );
+  --comp-input-icon-clearance: 34px;
+  --comp-input-min-height: 44px;
+  border-width: var(--comp-input-border-width);
+  border-style: solid;
+  border-color: var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
+  border-radius: var(--comp-input-border-radius);
+  box-shadow: var(--tct-input-box-shadow, none);
+  transition: border-width var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
 }
 
 .input-field {
-    flex: 1;
-    border: 0;
-    -webkit-appearance: none;
-    appearance: none;
-    box-sizing: border-box;
-    min-height: var(--comp-input-min-height);
-    height: var(--tct-input-height, 44px);
-    width: 100%;
-    padding: 0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
-    background-color: transparent;
-    color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  flex: 1;
+  border: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  min-height: var(--comp-input-min-height);
+  height: var(--tct-input-height, 44px);
+  width: 100%;
+  padding: 0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
+  background-color: transparent;
+  color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
 }
 
 input {
-    display: inline-block;
+  display: inline-block;
 }
 
 .input-field:focus {
-    outline: none;
-    box-shadow: none;
+  outline: none;
+  box-shadow: none;
 }
+
 /* To remove up/down arrow in number field for webkit based browser */
 .input-field::-webkit-outer-spin-button,
 .input-field::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
+
 /* For Firefox */
-.input-field[type='number'] {
-    -moz-appearance: textfield;
+.input-field[type=number] {
+  -moz-appearance: textfield;
 }
 
 .input-container:focus-within {
-    border-width: var(--comp-input-focus-border-width, 1px);
-    border-color: var(
-        --tct-input-focus-border-color,
-        var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999)))
-    );
-    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),
-        var(--tct-input-focus-box-shadow, 0 0 transparent);
+  border-width: var(--comp-input-focus-border-width, 1px);
+  border-color: var(--tct-input-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999))));
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, 0 0 transparent);
 }
 
 input::-ms-clear {
-    display: none;
+  display: none;
 }
 
-input[type='search']::-webkit-search-decoration,
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-results-button,
-input[type='search']::-webkit-search-results-decoration {
-    display: none;
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  display: none;
 }
 
 input::placeholder,
 .placeholder-text {
-    color: var(
-        --tct-input-placeholder-font-color,
-        var(
-            --t-input-placeholder-font-color,
-            var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))
-        )
-    );
+  color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))));
 }
 
 .pseudo-input {
-    display: inline-flex;
-    align-items: center;
+  display: inline-flex;
+  align-items: center;
 }
 
 .pseudo-input span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .input-icons-container-left:empty {
-    display: none;
+  display: none;
 }
+
 .input-icons-container-left {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--comp-input-horizontal-gap);
-    padding-left: var(--comp-input-horizontal-gap);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--comp-input-horizontal-gap);
+  padding-left: var(--comp-input-horizontal-gap);
 }
 
 .input-icons-container-right:empty {
-    display: none;
+  display: none;
 }
 
 .input-icons-container-right {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--comp-input-horizontal-gap);
-    padding-right: var(--comp-input-horizontal-gap);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--comp-input-horizontal-gap);
+  padding-right: var(--comp-input-horizontal-gap);
 }
+
 .input-icons-container-right .btn-visibility-toggle {
-    color: var(--tct-primary, var(--t-primary, #006eb2));
-    font-size: 12px;
+  color: var(--tct-primary, var(--t-primary, #006eb2));
+  font-size: 12px;
 }
 
 q2-icon {
-    margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
-    margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
-    pointer-events: none;
-    color: var(
-        --tct-input-icon-stroke-primary,
-        var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))
-    );
-    --tct-icon-stroke-primary: var(
-        --tct-input-icon-stroke-primary,
-        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-    );
-    --t-icon-stroke-primary: var(
-        --tct-input-icon-stroke-primary,
-        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-    );
+  margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
+  margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
+  pointer-events: none;
+  color: var(--tct-input-icon-stroke-primary, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))));
+  --tct-icon-stroke-primary: var(
+      --tct-input-icon-stroke-primary,
+      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
+  );
+  --t-icon-stroke-primary: var(
+      --tct-input-icon-stroke-primary,
+      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
+  );
 }
 
 .icon-left-muted {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .input-prefix,
 .input-suffix {
-    margin-left: calc(var(--comp-input-horizontal-gap) * -1);
-    margin-right: calc(var(--comp-input-horizontal-gap) * -1);
-    width: 3em;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: calc(
-        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) -
-            var(--tct-input-focus-border-bottom-width, 1px)
-    );
-    height: calc(
-        var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -
-            var(--tct-input-focus-border-bottom-width, 1px)
-    );
-    font-size: var(--tct-input-prefix-font-size, inherit);
-    color: var(--tct-input-prefix-font-color, inherit);
-    background-color: var(
-        --tct-input-prefix-bg,
-        var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))
-    );
-    transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),
-        background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  margin-left: calc(var(--comp-input-horizontal-gap) * -1);
+  margin-right: calc(var(--comp-input-horizontal-gap) * -1);
+  width: 3em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );
+  height: calc( var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );
+  font-size: var(--tct-input-prefix-font-size, inherit);
+  color: var(--tct-input-prefix-font-color, inherit);
+  background-color: var(--tct-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))));
+  transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
 }
 
 .input-prefix {
-    border-top-left-radius: calc(
-        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -
-            var(--tct-input-border-left-width, 1px)
-    );
-    border-bottom-left-radius: calc(
-        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) -
-            var(--tct-input-border-left-width, 1px)
-    );
-    pointer-events: none; /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
+  border-top-left-radius: calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-left-width, 1px) );
+  border-bottom-left-radius: calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-left-width, 1px) );
+  pointer-events: none;
+  /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
 }
 
 .input-suffix {
-    border-top-right-radius: calc(
-        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -
-            var(--tct-input-border-right-width, 1px)
-    );
-    border-bottom-right-radius: calc(
-        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) -
-            var(--tct-input-border-right-width, 1px)
-    );
+  border-top-right-radius: calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-right-width, 1px) );
+  border-bottom-right-radius: calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-right-width, 1px) );
 }
 
 .icon-error {
-    color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-    --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-    --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
 }
 
 .pw-show {
-    position: absolute;
-    margin-right: var(--tct-scale-2, var(--app-scale-2, 20px));
+  position: absolute;
+  margin-right: var(--tct-scale-2, var(--app-scale-2, 20px));
 }
 
 .btn-clear {
-    margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
-    margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
-    height: 22px;
-    --tct-btn-icon-width: 17px;
-    --tct-btn-icon-height: 22px;
-    --tct-icon-size: 17px;
+  margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
+  margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
+  height: 22px;
+  --tct-btn-icon-width: 17px;
+  --tct-btn-icon-height: 22px;
+  --tct-icon-size: 17px;
 }
 
 .messages-container {
-    height: 0px;
-    overflow: hidden;
-    background-color: var(
-        --tct-message-bg,
-        var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))
-    );
-    box-shadow: var(
-        --tct-input-message-box-shadow,
-        var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))
-    );
-    transition: height
-        var(--tct-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
-    margin-top: 2px;
-    z-index: 1;
-    position: absolute;
-    width: 100%;
-    color: var(--tct-input-messages-font-color, inherit);
+  height: 0px;
+  overflow: hidden;
+  background-color: var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
+  box-shadow: var(--tct-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+  transition: height var(--tct-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
+  margin-top: 2px;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  color: var(--tct-input-messages-font-color, inherit);
 }
 
 :host([disabled]) .input-container {
-    cursor: not-allowed;
-    opacity: var(
-        --tct-input-disabled-opacity,
-        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))
-    );
+  cursor: not-allowed;
+  opacity: var(--tct-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
 }
 
 .input-field[disabled] {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .right-aligned .input-field {
-    text-align: right;
+  text-align: right;
 }
 
 .has-error label {
-    color: var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit));
+  color: var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit));
 }
 
 .has-error:not(.has-focus) .input-prefix,
 .has-error:not(.has-focus) .input-suffix {
-    color: var(--tct-input-error-prefix-font-color, inherit);
-    background-color: var(
-        --tct-input-error-prefix-bg,
-        var(
-            --tct-input-bg,
-            var(
-                --t-input-bg,
-                var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))
-            )
-        )
-    );
+  color: var(--tct-input-error-prefix-font-color, inherit);
+  background-color: var(--tct-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
 }
 
 .has-error .input-container:not(:focus-within) {
-    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
+  border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
 }
 
 .icon-left {
-    width: 26px;
-    height: 26px;
+  width: 26px;
+  height: 26px;
 }
+
 .vertical-separator {
-    height: calc(var(--comp-input-min-height) - 2px);
-    border-right: 1px solid
-        var(
-            --tct-input-prefix-border-color,
-            var(
-                --tct-input-border-color,
-                var(
-                    --t-input-border,
-                    var(
-                        --tct-gray-11,
-                        var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))
-                    )
-                )
-            )
-        );
-}
+  height: calc(var(--comp-input-min-height) - 2px);
+  border-right: 1px solid var(--tct-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))));
+}

package/dist/collection/components/q2-loading/index.js

@@ -63,7 +63,7 @@ export class Q2Loading {
   static get is() { return "q2-loading"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]