cax-design-system 2.2.0 → 2.3.0

package/resources/cax.scss

@@ -978,127 +978,6 @@
             background-color: transparent;
         }
     }
-
-    .cax-autocomplete .cax-autocomplete-loader {
-    }
-    .cax-autocomplete.cax-autocomplete-dd .cax-autocomplete-loader {
-        right: 3.25rem;
-    }
-    .cax-autocomplete:not(.cax-disabled):hover .cax-autocomplete-multiple-container {
-        border-color: #52525b;
-    }
-    .cax-autocomplete:not(.cax-disabled).cax-focus .cax-autocomplete-multiple-container {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: #52525b;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container {
-        padding: 0.25rem 0.75rem;
-        gap: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
-        padding: 0.25rem 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token input {
-        font-family: var(--font-family);
-        font-feature-settings: var(--font-feature-settings, normal);
-        font-size: 1rem;
-        color: #ffffff;
-        padding: 0;
-        margin: 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
-        padding: 0.25rem 0.75rem;
-        background: #3f3f46;
-        color: #ffffff;
-        border-radius: 16px;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
-        margin-left: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token.cax-focus {
-        background: #3f3f46;
-        color: #ffffff;
-    }
-    .cax-autocomplete.cax-invalid.cax-component > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    .cax-autocomplete-panel {
-        background: var(--white-100);
-        color: var(--black-100);
-        border: 1px solid var(--grey-200);
-        border-radius: 7px;
-        box-shadow:
-            0 4px 6px -1px rgba(0, 0, 0, 0.1),
-            0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item {
-        margin: 2px 0;
-        padding: 0.5rem 0.75rem;
-        border: 0 none;
-        color: var(--grey-900);
-        background: var(--white-100);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:first-child {
-        margin-top: 0;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight {
-        color: var(--grey-900);
-        background: var(--grey-100);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight.cax-focus {
-        background: rgba(34, 211, 238, 0.24);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled):hover {
-        color: var(--black-100);
-        background: var(--grey-100);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item-group {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: #71717a;
-        background: #18181b;
-        font-weight: 600;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
-        padding: 0.5rem 0.75rem;
-        color: var(--grey-900);
-        background: var(--white-100);
-    }
-
-    cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    cax-autocomplete.cax-autocomplete-clearable .cax-inputtext {
-        padding-left: 1.9rem;
-        padding-right: 1.9rem;
-    }
-    cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-clear-icon {
-        color: #a1a1aa;
-        // left: 11rem;
-    }
-
-    cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-dd .cax-autocomplete-clear-icon {
-        color: #a1a1aa;
-        right: 3.25rem;
-    }
     .cax-cascadeselect {
         border: 1px solid var(--neutral-200);
         transition:
@@ -1453,43 +1332,6 @@
         color: var(--neutral-900);
     }
 
-    cax-inputnumber.ng-dirty.ng-invalid > .cax-inputnumber > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-input {
-        padding-right: 2.5rem;
-    }
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-clear-icon {
-        color: #a1a1aa;
-        right: 0.75rem;
-    }
-
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-stacked .cax-inputnumber-clear-icon {
-        right: 3.25rem;
-    }
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-horizontal .cax-inputnumber-clear-icon {
-        right: 3.25rem;
-    }
-
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input {
-        background-color: #27272a;
-    }
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:hover {
-        background-color: var(--neutral-500);
-    }
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:focus {
-        background-color: #27272a;
-    }
-    .cax-inputnumber-input {
-        width: 46px;
-        height: 40px;
-        border-radius: 5px;
-        border: 1px solid var(--neutral-200);
-        color: var(--neutral-500);
-        font-weight: 400;
-    }
-
     .cax-inputotp {
         display: flex;
         align-items: center;
@@ -3290,74 +3132,7 @@
         border-bottom-right-radius: 6px;
     }
 
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link {
-        padding: 1.125rem 1.125rem 1.125rem 1.125rem;
-        border: 1px solid #e0e5eb;
-        color: var(--neutral-900);
-        background: var(--neutral-300);
-        font-weight: 600;
-        border-radius: 6px;
-        font-size: 16px;
-        border-bottom: 1px solid #e0e5eb;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
-        margin-right: 0.5rem;
-    }
-
-    .cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
-        background: var(--neutral-300);
-        border-color: 1px solid #e0e5eb;
-        color: var(--neutral-900);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .cax-accordion .cax-accordion-content {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-        border: 1px solid #e0e5eb;
-        background: var(--white-100);
-        color: var(--neutral-900);
-        font-size: 0.875rem;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-tab {
-        margin-bottom: 0;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-header .cax-accordion-header-link {
-        border-radius: 0;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-content {
-        border-radius: 0;
-    }
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header .cax-accordion-header-link {
-        border-top: 0 none;
-    }
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-highlight):not(.cax-disabled):hover .cax-accordion-header-link,
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-disabled).cax-highlight:hover .cax-accordion-header-link {
-        border-top: 0 none;
-    }
-    .cax-accordion cax-accordiontab:first-child .cax-accordion-header .cax-accordion-header-link {
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab:last-child .cax-accordion-header:not(.cax-highlight) .cax-accordion-header-link {
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab:last-child .cax-accordion-content {
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-
+   
     .cax-card {
         background: var(--white-900);
         color: var(--neutral-900);
@@ -5637,23 +5412,6 @@
     }
 }
 @layer cax {
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link {
-        border-radius: 6px !important;
-        flex-direction: row-reverse;
-        justify-content: space-between;
-    }
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
-        transform: rotate(90deg);
-    }
-    .cax-accordion .cax-accordion-header.cax-highlight .cax-accordion-toggle-icon {
-        transform: rotate(-180deg);
-    }
-    .cax-accordion .cax-accordion-header:not(.cax-disabled) .cax-accordion-header-link:focus-visible {
-        outline-offset: -2px;
-    }
-    .cax-accordion cax-accordiontab:last-of-type .cax-accordion-tab {
-        border-bottom: 0 none;
-    }
 
     .cax-autocomplete .cax-autocomplete-multiple-container {
         padding: 0.25rem 0.25rem;
@@ -5903,73 +5661,6 @@
         // padding: 0.5rem;
     }
 
-    .cax-inputnumber.cax-inputnumber-buttons-stacked {
-        position: relative;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-input {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        height: calc(100% - 2px);
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        background-color: transparent;
-        border: 0 none;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button {
-        background-color: transparent;
-        border: 1px solid #3f3f46;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-up {
-        border-left: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-down {
-        border-right: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button {
-        background-color: transparent;
-        border: 1px solid #3f3f46;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-up {
-        border-bottom: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-down {
-        border-top: 0 none;
-    }
-
     .cax-inputswitch .cax-inputswitch-slider {
         border: 0 none;
     }
@@ -8130,7 +7821,6 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
         box-shadow 0.2s,
         outline-color 0.2s;
     appearance: none;
-    border-radius: 8px;
 }
 
 .cax-input-size-sm {
@@ -8295,7 +7985,6 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
 }
 .cax-inputtext {
     border: 1px solid var(--neutral-200);
-
     &:hover {
         border: 1px solid var(--neutral-300);
     }
@@ -8382,7 +8071,7 @@ input.cax-input-invalid:not(:disabled):focus,
 
 .cax-input-icon-left > .cax-icon-wrapper.cax-icon,
 .cax-input-icon-left > i:first-of-type {
-    left: 0.75rem;
+    left: 0.6rem;
     color: var(--neutral-750);
 }
 
@@ -8997,7 +8686,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 .cax-button:not(:disabled):active {
     background: var(--primary-500);
-    color: var(--surface-100);
+    color: var(--white-100);
     border-color: var(--primary-500);
 }
 .cax-button.cax-button-outlined {
@@ -9077,10 +8766,6 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
         0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .cax-button.cax-button-icon-only {
-    border-top-left-radius: 0;
-    border-top-right-radius: var(--radius-100);
-    border-bottom-right-radius: var(--radius-100);
-    border-bottom-left-radius: 0;
     min-width: 2.5rem;
     padding: var(--space-100) 0;
 }
@@ -9237,9 +8922,8 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 .cax-button.cax-button-secondary:not(:disabled):active,
 .cax-button-group.cax-button-secondary > .cax-button:not(:disabled):active,
 .cax-splitbutton.cax-button-secondary > .cax-button:not(:disabled):active {
-    background: var(--neutral-150);
+    background: var(--neutral-75);
     color: var(--neutral-900);
-    border-color: 1px solid var(--neutral-150);
 }
 .cax-button.cax-button-secondary.cax-button-outlined,
 .cax-button-group.cax-button-secondary > .cax-button.cax-button-outlined,
@@ -11438,26 +11122,113 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     box-shadow: none;
 }
 
-.cax-timeline .cax-timeline-event-marker {
-    border: 1px solid var(--primary-500);
-    border-radius: 50%;
-    width: 1.125rem;
-    height: 1.125rem;
-    background-color: var(--primary-25);
-}
-.cax-timeline .cax-timeline-event-connector {
-    background-color: var(--primary-500);
-}
-.cax-timeline.cax-timeline-vertical .cax-timeline-event-opposite,
-.cax-timeline.cax-timeline-vertical .cax-timeline-event-content {
-    padding-bottom: 1rem;
-}
 
-.cax-timeline-event-content:hover{
-    background: var(--neutral-75); 
+.cax-accordion .cax-accordion-header .cax-accordion-header-link {
+    padding: var(--space-200) 17.5px var(--space-200) 17.5px;
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+    background: var(--neutral-75);
+    font-weight: 600;
+    border-radius: 6px;
+    font-size: 20px;
+    border-bottom: 1px solid var(--neutral-200);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
+    margin-right: 0.5rem;
 }
 
-.cax-timeline.cax-timeline-vertical .cax-timeline-event-connector {
+.cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
+    background: var(--neutral-75);
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.cax-accordion .cax-accordion-content {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+    border: 1px solid #e0e5eb;
+    background: var(--white-100);
+    color: var(--neutral-900);
+    font-size: 20px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+.cax-accordion cax-accordiontab .cax-accordion-tab {
+    margin-bottom: 0;
+}
+.cax-accordion cax-accordiontab .cax-accordion-header .cax-accordion-header-link {
+    border-radius: 0;
+}
+.cax-accordion cax-accordiontab .cax-accordion-content {
+    border-radius: 0;
+}
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header .cax-accordion-header-link {
+    border-top: 0 none;
+}
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-highlight):not(.cax-disabled):hover .cax-accordion-header-link,
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-disabled).cax-highlight:hover .cax-accordion-header-link {
+    border-top: 0 none;
+}
+.cax-accordion cax-accordiontab:first-child .cax-accordion-header .cax-accordion-header-link {
+    border-top-right-radius: var(--radius-150);
+    border-top-left-radius: var(--radius-150);
+}
+.cax-accordion cax-accordiontab:last-child .cax-accordion-header:not(.cax-highlight) .cax-accordion-header-link {
+    border-bottom-right-radius: var(--radius-150);
+    border-bottom-left-radius: var(--radius-150);
+}
+.cax-accordion cax-accordiontab:last-child .cax-accordion-content {
+    border-bottom-right-radius: var(--radius-150);
+    border-bottom-left-radius: var(--radius-150);
+}
+
+.cax-accordion .cax-accordion-header .cax-accordion-header-link {
+    // border-radius: 6px !important;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+.cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
+    transform: rotate(90deg);
+}
+.cax-accordion .cax-accordion-header.cax-highlight .cax-accordion-toggle-icon {
+    transform: rotate(-180deg);
+}
+.cax-accordion .cax-accordion-header:not(.cax-disabled) .cax-accordion-header-link:focus-visible {
+    outline-offset: -2px;
+}
+.cax-accordion cax-accordiontab:last-of-type .cax-accordion-tab {
+    border-bottom: 0 none;
+}
+
+.cax-timeline .cax-timeline-event-marker {
+    border: 1px solid var(--primary-500);
+    border-radius: 50%;
+    width: 1.125rem;
+    height: 1.125rem;
+    background-color: var(--primary-25);
+}
+.cax-timeline .cax-timeline-event-connector {
+    background-color: var(--primary-500);
+}
+.cax-timeline.cax-timeline-vertical .cax-timeline-event-opposite,
+.cax-timeline.cax-timeline-vertical .cax-timeline-event-content {
+    padding-bottom: 1rem;
+}
+
+.cax-timeline-event-content:hover {
+    background: var(--neutral-75);
+}
+
+.cax-timeline.cax-timeline-vertical .cax-timeline-event-connector {
     width: 1px;
 }
 .cax-timeline.cax-timeline-horizontal .cax-timeline-event-opposite,
@@ -11474,8 +11245,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     position: relative;
     color: var(--primary-500);
     font-size: 10px;
-    font-weight : 600;
-
+    font-weight: 600;
 }
 .cax-timeline .cax-timeline-event-marker::after {
     content: ' ';
@@ -11487,3 +11257,627 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
         0px 0.5px 0px 0px rgba(0, 0, 0, 0.06),
         0px 1px 1px 0px rgba(0, 0, 0, 0.12);
 }
+
+.cax-inputnumber {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    .cax-inputnumber-button {
+        width: 37px;
+        border: 1px solid var(--neutral-150);
+    }
+    // Modify button layouts
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-button-group {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid var(--neutral-150);
+            border-radius: 0px 8px 8px 0px;
+            height: 32px;
+            .cax-button {
+                min-width: 37px;
+                height: 15.5px;
+                border: none;
+                i,
+                .cax-icon {
+                    display: inline-flex;
+                    font-size: 1rem;
+                }
+                &:active,
+                &:focus {
+                    position: relative;
+                    z-index: 1;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: -1px;
+                        right: -1px;
+                        height: 100%;
+                        border: 1px solid var(--blue-500);
+                    }
+                }
+
+                &:first-child:active::after,
+                &:first-child:focus::after {
+                    top: -1px;
+                    border-radius: 0 8px 0 0;
+                }
+
+                &:last-child:active::after,
+                &:last-child:focus::after {
+                    bottom: -1px;
+                    border-radius: 0 0 8px 0;
+                }
+            }
+
+            // Remove previous border color changes
+            &:has(.cax-button:active),
+            &:has(.cax-button:focus) {
+                border-color: var(--neutral-150);
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-button.cax-inputnumber-button {
+            min-width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            i,
+            .cax-icon {
+                display: inline-flex;
+                font-size: 1.5rem;
+            }
+        }
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    // Input styles
+    .cax-inputnumber-input {
+        width: 100%;
+        height: 32px;
+        padding: 7px 10.5px;
+        border: 1px solid var(--neutral-200);
+        transition: all 0.2s;
+        &:hover {
+            border-color: var(--neutral-300);
+        }
+        &:focus {
+            outline: none;
+            border-color: var(--blue-500);
+        }
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+
+            & + .cax-input-prefix,
+            & + .cax-input-prefix-icon,
+            & ~ .cax-input-suffix,
+            & ~ i,
+            & ~ .cax-icon {
+                opacity: 0.6;
+                cursor: not-allowed;
+                color: var(--neutral-400);
+            }
+        }
+    }
+
+    &.cax-input-icon-left {
+        .cax-inputnumber-input {
+            padding-left: 2.5rem;
+        }
+    }
+
+    &.cax-disabled {
+        .cax-input-prefix,
+        .cax-input-prefix-icon,
+        .cax-input-suffix,
+        i,
+        .cax-icon {
+            opacity: 0.6;
+            cursor: not-allowed;
+            color: var(--neutral-400);
+        }
+    }
+
+    input.cax-inputnumber-input {
+        font-weight: 500;
+        box-shadow: none;
+        &[inputmode='symbol'] {
+            letter-spacing: 0px;
+        }
+        &[inputmode='decimal'] {
+            letter-spacing: 0px;
+        }
+    }
+
+    .cax-input-prefix,
+    .cax-input-prefix-icon {
+        position: absolute;
+        top: 50%;
+        left: 0.75rem;
+        transform: translateY(-50%);
+        color: var(--neutral-750);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+        & + .cax-inputnumber-input {
+            letter-spacing: 0px;
+            padding-left: 2.75rem;
+            text-indent: 20px;
+            &[inputmode='symbol'] {
+                text-indent: 24px;
+            }
+        }
+    }
+
+    &.cax-input-icon-left {
+        .cax-inputnumber-input {
+            padding-left: 2.5rem;
+        }
+    }
+    .cax-inputnumber-input {
+        &:not(.cax-filled) {
+            &::placeholder {
+                opacity: 1;
+            }
+        }
+    }
+
+    .cax-input-prefix,
+    .cax-input-prefix-icon {
+        position: absolute;
+        left: 0.75rem;
+        transform: translateY(-50%);
+        color: var(--neutral-750);
+        z-index: 1;
+        display: flex;
+        font-size: large;
+        align-items: center;
+        & + .cax-inputnumber-input {
+            padding-left: 0.7rem;
+            &::before {
+                content: '\00a0';
+                display: inline;
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked,
+    &.cax-inputnumber-buttons-horizontal,
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        &.cax-input-icon-left .cax-inputnumber-input {
+            padding-left: 0.7rem;
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        &.cax-input-icon-left {
+            .cax-input-prefix,
+            .cax-input-prefix-icon {
+                display: flex;
+            }
+
+            .cax-inputnumber-input {
+                padding-left: 0.7rem;
+            }
+        }
+    }
+
+    input.cax-inputnumber-input {
+        font-weight: 500;
+        &[inputmode='symbol'] {
+            padding-left: 2.25rem;
+            word-spacing: 0.25rem;
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-button-group {
+            .cax-button {
+                position: relative;
+                min-width: 37px;
+                height: 15.5px;
+                border: none;
+
+                &:first-child {
+                    border-radius: 0 8px 0 0;
+                    border-bottom: 1px solid var(--neutral-150);
+
+                    &:active,
+                    &:focus {
+                        border-color: var(--neutral-150);
+                        border-radius: 0 8px 0 0;
+                    }
+                }
+
+                &:last-child {
+                    border-radius: 0 0 8px 0;
+
+                    &:active,
+                    &:focus {
+                        border-color: var(--neutral-150);
+                        border-radius: 0 0 8px 0;
+                    }
+                }
+
+                &:active,
+                &:focus {
+                    border: 1px solid var(--neutral-150);
+                    z-index: 1;
+                }
+
+                i,
+                .cax-icon {
+                    display: inline-flex;
+                    font-size: 1.5rem;
+                }
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-input {
+            border-right: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .cax-inputnumber-button-group {
+            border: 1px solid var(--neutral-150);
+            border-left: 0;
+            border-radius: 0 8px 8px 0;
+
+            .cax-button {
+                border: none;
+                border-radius: 0 !important;
+
+                &:first-child {
+                    border-radius: 0 8px 0 0 !important;
+                    border-bottom: 1px solid var(--neutral-150);
+                }
+
+                &:last-child {
+                    border-radius: 0 0 8px 0 !important;
+                }
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-inputnumber-input {
+            border-radius: 0;
+        }
+
+        .cax-button.cax-inputnumber-button {
+            &.cax-inputnumber-button-up {
+                border-radius: 0 8px 8px 0 !important;
+            }
+
+            &.cax-inputnumber-button-down {
+                border-radius: 8px 0 0 8px !important;
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            border-radius: 0;
+        }
+
+        .cax-button.cax-inputnumber-button {
+            &.cax-inputnumber-button-up {
+                border-radius: 8px 8px 0 0 !important;
+            }
+
+            &.cax-inputnumber-button-down {
+                border-radius: 0 0 8px 8px !important;
+            }
+        }
+    }
+}
+
+.cax-input-prefix,
+.cax-input-prefix-icon {
+    &:not(:first-child) {
+        margin-left: 0;
+    }
+}
+
+.cax-input-icon-left > i,
+.cax-input-icon-left > .cax-icon-wrapper,
+.cax-input-icon-right > i,
+.cax-input-icon-right > .cax-icon-wrapper {
+    margin-top: -1px;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+}
+
+.cax-inputnumber-input {
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+}
+
+.cax-inputnumber.cax-inputnumber-buttons-stacked {
+    position: relative;
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button {
+    height: calc(100% - 2px);
+    background-color: var(--neutral-75);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button {
+    background-color: var(--neutral-75);
+    border: 1px solid var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-up {
+    border-left: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-down {
+    border-right: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button {
+    background-color: var(--neutral-75);
+    border: 1px solid var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-up {
+    border-bottom: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-down {
+    border-top: 0 none;
+}
+
+cax-inputnumber.ng-dirty.ng-invalid > .cax-inputnumber > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-input {
+    padding-right: 2.5rem;
+}
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-clear-icon {
+    color: var(--neutral-400);
+    right: 0.75rem;
+}
+
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-stacked .cax-inputnumber-clear-icon {
+    right: 3.25rem;
+}
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-horizontal .cax-inputnumber-clear-icon {
+    right: 3.25rem;
+}
+
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input {
+    background-color: #27272a;
+}
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:hover {
+    background-color: var(--neutral-500);
+}
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:focus {
+    background-color: #27272a;
+}
+.cax-autocomplete .cax-autocomplete-loader {
+}
+.cax-autocomplete.cax-autocomplete-dd .cax-autocomplete-loader {
+    right: 3.25rem;
+}
+.cax-autocomplete:not(.cax-disabled):hover .cax-autocomplete-multiple-container {
+    border-color: #52525b;
+}
+.cax-autocomplete:not(.cax-disabled).cax-focus .cax-autocomplete-multiple-container {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: #52525b;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
+    padding: 0.25rem 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: var(--white-100);
+    padding: 0;
+    margin: 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    background: #3f3f46;
+    color: var(--white-100);
+    border-radius: 16px;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token.cax-focus {
+    background: #3f3f46;
+    color: var(--black-100);
+}
+.cax-autocomplete.cax-invalid.cax-component > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+.cax-autocomplete-panel {
+    background: var(--white-100);
+    color: var(--black-100);
+    border: 1px solid var(--grey-200);
+    border-radius: 7px;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+.cax-autocomplete-panel .cax-autocomplete-items {
+    padding: 0.25rem 0.25rem;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: var(--grey-900);
+    background: var(--white-100);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:first-child {
+    margin-top: 0;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight {
+    color: var(--grey-900);
+    background: var(--grey-100);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight.cax-focus {
+    background: rgba(34, 211, 238, 0.24);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
+    color: var(--white-100);
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: var(--black-100);
+    background: var(--grey-100);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item-group {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    color: #71717a;
+    background: #18181b;
+    font-weight: 600;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
+    padding: 0.5rem 0.75rem;
+    color: var(--grey-900);
+    background: var(--white-100);
+}
+
+cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+cax-autocomplete.cax-autocomplete-clearable .cax-inputtext {
+    padding-left: 1.9rem;
+    padding-right: 1.9rem;
+}
+cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-clear-icon {
+    color: var(--neutral-300);
+}
+
+cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-dd .cax-autocomplete-clear-icon {
+    color: var(--neutral-300);
+    right: 3.25rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container {
+    padding: 0.25rem 0.25rem;
+    gap: 0.25rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
+    border-radius: 4px;
+    margin: 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
+    margin-left: 0.375rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container:has(.cax-autocomplete-token) .cax-autocomplete-input-token {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete.cax-disabled {
+    opacity: 1;
+}