cax-design-system 3.0.1 → 3.0.2

package/fesm2022/cax-design-system-tableconfiguration.mjs

@@ -71,7 +71,7 @@ class Tableconfiguration {
         this.fontSizeChange.emit(this.fontConfiguration);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Tableconfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: Tableconfiguration, isStandalone: true, selector: "cax-tableconfiguration", inputs: { fontConfiguration: "fontConfiguration", rowConfiguration: "rowConfiguration" }, outputs: { rowHeightChange: "rowHeightChange", fontSizeChange: "fontSizeChange", saveDefault: "saveDefault" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Font Size</span>\n            <cax-button (click)=\"emitTableConfiguration()\" [label]=\"'Save as default'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span class=\"cax-text-body-md-regular\" *ngFor=\"let option of fontSizeOptions\" [class.active]=\"getFontValue() === option\" [style.fontSize]=\"option + 'px'\" (click)=\"onFontLabelClick(option)\" class=\"cursor-pointer\">\n                    {{ option }}px\n                </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <cax-slider [min]=\"12\" [max]=\"18\" [step]=\"2\" [ngModel]=\"getFontValue()\" (onChange)=\"onSliderChange($event)\"></cax-slider>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li\n                class=\"cax-text-action-md-semibold\"\n                [class.active]=\"rowConfiguration === 'sm' && (fontConfiguration === 'sm' || fontConfiguration === 'md')\"\n                [class.disabled]=\"fontConfiguration === 'lg' || fontConfiguration === 'xl'\"\n                (click)=\"updateRowHeight('sm')\"\n            >\n                Small\n            </li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n", styles: ["cax-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i3.Slider, selector: "cax-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: Tableconfiguration, isStandalone: true, selector: "cax-tableconfiguration", inputs: { fontConfiguration: "fontConfiguration", rowConfiguration: "rowConfiguration" }, outputs: { rowHeightChange: "rowHeightChange", fontSizeChange: "fontSizeChange", saveDefault: "saveDefault" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Font Size</span>\n            <cax-button (click)=\"emitTableConfiguration()\" [label]=\"'Save as default'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span class=\"cax-text-body-md-regular\" *ngFor=\"let option of fontSizeOptions\" [class.active]=\"getFontValue() === option\" [style.fontSize]=\"option + 'px'\" (click)=\"onFontLabelClick(option)\" class=\"cursor-pointer\">\n                    {{ option }}px\n                </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <cax-slider [min]=\"12\" [max]=\"18\" [step]=\"2\" [ngModel]=\"getFontValue()\" (onChange)=\"onSliderChange($event)\"></cax-slider>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li\n                class=\"cax-text-action-md-semibold\"\n                [class.active]=\"rowConfiguration === 'sm' && (fontConfiguration === 'sm' || fontConfiguration === 'md')\"\n                [class.disabled]=\"fontConfiguration === 'lg' || fontConfiguration === 'xl'\"\n                (click)=\"updateRowHeight('sm')\"\n            >\n                Small\n            </li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n", styles: ["cax-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i3.Slider, selector: "cax-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus", "showSteps"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Tableconfiguration, decorators: [{
             type: Component,

package/fesm2022/cax-design-system-tableconfiguration.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { SliderModule } from 'cax-design-system/slider';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n    selector: 'cax-tableconfiguration',\n    templateUrl: './tableconfiguration.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tableconfiguration.scss'],\n    imports: [ButtonModule, CommonModule, SliderModule, FormsModule],\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Tableconfiguration {\n    @Input() fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    @Input() rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    fontSizeOptions = [12, 14, 16, 18];\n\n    @Output() rowHeightChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() fontSizeChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() saveDefault: EventEmitter<any> = new EventEmitter();\n\n    getFontValue() {\n        switch (this.fontConfiguration) {\n            case 'sm':\n                return 12;\n            case 'md':\n                return 14;\n            case 'lg':\n                return 16;\n            case 'xl':\n                return 18;\n        }\n    }\n\n    updateRowHeight(size: 'sm' | 'md' | 'lg' | 'xl') {\n        if (size == 'sm' && (this.fontConfiguration === 'lg' || this.fontConfiguration === 'xl')) {\n            this.rowHeightChange.emit(this.rowConfiguration);\n        } else {\n            this.rowConfiguration = size;\n            this.rowHeightChange.emit(this.rowConfiguration);\n        }\n    }\n\n    emitTableConfiguration() {\n        this.saveDefault.emit({ fontSize: this.fontConfiguration, rowSize: this.rowConfiguration });\n    }\n\n    onSliderChange(event: any) {\n        this.updateFontConfiguration(event.value);\n    }\n\n    onFontLabelClick(value: number) {\n        this.updateFontConfiguration(value);\n    }\n\n    private updateFontConfiguration(newValue: number) {\n        switch (newValue) {\n            case 12:\n                this.fontConfiguration = 'sm';\n                break;\n            case 14:\n                this.fontConfiguration = 'md';\n                break;\n            case 16:\n                this.fontConfiguration = 'lg';\n                if (this.rowConfiguration === 'sm') this.rowConfiguration = 'md';\n                break;\n            case 18:\n                this.fontConfiguration = 'xl';\n                if (this.rowConfiguration === 'sm') this.rowConfiguration = 'md';\n                break;\n            default:\n                this.fontConfiguration = 'md';\n                break;\n        }\n        this.fontSizeChange.emit(this.fontConfiguration);\n    }\n}\n","<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Font Size</span>\n            <cax-button (click)=\"emitTableConfiguration()\" [label]=\"'Save as default'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span class=\"cax-text-body-md-regular\" *ngFor=\"let option of fontSizeOptions\" [class.active]=\"getFontValue() === option\" [style.fontSize]=\"option + 'px'\" (click)=\"onFontLabelClick(option)\" class=\"cursor-pointer\">\n                    {{ option }}px\n                </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <cax-slider [min]=\"12\" [max]=\"18\" [step]=\"2\" [ngModel]=\"getFontValue()\" (onChange)=\"onSliderChange($event)\"></cax-slider>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li\n                class=\"cax-text-action-md-semibold\"\n                [class.active]=\"rowConfiguration === 'sm' && (fontConfiguration === 'sm' || fontConfiguration === 'md')\"\n                [class.disabled]=\"fontConfiguration === 'lg' || fontConfiguration === 'xl'\"\n                (click)=\"updateRowHeight('sm')\"\n            >\n                Small\n            </li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Tableconfiguration } from './tableconfiguration';\n\n@NgModule({\n    imports: [Tableconfiguration],\n    exports: [Tableconfiguration]\n})\nexport class TableconfigurationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { SliderModule } from 'cax-design-system/slider';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n    selector: 'cax-tableconfiguration',\n    templateUrl: './tableconfiguration.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tableconfiguration.scss'],\n    imports: [ButtonModule, CommonModule, SliderModule, FormsModule],\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Tableconfiguration {\n    @Input() fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    @Input() rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    fontSizeOptions = [12, 14, 16, 18];\n\n    @Output() rowHeightChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() fontSizeChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() saveDefault: EventEmitter<any> = new EventEmitter();\n\n    getFontValue() {\n        switch (this.fontConfiguration) {\n            case 'sm':\n                return 12;\n            case 'md':\n                return 14;\n            case 'lg':\n                return 16;\n            case 'xl':\n                return 18;\n        }\n    }\n\n    updateRowHeight(size: 'sm' | 'md' | 'lg' | 'xl') {\n        if (size == 'sm' && (this.fontConfiguration === 'lg' || this.fontConfiguration === 'xl')) {\n            this.rowHeightChange.emit(this.rowConfiguration);\n        } else {\n            this.rowConfiguration = size;\n            this.rowHeightChange.emit(this.rowConfiguration);\n        }\n    }\n\n    emitTableConfiguration() {\n        this.saveDefault.emit({ fontSize: this.fontConfiguration, rowSize: this.rowConfiguration });\n    }\n\n    onSliderChange(event: any) {\n        this.updateFontConfiguration(event.value);\n    }\n\n    onFontLabelClick(value: number) {\n        this.updateFontConfiguration(value);\n    }\n\n    private updateFontConfiguration(newValue: number) {\n        switch (newValue) {\n            case 12:\n                this.fontConfiguration = 'sm';\n                break;\n            case 14:\n                this.fontConfiguration = 'md';\n                break;\n            case 16:\n                this.fontConfiguration = 'lg';\n                if (this.rowConfiguration === 'sm') this.rowConfiguration = 'md';\n                break;\n            case 18:\n                this.fontConfiguration = 'xl';\n                if (this.rowConfiguration === 'sm') this.rowConfiguration = 'md';\n                break;\n            default:\n                this.fontConfiguration = 'md';\n                break;\n        }\n        this.fontSizeChange.emit(this.fontConfiguration);\n    }\n}\n","<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Font Size</span>\n            <cax-button (click)=\"emitTableConfiguration()\" [label]=\"'Save as default'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span class=\"cax-text-body-md-regular\" *ngFor=\"let option of fontSizeOptions\" [class.active]=\"getFontValue() === option\" [style.fontSize]=\"option + 'px'\" (click)=\"onFontLabelClick(option)\" class=\"cursor-pointer\">\n                    {{ option }}px\n                </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <cax-slider [min]=\"12\" [max]=\"18\" [step]=\"2\" [ngModel]=\"getFontValue()\" (onChange)=\"onSliderChange($event)\"></cax-slider>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span class=\"cax-text-action-md-medium\">Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li\n                class=\"cax-text-action-md-semibold\"\n                [class.active]=\"rowConfiguration === 'sm' && (fontConfiguration === 'sm' || fontConfiguration === 'md')\"\n                [class.disabled]=\"fontConfiguration === 'lg' || fontConfiguration === 'xl'\"\n                (click)=\"updateRowHeight('sm')\"\n            >\n                Small\n            </li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li class=\"cax-text-action-md-semibold\" [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Tableconfiguration } from './tableconfiguration';\n\n@NgModule({\n    imports: [Tableconfiguration],\n    exports: [Tableconfiguration]\n})\nexport class TableconfigurationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cax-design-system",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "exports": {
     "./resources/": "./resources/",
     "./package.json": {

package/resources/cax.min.scss

@@ -1,4 +1,4 @@
-@use './styles/colors.scss';@use './styles/variables.scss';@use './styles/typography.scss';@use './styles/fonts.scss';@use './styles/transitions.scss';:root{font-family:'Inter',sans-serif;--font-family:'Inter',sans-serif;--primary-color:var(--primary-500);--cax-focus-ring-color:var(--primary-color);--cax-anchor-gutter:4px;--maskbg:var(--black-20)}@layer cax{*{box-sizing:border-box}.cax-component{font-family:var(--font-family);font-feature-settings:var(--font-feature-settings,normal);font-size:.875rem;font-weight:normal}.cax-component-overlay{background-color:var(--black-20);transition-duration:.2s}// .cax-disabled,// .cax-component:disabled{// opacity:.6;//}.cax-error{font-size:14px;line-height:18px;font-weight:500;color:var(--error-600)}.cax-helper-text{font-size:14px;line-height:18px;font-weight:500;color:var(--neutral-900)}.cax-text-secondary{color:var(--neutral-600)}.cax{font-size:.875rem}.cax-icon{width:14px;height:14px}.cax-link{font-family:var(--font-family);font-feature-settings:var(--font-feature-settings,normal);font-size:1rem;border-radius:6px}.cax-link:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}.cax-component-overlay-enter{animation:cax-component-overlay-enter-animation 150ms forwards}.cax-component-overlay-leave{animation:cax-component-overlay-leave-animation 150ms forwards}@keyframes cax-component-overlay-enter-animation{from{background-color:transparent}to{background-color:var(--maskbg)}}@keyframes cax-component-overlay-leave-animation{from{background-color:var(--maskbg)}to{background-color:transparent}}}@layer cax{// colorpicker styles start .cax-colorpicker-panel{background:var(--neutral-900);border:1px solid var(--neutral-150)}.cax-colorpicker-panel .cax-colorpicker-color-handle,.cax-colorpicker-panel .cax-colorpicker-hue-handle{border-color:var(--white-100)}.cax-colorpicker-overlay-panel{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}.cax-colorpicker .cax-colorpicker-preview.cax-inputtext{width:1.5rem !important;height:1.5rem !important;min-width:1.5rem !important;max-width:1.5rem !important;border:2px solid var(--neutral-150) !important;padding:0 !important;appearance:none;flex:none}.cax-colorpicker-preview:enabled:focus{outline-offset:2px}.cax-colorpicker-preview.cax-inputtext.cax-disabled{opacity:.6}// color picker styles end // checkbox styles start .cax-checkbox{display:inline-flex;vertical-align:bottom;align-items:center;.cax-checkbox-box{display:flex;justify-content:center;align-items:center;background-color:var(--white-100);border:2px solid var(--neutral-300);color:var(--white-100);border-radius:6px;width:20px;height:20px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);outline-color:transparent;.cax-checkbox-icon{transition-duration:.2s;color:var(--white-100);font-size:.875rem}.cax-icon{width:.875rem;height:.875rem}// Sizes &.cax-checkbox-sm{width:20px;height:20px;border-radius:var(--radius-75);.cax-checkbox-icon{font-size:16px}}&.cax-checkbox-md{width:24px;height:24px;border-radius:var(--radius-75);.cax-checkbox-icon{font-size:20px}}&.cax-checkbox-lg{width:28px;height:28px;border-radius:var(--radius-100);.cax-checkbox-icon{font-size:24px}}// Focus State - Outline Logic Moved Here &.cax-focus{outline:0;&.cax-checkbox-sm{outline:0}}}// States &:not(.cax-checkbox-disabled) .cax-checkbox-box:hover{border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}// Focus State Override &:not(.cax-checkbox-disabled) .cax-checkbox-box.cax-focus{border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(12,74,243,0.16)}// Focus State Override for Checked &.cax-checkbox-checked:not(.cax-checkbox-disabled) .cax-checkbox-box.cax-focus{border-color:var(--primary-500)}// Checked State(Applied to root element) &.cax-checkbox-checked{.cax-checkbox-box{background-color:var(--primary-500);border-color:var(--primary-500);color:var(--white-100);&:hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}}}// Highlight(Applied to box element when checked) - NO OUTLINE HERE .cax-checkbox-box.cax-highlight{border-color:var(--primary-500) !important;background:var(--primary-500);&:hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}}// Indeterminate State &.cax-checkbox-indeterminate{.cax-checkbox-box{background-color:var(--primary-500);border-color:var(--primary-500);color:var(--white-100);&:hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}}}// Disabled State &.cax-disabled,&.cax-checkbox-disabled{.cax-checkbox-box{border-color:var(--neutral-200) !important;background-color:var(--neutral-100);cursor:not-allowed;.cax-checkbox-icon{color:var(--neutral-200) !important}}}}// Invalid State - Applied to Host Element cax-checkbox.ng-dirty.ng-invalid{.cax-checkbox-box{border-color:var(--error-600) !important}.cax-checkbox .cax-checkbox-box.cax-highlight{background:var(--error-600) !important;border-color:var(--error-600) !important}// Invalid Hover .cax-checkbox-box:hover{border-color:var(--error-700) !important;box-shadow:0 0 0 8px #cc000014 !important}// Invalid Focus .cax-checkbox-box.cax-focus{border-color:var(--error-700) !important;box-shadow:0 0 0 8px #cc000029}&.cax-checkbox-checked:not(.cax-checkbox-disabled) .cax-checkbox-box.cax-focus{border-color:var(--error-600) !important}// Invalid Checked &.cax-checkbox-checked .cax-checkbox-box{background-color:var(--error-600) !important;border-color:var(--error-600) !important;&:hover{background-color:var(--error-600) !important;// Consistent hover darken border-color:var(--error-600) !important}}// Invalid Indeterminate &.cax-checkbox-indeterminate .cax-checkbox-box{background-color:var(--error-600) !important;border-color:var(--error-600) !important;&:hover{background-color:var(--error-600) !important;border-color:var(--error-600) !important}}}// Label Styling .cax-checkbox-label{color:var(--neutral-900);font-weight:600;text-align:left;cursor:pointer;&.cax-checkbox-label-sm{font-size:12px;line-height:16px !important;margin-left:var(--space-100)}&.cax-checkbox-label-md{font-size:14px;line-height:20px !important;margin-left:var(--space-100)}&.cax-checkbox-label-lg{font-size:16px;line-height:24px !important;margin-left:var(--space-100)}&.cax-disabled{color:var(--neutral-200)}}// Filled Input Variant .cax-input-filled .cax-checkbox,.cax-checkbox.cax-variant-filled{.cax-checkbox-box.cax-highlight{background:var(--primary-500);&:hover{background:var(--primary-500);// Consistent hover}}}// checkbox styles end // editor styles start .cax-editor-container{border-radius:8px;.cax-editor-toolbar{background:var(--neutral-100);border-top-right-radius:8px;border-top-left-radius:8px;&.ql-snow{border:1px solid var(--neutral-300);// border-bottom:0 !important;.ql-stroke{stroke:var(--neutral-900) !important;stroke-width:1.3px !important}.ql-fill{fill:var(--neutral-600)}.ql-picker{.ql-picker-label{border:0 none;color:var(--neutral-900);&:hover{color:var(--neutral-900) !important;background:#16181d14 !important;border-radius:4px;.ql-stroke{stroke:var(--neutral-900) !important}.ql-fill{fill:var(--neutral-900) !important}}}&.ql-expanded{.ql-picker-label{color:var(--neutral-900);border:0 !important;.ql-stroke{stroke:var(--neutral-900) !important}.ql-fill{fill:var(--neutral-900) !important}}.ql-picker-options{border:1px solid var(--neutral-300) !important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);border-radius:6px;padding:.25rem .25rem;.ql-picker-item{&:hover{color:var(--neutral-900) !important;background:#16181d14;border-radius:4px}}}&:not(.ql-icon-picker) .ql-picker-item{padding:.5rem .75rem}}}}}.ql-snow.ql-toolbar{font-family:'Inter',sans-serif !important;button,.ql-toolbar button{padding:2px !important}button:hover,button:focus{color:var(--neutral-900) !important;background:#16181d14 !important;border-radius:4px;transition:all var(--fill-standard);.ql-stroke{stroke:var(--neutral-900) !important}.ql-fill{fill:var(--neutral-900) !important}}button.ql-active,.ql-picker-label.ql-active,.ql-picker-item.ql-selected{color:var(--primary-500) !important;background:#0c4af329 !important;border-radius:4px;transition:all var(--fill-standard);.ql-stroke{stroke:var(--primary-500) !important}.ql-fill{fill:var(--primary-500) !important}.ql-picker-label{color:var(--primary-500) !important;background:#0c4af329 !important;border-radius:4px}}}.cax-editor-content{border-bottom-right-radius:8px;border-bottom-left-radius:8px;display:flex;flex-direction:column;height:100%;transition:all var(--fill-standard);&.ql-snow{border:1px solid var(--neutral-300)}.ql-editor{background:var(--white-100);color:var(--neutral-900);border-bottom-right-radius:8px;border-bottom-left-radius:8px;flex:1;transition:all var(--fill-standard)}&.ql-snow{border:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.ql-editor:focus{outline:0}&:has(.ql-editor:focus){border:2px solid var(--primary-300) !important}}.ql-editor.ql-blank::before{font-style:normal !important;font-size:14px !important;color:var(--neutral-500) !important;font-weight:500 !important;font-family:inherit !important;letter-spacing:1.6%}.ql-snow.ql-toolbar button{width:24px !important;height:24px !important;color:var(--neutral-900)}.ql-formats{margin-right:0 !important;button,span{margin-right:12px !important}}.ql-picker-options span{margin-right:0 !important;border-radius:4px !important}.cax-editor-disabled .ql-editor{cursor:not-allowed}&.cax-editor-disabled{.cax-editor-toolbar{.ql-stroke{stroke:var(--neutral-200) !important}.ql-fill{fill:var(--neutral-200) !important}.ql-picker-label{color:var(--neutral-200) !important}button{color:var(--neutral-200) !important}}.cax-editor-content .ql-editor{background:var(--neutral-100) !important;color:var(--neutral-200) !important;&.ql-blank::before{color:var(--neutral-200) !important}}}}// editor styles end // toggle switch styles start .cax-toggleswitch-track{display:block;height:24px;width:44px;border-radius:9999px;cursor:pointer;transition:background-color var(--fill-standard),border-color var(--fill-standard),outline var(--fill-standard);box-shadow:var(--fill-standard);position:relative;background-color:var(--neutral-100);border:2px solid var(--neutral-300)}// Default Unchecked Hover - Track Border only .cax-toggleswitchmaindiv:hover .cax-toggleswitch-track:not(:has(~ .cax-toggleswitch:checked)){border-color:var(--neutral-500)}// Default Unchecked Focus - Track Border only .cax-toggleswitch-track.cax-focus{border-color:var(--neutral-500);outline:0}// Checked State .cax-toggleswitch:checked{~ .cax-toggleswitch-track{background-color:var(--primary-500);border:2px solid var(--primary-500)}// Checked Hover - Track &:hover ~ .cax-toggleswitch-track,~ .cax-toggleswitchmaindiv:hover .cax-toggleswitch-track{background-color:var(--primary-500) !important;border-color:var(--primary-500) !important}}.cax-toggle-thumb{position:absolute;display:flex;cursor:pointer;align-items:center;justify-content:center;height:16px;width:16px;top:50%;left:8px;transform:translateY(-50%);border-radius:50%;background-color:var(--neutral-300);transition:transform var(--fill-standard),background-color var(--fill-standard),width var(--fill-standard),height var(--fill-standard),left var(--fill-standard)}// Thumb Hover Halo(Unchecked & Checked) .cax-toggleswitchmaindiv:hover .cax-toggle-thumb{outline:14px solid rgba(22,24,29,0.08) !important}// Thumb Focus Halo(Unchecked & Checked) .cax-toggle-thumb.cax-focus{outline:14px solid rgba(12,74,243,0.16)}// Thumb hover/focus state updates for color .cax-toggleswitchmaindiv:hover .cax-toggleswitch:not(:checked) ~ .cax-toggle-thumb{background-color:var(--neutral-500)}.cax-toggle-thumb.cax-focus:not(.cax-toggle-thumb-checked){background-color:var(--neutral-500)}.cax-toggleswitch:checked ~ .cax-toggle-thumb{background-color:var(--white-100)}.cax-toggleswitch-size-sm{gap:6px;.cax-toggleswitch-track{height:24px;width:44px}.cax-toggle-thumb{height:12px;width:12px}.cax-toggleswitch:checked ~ .cax-toggle-thumb{height:16px;width:16px;left:calc(100% - 20px)}.cax-toggle-label{font-size:12px;font-weight:600;line-height:16px}}.cax-toggleswitch-size-md{gap:6px;.cax-toggleswitch-track{height:28px;width:48px}.cax-toggle-thumb{height:14px;width:14px}.cax-toggleswitch:checked ~ .cax-toggle-thumb{height:20px;width:20px;left:calc(100% - 24px)}.cax-toggle-label{font-size:14px;font-weight:600;line-height:20px}}.cax-toggleswitch-size-lg{gap:6px;.cax-toggleswitch-track{height:32px;width:52px}.cax-toggle-thumb{height:16px;width:16px}.cax-toggleswitch:checked ~ .cax-toggle-thumb{height:24px;width:24px;left:calc(100% - 28px)}.cax-toggle-label{font-size:16px;font-weight:600;line-height:24px}}// Disabled State .cax-toggleswitchmaindiv-disabled{pointer-events:none;.cax-toggleswitch-track{background-color:var(--neutral-100) !important;border-color:var(--neutral-200) !important}.cax-toggle-thumb{background-color:var(--neutral-200) !important;box-shadow:none !important;// No halo on disabled}.cax-toggleswitch:checked ~ .cax-toggle-thumb{background-color:var(--neutral-200) !important}}.cax-toggleswitch-container-disabled{.cax-toggle-label{color:var(--neutral-200) !important}}.cax-toggle-label{font-weight:600;color:var(--neutral-900);cursor:pointer}// toggle switch styles end // radio button styles start .cax-radiobutton{display:inline-flex;align-items:center;.cax-radiobutton-box{display:flex;justify-content:center;align-items:center;border:2px solid var(--neutral-300);background:transparent;border-radius:50%;transition:background-color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline var(--fill-standard);box-sizing:border-box;.cax-radiobutton-icon{background-color:var(--primary-500);border-radius:50%;transition:all var(--fill-standard);transform:scale(0)}&:not(.cax-disabled):not(.cax-highlight):hover{border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}&.cax-focus:not(.cax-highlight){border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(12,74,243,0.16)}&.cax-highlight{border-color:var(--primary-500);background:transparent;.cax-radiobutton-icon{transform:scale(1)}&:not(.cax-disabled):hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}&.cax-focus{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(12,74,243,0.16)}}}}cax-radiobutton.ng-dirty.ng-invalid>.cax-radiobutton>.cax-radiobutton-box{border-color:var(--error-600)}.cax-radiobutton-label{font-family:'Inter',sans-serif;font-weight:600;cursor:pointer;color:var(--neutral-900);line-height:1.5;&.cax-disabled{color:var(--neutral-200)}}.cax-radiobutton-sm{width:20px;height:20px;.cax-radiobutton-box{width:20px;height:20px;border-radius:50%;.cax-radiobutton-icon{width:11px;height:11px}}}.cax-radiobutton-label-sm{font-size:12px;line-height:16px;letter-spacing:.3px;margin-left:8px}.cax-radiobutton-md{width:24px;height:24px;.cax-radiobutton-box{width:24px;height:24px;border-radius:50%;.cax-radiobutton-icon{width:14px;height:14px}}}.cax-radiobutton-label-md{font-size:14px;line-height:20px;letter-spacing:.2px;margin-left:8px}.cax-radiobutton-lg{width:28px;height:28px;.cax-radiobutton-box{width:28px;height:28px;border-radius:50%;.cax-radiobutton-icon{width:18px;height:18px}}}.cax-radiobutton-label-lg{font-size:16px;line-height:24px;letter-spacing:.1px;margin-left:8px}.cax-radiobutton-label:has(.cax-disabled){color:var(--neutral-300) !important}.cax-radiobutton-disabled{pointer-events:none;.cax-radiobutton-box{border-color:var(--neutral-300) !important;&.cax-highlight{border-color:var(--neutral-300) !important;background-color:transparent !important}.cax-radiobutton-icon{background-color:var(--neutral-200) !important}}}// radio button styles end // button styles start .cax-button{display:inline-flex;cursor:pointer;user-select:none;gap:6px;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;color:var(--white-100);background:var(--primary-500);border:1px solid var(--primary-500);padding:8px 12px;min-width:72px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline var(--fill-standard);border-radius:var(--radius-100);outline-color:transparent;--cax-button-loader-stroke:var(--white-100);--cax-button-loader-bg:var(--white-30);.cax-progress-spinner{transition:transform .1s;.cax-progress-spinner-circle{stroke:var(--cax-button-loader-stroke) !important}.cax-progress-spinner-bg{stroke:var(--cax-button-loader-bg) !important}}&:focus-visible{outline:2px solid var(--primary-300)}&:not(:disabled):hover{background:var(--primary-700);color:var(--white-100);border-color:var(--primary-700)}&:not(:disabled):active{background:var(--primary-700);color:var(--white-100);border-color:var(--primary-700)}&:disabled{pointer-events:none;cursor:default;background:var(--neutral-100) !important;color:var(--neutral-200) !important;border-color:var(--neutral-100) !important}// Outlined &.cax-button-outlined{background-color:transparent;color:var(--primary-500);border-color:var(--primary-500);border-width:1.5px;--cax-button-loader-stroke:var(--primary-500);--cax-button-loader-bg:var(--primary-75);&:not(:disabled):hover{background:var(--primary-75);color:var(--primary-700);border-color:var(--primary-700)}&:not(:disabled):active{background:var(--primary-75);color:var(--primary-700);border-color:var(--primary-700)}&:disabled{pointer-events:none;cursor:default;background:transparent !important}&.cax-button-plain{color:var(--neutral-300);border-color:var(--primary-700);&:not(:disabled):hover{background:var(--white-10);color:var(--primary-700)}&:not(:disabled):active{background:var(--white-20);color:var(--primary-700)}}}// Text &.cax-button-text{background-color:transparent;color:var(--primary-500);border-color:transparent;&:not(:disabled):hover{background:var(--primary-25);color:var(--primary-500);border-color:transparent}&:not(:disabled):active{background:transparent;color:var(--primary-500);border-color:transparent}&.cax-button-plain{color:var(--neutral-300);&:not(:disabled):hover{background:var(--white-10);color:var(--neutral-300)}&:not(:disabled):active{background:var(--white-20);color:var(--neutral-300)}}}// Link &.cax-button-link{color:var(--primary-500);background:transparent;border:transparent;.cax-button-label{text-decoration:underline}&:not(:disabled):hover{background:var(--blue-75);color:var(--primary-700);border:transparent;.cax-button-label{text-decoration:underline}}&:not(:disabled):active{background:var(--blue-75);color:var(--primary-700);border-color:transparent}&:disabled{pointer-events:none;cursor:default;background:transparent !important}--cax-button-loader-stroke:var(--primary-500);--cax-button-loader-bg:var(--primary-75)}// Icons .cax-button-icon{font-size:16px}.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transition:transform var(--fill-standard)}.cax-button-label{transition-duration:150ms;font-family:var(--font-family);font-size:16px;font-weight:500}&.cax-button-loading-label-only .cax-button-label{margin-left:var(--space-100)}&.cax-button-loading-label-only .cax-button-loading-icon{margin-right:0}// Sizes &.cax-button-sm{height:32px !important;padding:8px 12px !important;.cax-button-label{font-size:12px;font-weight:600}.cax-button-icon,.cax-button-icon-center{font-size:16px !important}.cax-button-icon-left,.cax-button-icon-right,.cax-button-icon-bottom,.cax-button-icon-top{font-size:16px !important}.cax-progress-spinner{width:16px !important;height:16px !important}&:active{.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transform:scale(0.8333);transform-origin:center}}}&.cax-button-md{height:36px !important;padding:8px 12px !important;.cax-button-label{font-size:14px;font-weight:600}.cax-button-icon,.cax-button-icon-center{font-size:20px !important}.cax-button-icon-left,.cax-button-icon-right,.cax-button-icon-bottom,.cax-button-icon-top{font-size:20px !important}.cax-progress-spinner{width:20px !important;height:20px !important}&:active{.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transform:scale(0.8571);transform-origin:center}}}&.cax-button-lg{height:40px !important;padding:8px 12px !important;.cax-button-label{font-size:16px;font-weight:600}.cax-button-icon,.cax-button-icon-center{font-size:24px !important}.cax-button-icon-left,.cax-button-icon-right,.cax-button-icon-bottom,.cax-button-icon-top{font-size:24px !important}.cax-progress-spinner{width:24px !important;height:24px !important}&:active{.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transform:scale(0.875);transform-origin:center}}}// Shapes &.cax-button-rounded{border-radius:50px}&.cax-button-raised{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}// Icon Only &.cax-button-icon-only{justify-content:center;min-width:auto;&.cax-button-rounded{border-radius:50%}}&.cax-button-sm.cax-button-icon-only{width:32px;padding:0 !important}&.cax-button-md.cax-button-icon-only{width:36px;padding:0 !important}&.cax-button-lg.cax-button-icon-only{width:40px;padding:0 !important}}// Severities .cax-button.cax-button-secondary{color:var(--neutral-900);background:var(--neutral-100);border:1px solid var(--neutral-100);--cax-button-loader-stroke:var(--neutral-900);--cax-button-loader-bg:var(--neutral-300);&:not(:disabled):hover{background:var(--neutral-200);color:var(--neutral-900);border-color:var(--neutral-200)}&:not(:disabled):active{background:var(--neutral-200);color:var(--neutral-900);border-color:var(--neutral-200)}&.cax-button-outlined{background-color:transparent;color:var(--neutral-900);border:1.5px solid var(--neutral-100);--cax-button-loader-bg:var(--neutral-100);&:not(:disabled):hover{background:var(--neutral-100);border:1.5px solid var(--neutral-200)}&:not(:disabled):active{background:var(--neutral-100);border:1.5px solid var(--neutral-200)}}&.cax-button-link{background:transparent;border:transparent;&:not(:disabled):hover{background:var(--neutral-100);border:transparent}&:not(:disabled):active{background:var(--neutral-100);border-color:transparent}}&.cax-button-text{background-color:transparent;color:var(--neutral-900);border-color:transparent;&:not(:disabled):hover{background-color:var(--neutral-25)}&:not(:disabled):active{background-color:var(--neutral-50)}}}.cax-button.cax-button-info{color:var(--white-100);background:var(--logo-blue-500);border:1px solid var(--logo-blue-500);&:not(:disabled):hover{background:var(--blue-400);border-color:var(--blue-400)}&:not(:disabled):active{background:var(--blue-500);border-color:var(--blue-500)}&.cax-button-outlined{background-color:transparent;color:var(--logo-blue-500);border-color:var(--logo-blue-500);--cax-button-loader-stroke:var(--logo-blue-500);--cax-button-loader-bg:var(--blue-25);&:not(:disabled):hover{background:var(--blue-25)}}&.cax-button-text{color:var(--logo-blue-500);&:not(:disabled):hover{background:var(--blue-25)}}}.cax-button.cax-button-success{color:var(--white-100);background:var(--success-600);border:1px solid var(--success-600);&:not(:disabled):hover{background:var(--success-700);border-color:var(--success-700)}&:not(:disabled):active{background:var(--success-700);border-color:var(--success-700)}&.cax-button-outlined{background-color:transparent;color:var(--success-600);border:1.5px solid var(--success-600);--cax-button-loader-stroke:var(--success-600);--cax-button-loader-bg:var(--success-75);&:not(:disabled):hover,&:not(:disabled):active{background:var(--success-75);color:var(--success-700);border-color:var(--success-700)}}&.cax-button-link{background-color:transparent;color:var(--success-600);border:transparent;&:not(:disabled):hover,&:not(:disabled):active{background:var(--success-75);color:var(--success-700)}}&.cax-button-text{color:var(--success-500);&:not(:disabled):hover{background:var(--success-25)}}}.cax-button.cax-button-warning{color:var(--white-100);background:var(--warning-600);border:1px solid var(--warning-600);&:not(:disabled):hover{background:var(--warning-700);border-color:var(--warning-700)}&:not(:disabled):active{background:var(--warning-700);border-color:var(--warning-700)}&.cax-button-outlined{background-color:transparent;color:var(--warning-600);border:1.5px solid var(--warning-600);--cax-button-loader-stroke:var(--warning-600);--cax-button-loader-bg:var(--warning-75);&:not(:disabled):hover,&:not(:disabled):active{background:var(--warning-75);color:var(--warning-700);border-color:var(--warning-700)}}&.cax-button-link{background-color:transparent;color:var(--warning-600);border:transparent;&:not(:disabled):hover,&:not(:disabled):active{background:var(--warning-75);color:var(--warning-700)}}&.cax-button-text{color:var(--warning-500);&:not(:disabled):hover{background:var(--warning-25)}}}.cax-button.cax-button-help{color:var(--white-100);background:var(--purple-500);border:1px solid var(--purple-500);&:not(:disabled):hover{background:var(--purple-700);border-color:var(--purple-700)}&:not(:disabled):active{background:var(--purple-500);border-color:var(--purple-500)}&.cax-button-outlined{background-color:transparent;color:var(--purple-500);border-color:var(--purple-500);--cax-button-loader-stroke:var(--purple-500);--cax-button-loader-bg:var(--purple-25);&:not(:disabled):hover{background:var(--purple-25)}}&.cax-button-text{color:var(--purple-500);&:not(:disabled):hover{background:var(--purple-25)}}}.cax-button.cax-button-danger{color:var(--white-100);background:var(--error-600);border:1px solid var(--error-600);&:not(:disabled):hover{background:var(--error-700);border-color:var(--error-700)}&:not(:disabled):active{background:var(--error-700);border-color:var(--error-700)}&.cax-button-outlined{background-color:transparent;color:var(--error-600);border:1.5px solid var(--error-600);--cax-button-loader-stroke:var(--error-600);--cax-button-loader-bg:var(--error-75);&:not(:disabled):hover,&:not(:disabled):active{background:var(--error-75);color:var(--error-700);border-color:var(--error-700)}}&.cax-button-link{background-color:transparent;color:var(--error-600);border:transparent;&:not(:disabled):hover,&:not(:disabled):active{background:var(--error-75);color:var(--error-700)}}&.cax-button-text{color:var(--error-500);&:not(:disabled):hover{background:var(--error-25)}}}.cax-button.cax-button-contrast{color:var(--black-100);background:var(--white-100);border:1px solid var(--white-100);--cax-button-loader-stroke:var(--black-100);--cax-button-loader-bg:var(--black-10);&:not(:disabled):hover{background:var(--neutral-50);color:var(--black-100);border-color:var(--neutral-50)}&:not(:disabled):active{background:var(--neutral-100);border-color:var(--neutral-100)}&.cax-button-outlined{background-color:transparent;color:var(--white-100);border-color:var(--white-100);--cax-button-loader-stroke:var(--white-100);--cax-button-loader-bg:var(--white-10);&:not(:disabled):hover{background:var(--white-10)}}&.cax-button-text{color:var(--white-100);&:not(:disabled):hover{background:var(--white-10)}}}.cax-button-group{display:inline-flex;.cax-button{margin:0}.cax-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.cax-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}}// button styles end // speed dial styles start .cax-speeddial{position:static;display:flex;gap:7px;&.cax-speeddial-up{flex-direction:column-reverse;align-items:center}&.cax-speeddial-down{flex-direction:column;align-items:center}&.cax-speeddial-left{flex-direction:row-reverse;align-items:center}&.cax-speeddial-right{flex-direction:row;align-items:center}.cax-speeddial-button{&.cax-button.cax-button-icon-only{width:40px !important;height:40px !important;.cax-button-icon{font-size:20px !important}.cax-icon{width:20px;height:20px}}&.cax-speeddial-rotate{transition:transform var(--slide-default),background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard)}}.cax-speeddial-list{outline:0 none}.cax-speeddial-item{.cax-speeddial-action:focus-visible{outline:2px solid var(--primary-300)}}.cax-speeddial-action{width:40px;height:40px;background:var(--neutral-100);color:var(--neutral-900);&:hover{background:var(--neutral-150)}}// Sizes &.cax-speeddial-sm{.cax-speeddial-button.cax-button.cax-button-icon-only{width:32px !important;height:32px !important;.cax-button-icon{font-size:16px !important}.cax-icon{width:16px !important;height:16px !important}.cax-speeddial-button-icon{font-size:16px !important}}.cax-speeddial-action{width:32px !important;height:32px !important;.cax-speeddial-action-icon{font-size:16px !important}}}&.cax-speeddial-md{.cax-speeddial-button.cax-button.cax-button-icon-only{width:36px !important;height:36px !important;.cax-button-icon{font-size:20px !important}.cax-icon{width:20px !important;height:20px !important}.cax-speeddial-button-icon{font-size:20px !important}}.cax-speeddial-action{width:36px !important;height:36px !important;.cax-speeddial-action-icon{font-size:20px !important}}}&.cax-speeddial-lg{.cax-speeddial-button.cax-button.cax-button-icon-only{width:40px !important;height:40px !important;.cax-button-icon{font-size:24px !important}.cax-icon{width:24px !important;height:24px !important}.cax-speeddial-button-icon{font-size:24px !important}}.cax-speeddial-action{width:40px !important;height:40px !important;.cax-speeddial-action-icon{font-size:24px !important}}}// Circle types &.cax-speeddial-circle,&.cax-speeddial-semi-circle,&.cax-speeddial-quarter-circle{.cax-speeddial-item{margin:0}}}.cax-speeddial-mask{background-color:var(--black-40)}// speed dial styles end // split button styles start .cax-splitbutton{display:inline-flex;position:relative;border-radius:var(--radius-100);.cax-splitbutton-defaultbutton{border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--white-100) !important;gap:6px}.cax-splitbutton-menubutton{border-top-left-radius:0;border-bottom-left-radius:0}.cax-splitbutton-defaultbutton,.cax-splitbutton-menubutton{>*{transition:transform var(--fill-standard)}&.cax-button-sm:active>*{transform:scale(0.8333);transform-origin:center}&.cax-button-md:active>*{transform:scale(0.8571);transform-origin:center}&.cax-button-lg:active>*{transform:scale(0.875);transform-origin:center}}.cax-splitbutton-divider{display:none}&.cax-button-rounded{border-radius:var(--radius-400);>.cax-button{border-radius:var(--radius-400)}}&.cax-button-raised{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}}.cax-button-sm.cax-splitbutton-menubutton{i{font-size:16px}}.cax-button-md.cax-splitbutton-menubutton{i{font-size:20px}}.cax-button-lg.cax-splitbutton-menubutton{i{font-size:24px}}.cax-tieredmenu{display:inline-block;min-width:150px;padding:8px;border-radius:var(--radius-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.cax-tieredmenu-overlay{background:var(--white-100);box-shadow:0 3px 10px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.1)}.cax-tieredmenu-root-list{outline:0 none}.cax-submenu-list{padding:.25rem;background:var(--white-100);border:1px solid var(--neutral-200);box-shadow:0 4px 6px -1px var(--black-10),0 2px 4px -2px var(--black-10);border-radius:6px}.cax-menuitem{>.cax-menuitem-content{color:var(--white-100);transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);border-radius:4px;.cax-menuitem-link{color:var(--neutral-900);padding:.5rem .75rem;user-select:none;display:flex;align-items:center;height:32px;.cax-menuitem-text{color:inherit}.cax-menuitem-icon{color:inherit;margin-right:.5rem;font-size:16px}.cax-submenu-icon{color:inherit;margin-left:auto}}}&.cax-highlight{>.cax-menuitem-content{color:var(--neutral-900);background:var(--neutral-75);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--neutral-900)}}}&.cax-focus>.cax-menuitem-content{background:var(--neutral-100)}}&:not(.cax-highlight):not(.cax-disabled){&.cax-focus>.cax-menuitem-content,>.cax-menuitem-content:hover{color:var(--neutral-900);background:var(--neutral-75);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--neutral-900)}}}}}.cax-menuitem-separator{border-top:1px solid var(--neutral-300);margin:2px 0}.cax-submenu-icon{font-size:20px;&.cax-icon{width:20px;height:20px}}}// split button styles end // badge styles start .cax-badge{background:var(--primary-500);color:var(--white-100);font-weight:500;font-size:12px;min-width:32px;height:32px;line-height:32px;display:flex;align-items:center;justify-content:center}.cax-badge.cax-badge-primary{background-color:var(--primary-500);color:var(--white-100)}.cax-badge.cax-badge-secondary{background-color:var(--neutral-75);color:var(--neutral-900)}.cax-badge.cax-badge-info{background-color:var(--neutral-900);color:var(--white-100)}.cax-badge.cax-badge-success{background-color:var(--success-500);color:var(--white-100)}.cax-badge.cax-badge-warning{background-color:var(--warning-500);color:var(--white-100)}.cax-badge.cax-badge-danger{background-color:var(--error-600);color:var(--white-100)}.cax-badge.cax-badge-xs{font-size:10px;min-width:20px;height:20px;font-weight:500;line-height:20px}.cax-badge.cax-badge-sm{font-size:12px;min-width:24px;height:24px;font-weight:500;line-height:24px}.cax-badge.cax-badge-md{font-size:12px;min-width:32px;height:32px;font-weight:500;line-height:32px}.cax-badge.cax-badge-lg{font-size:12px;min-width:40px;height:40px;font-weight:500;line-height:40px}.cax-button .cax-badge{margin-left:4px}// badge styles end // avatar styles start .cax-avatar{background-color:var(--primary-500);color:var(--white-100)}.cax-avatar.cax-avatar-image{background-color:transparent}.cax-avatar.cax-avatar-xs{width:20px;height:20px;border-radius:4px;font-size:10px;line-height:12px}.cax-avatar.cax-avatar-xs .cax-avatar-icon{font-size:12px}.cax-avatar.cax-avatar-sm{width:28px;height:28px;font-size:12px;line-height:16px;border-radius:6px}.cax-avatar.cax-avatar-sm .cax-avatar-icon{font-size:16px}.cax-avatar.cax-avatar-md{width:36px;height:36px;font-size:14px;line-height:20px;border-radius:8px}.cax-avatar.cax-avatar-md .cax-avatar-icon{font-size:20px}.cax-avatar.cax-avatar-lg{width:48px;height:48px;font-size:20px;line-height:28px;border-radius:12px}.cax-avatar.cax-avatar-lg .cax-avatar-icon{font-size:24px}.cax-avatar.cax-avatar-xl{width:56px;height:56px;font-size:24px;line-height:32px;border-radius:12px}.cax-avatar.cax-avatar-xl .cax-avatar-icon{font-size:32px}.cax-avatar .cax-badge{background-color:var(--error-600) !important;color:var(--white-100) !important}.cax-avatar.cax-avatar-xs .cax-badge,.cax-avatar.cax-avatar-sm .cax-badge{top:auto !important;right:auto !important}.cax-avatar-group .cax-avatar{border:1px solid var(--white-100)}// avatar styles end // tag styles start .cax-tag{background:var(--primary-75);color:var(--neutral-900);font-weight:600;column-gap:4px;font-size:10px;line-height:12px;padding:4px 8px;border-radius:8px;.cax-tag-remove-icon{cursor:pointer;font-size:10px}.cax-tag-image{border-radius:var(--radius-rounded,50%);object-fit:cover;flex-shrink:0}}.cax-tag.cax-tag-blue{background:var(--primary-75)}.cax-tag.cax-tag-grey{background:var(--neutral-50)}.cax-tag.cax-tag-green{background:var(--success-75)}.cax-tag.cax-tag-orange{background:var(--warning-75)}.cax-tag.cax-tag-red{background:var(--error-75)}.cax-tag.cax-tag-pink{background:var(--pink-50)}.cax-tag.cax-tag-purple{background:var(--purple-50)}.cax-tag.cax-tag-teal{background:var(--teal-50)}.cax-tag.cax-tag-cyan{background:var(--cyan-50)}.cax-tag.cax-tag-olive{background:var(--olive-50)}.cax-tag.cax-tag-azure{background:var(--azure-50)}.cax-tag.cax-tag-magenta{background:var(--magenta-50)}.cax-tag.cax-tag-rounded{border-radius:100000px}// Sizes .cax-tag.cax-tag-sm{font-size:10px;padding:4px 8px;line-height:12px;.cax-tag-iconholder{font-size:12px}.cax-tag-remove-icon{font-size:12px}.cax-tag-image{width:12px;height:12px}&.cax-tag-image{padding-left:4px}}.cax-tag.cax-tag-md{font-size:12px;padding:6px 10px;line-height:16px;.cax-tag-iconholder{font-size:16px}.cax-tag-remove-icon{font-size:16px}.cax-tag-image{width:16px;height:16px}&.cax-tag-image{padding-left:6px}}.cax-tag.cax-tag-lg{font-size:14px;padding:6px 12px;line-height:20px;.cax-tag-iconholder{font-size:18px}.cax-tag-remove-icon{font-size:18px}.cax-tag-image{width:20px;height:20px}&.cax-tag-image{padding-left:6px}}// tag styles end // chip styles start .cax-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;font-size:14px;font-weight:600;border-radius:50px;background-color:var(--primary-75);color:var(--primary-500);border:1px solid var(--primary-500);cursor:pointer;transition:all .2s ease;white-space:nowrap;outline:0;transition:all var(--fill-standard);&:hover{background-color:var(--primary-125)}&:focus-visible{outline:2px solid var(--primary-300)}}.cax-chip .cax-chip-icon,.cax-chip .cax-chip-close,.cax-chip .cax-chip-remove-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;line-height:1;flex-shrink:0}.cax-chip .cax-chip-close{cursor:pointer;opacity:.7;&:hover{opacity:1}}.cax-chip .cax-chip-remove-icon:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}.cax-chip .cax-chip-remove-icon:focus{outline:0 none}.cax-chip .cax-chip-text{margin-top:0;margin-bottom:0}.cax-chip:has(.cax-chip-remove-icon){padding-right:.5rem}.cax-chip-remove-icon{cursor:pointer;z-index:10}.cax-chip img{border-radius:50%}// Size variants .cax-chip.cax-chip-sm{padding:4px 6px;font-size:12px;font-weight:600;line-height:16px;.cax-chip-icon,.cax-chip-close,.cax-chip-remove-icon{width:14px;height:14px;font-size:14px}img{width:14px;height:14px}}.cax-chip.cax-chip-md{padding:6px 8px;font-size:14px;font-weight:600;line-height:20px;.cax-chip-icon,.cax-chip-remove-icon,.cax-chip-close{width:16px;height:16px;font-size:16px}img{width:16px;height:16px}}.cax-chip.cax-chip-lg{padding:6px 12px;font-size:16px;font-weight:600;line-height:24px;.cax-chip-icon,.cax-chip-close,.cax-chip-remove-icon{width:18px;height:18px;font-size:18px}img{width:18px;height:18px}}// Variant styles .cax-chip.cax-chip-filled{background-color:var(--primary-500);color:var(--white-100);border:0}.cax-chip.cax-chip-outlined{background-color:transparent;border:1px solid var(--primary-500);color:var(--primary-500)}// Disabled state .cax-chip.cax-chip-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.cax-chip-blue{background-color:var(--primary-75);color:var(--primary-500);border:1px solid var(--primary-500);&:hover{background-color:var(--primary-125)}}.cax-chip-red{background-color:var(--error-75);color:var(--error-600);border:1px solid var(--error-600);&:hover{background-color:var(--error-125)}}.cax-chip-green{background-color:var(--success-75);color:var(--success-600);border:1px solid var(--success-600);&:hover{background-color:var(--success-125)}}.cax-chip-purple{background-color:var(--purple-50);color:var(--purple-600);border:1px solid var(--purple-600);&:hover{background-color:var(--purple-100)}}.cax-chip-orange{background-color:var(--orange-75);color:var(--orange-600);border:1px solid var(--orange-600);&:hover{background-color:var(--orange-125)}}.cax-chip-grey{background-color:var(--neutral-100);color:var(--neutral-900);border:1px solid var(--neutral-300);&:hover{background-color:var(--neutral-125)}}.cax-chip-pink{background-color:var(--pink-50);color:var(--pink-600);border:1px solid var(--pink-600);&:hover{background-color:var(--pink-100)}}.cax-chip-teal{background-color:var(--teal-50);color:var(--teal-600);border:1px solid var(--teal-600);&:hover{background-color:var(--teal-100)}}.cax-chip-cyan{background-color:var(--cyan-50);color:var(--cyan-600);border:1px solid var(--cyan-600);&:hover{background-color:var(--cyan-100)}}.cax-chip-olive{background-color:var(--olive-50);color:var(--olive-600);border:1px solid var(--olive-600);&:hover{background-color:var(--olive-100)}}.cax-chip-azure{background-color:var(--azure-50);color:var(--azure-600);border:1px solid var(--azure-600);&:hover{background-color:var(--azure-100)}}.cax-chip-magenta{background-color:var(--magenta-50);color:var(--magenta-600);border:1px solid var(--magenta-600);&:hover{background-color:var(--magenta-100)}}// chip styles end //message styles start .cax-message{border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 22px 0 #0000002e,0 0 0 1px #00000029;background:var(--white-100);min-width:200px;max-width:500px;width:fit-content;margin-bottom:8px;transition:all var(--fade-standard);&.cax-message-success{.cax-message-icon{span{color:var(--success-600)}}}&.cax-message-warning{.cax-message-icon{span{color:var(--warning-600)}}}&.cax-message-danger{.cax-message-icon{span{color:var(--error-600)}}}.cax-message-close{width:24px;height:24px;border-radius:8px;background:transparent;transition:background-color var(--fade-standard),color var(--fade-standard),border-color var(--fade-standard),box-shadow var(--fade-standard),outline-color var(--fade-standard);i{font-size:20px}}.cax-message-icon{span{font-size:24px}}.cax-message-box{display:flex;flex-direction:column;justify-content:center;gap:4px}.cax-message-summary{font-weight:600;font-size:16px;line-height:24px}.cax-message-detail{line-height:20px;font-size:14px;font-weight:400;color:var(--neutral-500)}.cax-message-button-wrapper{span{color:var(--primary-500);&:hover{color:var(--primary-700);text-decoration:underline}}}}// message styles end // toast styles start .cax-toast{opacity:1;.cax-toast-message{border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 22px 0 #0000002e,0 0 0 1px #00000029;background:var(--white-100);min-width:200px;max-width:500px;width:fit-content;margin-bottom:-8px;transition:all var(--fade-standard);.cax-toast-message-content{display:flex;gap:12px;&.cax-toast-message-content-center{align-items:center}.cax-toast-message-text{display:flex;flex-direction:column;gap:4px}.cax-toast-summary{font-weight:600;font-size:16px;line-height:24px}.cax-toast-detail{font-size:14px;font-weight:400;line-height:20px;color:var(--neutral-500)}}.cax-toast-icon-close{width:24px;height:24px;margin-left:4px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:transparent;transition:background-color var(--fade-standard),color var(--fade-standard),border-color var(--fade-standard),box-shadow var(--fade-standard),outline-color var(--fade-standard);i{font-size:20px}}&.cax-toast-message-success{.message-icon{color:var(--success-600)}}.cax-toast-action-container{display:flex;align-items:center;margin-top:8px;.cax-toast-action{font-weight:600;font-size:14px;line-height:20px;color:var(--primary-500);cursor:pointer;&:hover{color:var(--primary-700);text-decoration:underline}}}&.cax-toast-message-warning{.message-icon{color:var(--warning-600)}}&.cax-toast-message-danger{.message-icon{color:var(--error-600)}}}}// toast styles end // table configuration styles start .table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px;.table-font-size{display:flex;flex-direction:column;gap:12px;.header-details{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;.cax-button{height:20px !important;padding:0 !important;.cax-button-label{font-size:14px !important;text-decoration:none !important}}.cax-button:focus{outline:none !important}.cax-button:hover{background:none !important}}.font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:8px;.font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%;span{cursor:pointer;&.active{color:var(--primary-color)}}}.slider-wrapper{position:relative;width:100%;height:24px;display:flex;align-items:center}}}.table-row-size{display:flex;flex-direction:column;gap:8px;.header-details{font-weight:500;font-size:14px}.row-configuration{display:flex;justify-content:space-between;gap:16px;li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:600;height:32px;border-radius:8px;cursor:pointer;flex:1;&.active{border:1px solid var(--primary-600);color:var(--primary-600);background:var(--primary-75)}&.disabled{cursor:not-allowed;background-color:var(--neutral-100);color:var(--neutral-500);border:1px solid var(--neutral-200)}}}}}// table configuration styles end // skeleton styles start .cax-skeleton{background-color:var(--neutral-100);border-radius:6px;animation:cax-skeleton-fade 1.2s ease-in-out infinite;&.cax-skeleton-circle{border-radius:var(--radius-rounded)}&.cax-skeleton-none{animation:none}}@keyframes cax-skeleton-fade{0%,100%{background-color:var(--neutral-100)}50%{background-color:var(--neutral-200)}}// skeleton styles end // progressbar styles start .cax-progressbar-container{display:flex;align-items:center;gap:12px;width:100%;.cax-progressbar{padding:0;margin:0;flex:1;height:12px;background:var(--neutral-100);border-radius:8px;position:relative;overflow:hidden;.cax-progressbar-value{border:0 none;margin:0;background:var(--primary-500);border-radius:8px;transition:width var(--fill-standard);max-width:100%;height:100%;position:absolute;width:var(--value,0)}&.cax-progressbar-secondary .cax-progressbar-value{background:var(--neutral-200)}&.cax-progressbar-success .cax-progressbar-value{background:var(--success-600)}&.cax-progressbar-danger .cax-progressbar-value{background:var(--error-600)}&.cax-progressbar-warning .cax-progressbar-value{background:var(--warning-600)}&.cax-progressbar-determinate-no-value{height:12px}}.cax-progressbar-label{color:var(--neutral-900);font-size:12px;font-weight:500;line-height:16px;white-space:nowrap}}.cax-progressbar-indeterminate{height:12px;width:100%;background:var(--neutral-100);border-radius:8px;overflow:hidden;position:relative;.cax-progressbar-value{&::before{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;border-radius:8px;will-change:left,right;animation:cax-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite}&::after{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;border-radius:8px;will-change:left,right;animation:cax-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite;animation-delay:1.15s}background:var(--primary-500);width:100%;height:100%}}@keyframes cax-progressbar-indeterminate-anim{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes cax-progressbar-indeterminate-anim-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}// progressbar styles end // progressspinner styles start .cax-progress-spinner{position:relative;margin:0 auto;display:inline-block;&::before{content:'';display:block;padding-top:100%}&-size-sm{width:16px;height:16px}&-size-md{width:24px;height:24px}&-size-lg{width:50px;height:50px}.cax-progress-spinner-svg{animation-name:cax-progress-spinner-rotate;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.cax-progress-spinner-circle{stroke-dasharray:89,200;stroke-dashoffset:0;animation:cax-progress-spinner-dash 1.5s ease-in-out infinite;stroke-linecap:round}}@keyframes cax-progress-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes cax-progress-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}// progressspinner styles end // divider styles start .cax-divider{display:flex;position:relative;align-items:center;.cax-divider-content{z-index:1;background-color:var(--white-100);padding:0 .5rem}&::before{position:absolute;display:block;content:'';border-color:var(--neutral-100)}&.cax-divider-horizontal{margin:1rem 0;width:100%;&::before{top:50%;left:0;width:100%;border-top-width:1px}&.cax-divider-left{justify-content:flex-start}&.cax-divider-right{justify-content:flex-end}&.cax-divider-center{justify-content:center}&.cax-divider-solid::before{border-top-style:solid}&.cax-divider-dashed::before{border-top-style:dashed}&.cax-divider-dotted::before{border-top-style:dotted}}&.cax-divider-vertical{margin:0 1rem;padding:1rem 0;min-height:100%;justify-content:center;&::before{top:0;left:50%;height:100%;border-left-width:1px;border-color:var(--neutral-300)}.cax-divider-content{padding:.5rem 0}&.cax-divider-top{align-items:flex-start}&.cax-divider-center{align-items:center}&.cax-divider-bottom{align-items:flex-end}&.cax-divider-solid::before{border-left-style:solid}&.cax-divider-dashed::before{border-left-style:dashed}&.cax-divider-dotted::before{border-left-style:dotted}}&.cax-divider-primary::before{border-color:var(--neutral-300)}&.cax-divider-secondary::before{border-color:var(--neutral-100)}&.cax-divider-brand::before{border-color:var(--primary-500)}}// divider styles end // accordion styles start .cax-accordion{display:flex;flex-direction:column;gap:4px;.cax-accordion-tab{border-radius:12px;transition:outline-color .2s;&:has(.cax-accordion-header-link:focus-visible){outline:2px solid var(--primary-300)}&:has(.cax-disabled){opacity:.5}}.cax-accordion-header{.cax-accordion-header-link{padding:16px;color:var(--neutral-700);background:var(--white-100);font-weight:700;font-size:20px;border-radius:12px;cursor:pointer;display:flex;flex-direction:row-reverse;justify-content:start;gap:8px;align-items:center;transition:background-color var(--slide-default),color var(--slide-default),border-color var(--slide-default),box-shadow var(--slide-default),outline-color var(--slide-default),border-radius var(--slide-default);.cax-accordion-icon{display:flex}.cax-accordion-toggle-icon{font-size:20px}&:focus-visible{outline:0 none !important}}.cax-accordion-header-text{flex:1}&:not(.cax-disabled).cax-highlight{.cax-accordion-header-link{color:var(--neutral-900);border-bottom-right-radius:0;border-bottom-left-radius:0}}&:not(.cax-disabled):hover{.cax-accordion-header-text{color:var(--neutral-900)}}}.cax-accordion-content{padding:16px;border-top:1px solid var(--neutral-100);background:var(--white-100);color:var(--neutral-900);border-bottom-left-radius:12px;border-bottom-right-radius:12px}}// accordion styles end // navigation styles start .cax-nav{background-color:var(--white-100);border-right:1.5px solid var(--neutral-100);.cax-nav-header{color:var(--neutral-900)}.cax-divider.cax-divider-vertical::before{border-color:var(--neutral-300)}.cax-nav-bottom-container{background:var(--white-100)}.cax-nav-list-container,.cax-nav-bottom-list{ul{li{transition:color var(--fill-standard),background-color var(--fill-standard);i{font-size:24px;color:var(--neutral-900)}&:hover{background-color:var(--neutral-75)}&.active{background:var(--primary-color);i,span{color:var(--white-100)}}}}}.cax-nav-list-label{font-size:16px;font-weight:600;color:var(--neutral-900);margin-left:8px;white-space:nowrap}.cax-nav-account-details{border:1px solid var(--neutral-100);transition:border-color var(--fill-standard),background-color var(--fill-standard);&:hover{border:1px solid var(--neutral-300);background-color:var(--neutral-100)}.cax-nav-account-icon{i{font-size:12px;font-weight:600 !important;color:var(--neutral-900)}}&.active{background:var(--neutral-50);border:1px solid var(--neutral-200)}}.cax-nav-user{.cax-nav-user-name{color:var(--neutral-900)}.cax-nav-user-role{color:var(--neutral-500)}}}.cax-nav-overlay,.cax-nav-overlay-expand{border:1.5px solid transparent !important;background:var(--white-100) !important;box-shadow:none !important;border-radius:16px !important;transition:all var(--fill-standard);i{font-size:24px}}.cax-nav-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--black-10);z-index:999;transition:all var(--fill-standard)}.cax-nav-profile-options{padding:12px 24px;font-weight:600;line-height:24px;display:flex;align-items:center;cursor:pointer;border-radius:8px;margin-bottom:8px;font-size:16px;background-color:var(--white-100);transition:all var(--fill-standard);span{margin-left:8px}&.cax-nav-logout{color:var(--error-600)}&:hover{background-color:var(--neutral-75)}}.cax-nav-copyright-container{display:flex;align-items:center;justify-content:space-between;padding:0 8px;.cax-nav-privacy-policy{font-size:12px;font-weight:500;color:var(--neutral-500);cursor:pointer;text-decoration:underline;transition:all var(--fill-standard)}.cax-nav-copyright{font-size:12px;font-weight:500;color:var(--neutral-500);span{margin:0 0 0 8px}}}.cax-nav-subscription-list{display:flex;flex-direction:column;border-radius:12px;background:var(--white-100);margin-bottom:8px;transition:all var(--fill-standard);gap:4px;.cax-nav-subscription-list-item{list-style-type:none;padding:8px 16px;border-radius:8px;font-weight:500;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:44px;transition:all var(--fill-standard);&:hover{background:var(--neutral-75)}&.expanded{background:var(--neutral-100)}&.active{background:var(--primary-75);color:var(--primary-color)}}}// navigation styles end // overlay panel styles start .cax-overlaypanel{background:var(--white-100);color:var(--neutral-900);max-width:500px;border-radius:12px;box-shadow:0 4px 14px 0 #00000024,0 0 0 1px #0000001f;.cax-overlaypanel-close{background:transparent;color:var(--neutral-300);width:1.75rem;height:1.75rem;font-size:20px;border:0 none;border-radius:50%;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);position:absolute;top:.25rem;right:.25rem;&:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}}&:after{content:'';border:solid transparent;border-color:rgba(255,255,255,0);border-bottom-color:var(--white-100)}&:before{content:'';border:solid transparent;border-color:rgba(228,228,231,0);border-bottom-color:var(--neutral-100)}&.cax-overlaypanel-flipped{&:after{border-top-color:var(--white-100)}&:before{border-top-color:var(--neutral-100)}}}// overlay panel styles end // steps styles start .cax-steps{.cax-steps-item{.cax-menuitem-link{background:transparent;border-radius:6px;cursor:pointer;.cax-steps-number{color:var(--neutral-900);border:1px solid var(--neutral-300);background:var(--neutral-100);min-width:24px;height:24px;line-height:16px;font-size:12px;z-index:2;border-radius:50px;position:relative;font-weight:600;border-width:2px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);&:after{content:' ';position:absolute;width:100%;height:100%;border-radius:50%}}.cax-steps-title{margin-top:.5rem;color:var(--neutral-900);font-weight:500;font-size:14px;line-height:20px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard)}&:not(.cax-disabled):focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}}&.cax-highlight{.cax-steps-number{background:var(--primary-75);color:var(--primary-500);border-color:var(--primary-500)}.cax-steps-title{font-weight:500;color:var(--primary-500)}&:before{border-top:1px solid var(--primary-500) !important;z-index:1}}&:before{content:' ';border-top:1px solid var(--neutral-100);width:100%;top:50%;left:-53%;right:50%;display:block;position:absolute;margin-top:calc(-1rem + 1px);border-top-width:1px}&:first-child::before{display:none}&.cax-disabled{opacity:1}}}// steps styles end // menu styles start .cax-menu{padding:var(--space-150) var(--space-50);// 12px 4px color:var(--neutral-900);background:var(--white-100);border:1px solid var(--neutral-200);border-radius:var(--radius-100);min-width:12.5rem;margin-top:var(--space-100) !important;&.cax-menu-overlay{position:absolute !important;z-index:1000}.cax-menuitem-separator{border-top:1px solid var(--neutral-200);margin:var(--space-25) 0}.cax-submenu-header{margin:0;padding:var(--space-25) var(--space-150) var(--space-100);color:var(--neutral-500);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.cax-menuitem{.cax-menuitem-content{padding:var(--space-50) var(--space-100);color:var(--neutral-900);border-radius:var(--radius-50);transition:background-color .2s,color .2s,box-shadow .2s;&:hover{background:var(--neutral-25);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--primary-700)}}}.cax-menuitem-link{display:flex;align-items:center;color:var(--neutral-900);user-select:none;text-decoration:none;gap:var(--space-100);.cax-menuitem-text{color:var(--neutral-900);font-weight:500;font-size:14px;flex:1 1 auto}.cax-menuitem-icon,.cax-submenu-icon{color:var(--neutral-700);font-size:1rem}.cax-menuitem-badge{background:var(--primary-500);color:var(--white-100);font-size:.75rem;font-weight:700;min-width:1.25rem;height:1.25rem;line-height:1.25rem;border-radius:var(--radius-25);padding:0 var(--space-50);display:flex;align-items:center;justify-content:center}}}&.cax-highlight{>.cax-menuitem-content{background:var(--primary-50);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--primary-700)}}}&.cax-focus>.cax-menuitem-content{background:var(--primary-100)}}&:not(.cax-highlight):not(.cax-disabled).cax-focus>.cax-menuitem-content{background:var(--neutral-50)}&.cax-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}}}// menu styles end // selectbutton styles start .cax-selectbutton{display:inline-flex !important;gap:8px;border-radius:12px;padding:4px;background:var(--neutral-100)}.cax-selectbutton .cax-button{border-radius:8px !important;background:transparent !important;color:var(--neutral-900);height:32px;min-width:72px;display:flex;align-items:center;gap:10px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);border:none !important;.cax-button-label,.cax-button-icon{color:var(--neutral-500)}}.cax-selectbutton-secondary{.cax-button{&.cax-highlight{background:var(--white-100) !important;.cax-button-label,.cax-button-icon{color:var(--neutral-900);font-weight:600}}&:hover{.cax-button-label,.cax-button-icon{color:var(--neutral-900)}}}}.cax-selectbutton-primary{background-color:var(--primary-75);.cax-button{&.cax-highlight{background:var(--primary-500) !important;.cax-button-label,.cax-button-icon{color:var(--white-100);font-weight:600}}&:not(.cax-highlight):hover{.cax-button-label,.cax-button-icon{color:var(--primary-500)}}}}.cax-selectbutton-sm{height:28px !important;.cax-button-label{font-size:12px}.cax-button-icon{font-size:16px !important}}.cax-selectbutton-md{height:32px !important;.cax-button-label{font-size:14px}.cax-button-icon{font-size:20px !important}}.cax-selectbutton-lg{height:36px !important;.cax-button-label{font-size:16px}.cax-button-icon{font-size:24px !important}}cax-selectbutton.ng-dirty.ng-invalid>.cax-selectbutton>.cax-button{border-color:var(--error-500) !important}.cax-selectbutton .cax-button.cax-disabled{opacity:.5}.cax-selectbutton.cax-invalid{box-shadow:0 0 0 1px var(--error-500);border-radius:var(--radius-75)}.cax-selectbutton.cax-invalid>.cax-button{border:1px solid var(--error-500)}.cax-selectbutton.cax-disabled{opacity:.6}.cax-selectbutton.cax-disabled .cax-button{color:var(--neutral-25)}.cax-selectbutton .cax-button.cax-input-invalid{border:1px solid var(--error-500) !important}// selectbutton styles end // image styles start .cax-image-mask{--maskbg:rgba(0,0,0,0.9)}.cax-image-preview-indicator{background-color:transparent;color:var(--neutral-300);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.cax-image-preview-container:hover>.cax-image-preview-indicator{background-color:rgba(0,0,0,0.5)}.cax-image-toolbar{padding:1rem}.cax-image-action.cax-link{color:var(--neutral-300);background-color:transparent;width:3rem;height:3rem;border-radius:50%;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s;margin-right:.5rem}.cax-image-action.cax-link:last-child{margin-right:0}.cax-image-action.cax-link:hover{color:var(--white-100);background-color:rgba(255,255,255,0.03)}.cax-image-action.cax-link i{font-size:1.5rem}.cax-image-action.cax-link .cax-icon{width:1.5rem;height:1.5rem}// image styles end // dialog styles start .cax-dialog{border-radius:16px;background-color:var(--white-100);padding:24px;.cax-dialog-header{background:var(--white-100);color:var(--neutral-900);.cax-dialog-title{font-weight:600;font-size:20px;line-height:28px}.cax-dialog-header-icon{width:1.5rem;height:1.5rem;color:var(--neutral-900);border:0 none;background:transparent;border-radius:50%;transition:background-color var(--fade-standard),color var(--fade-standard),border-color var(--fade-standard),box-shadow var(--fade-standard),outline-color var(--fade-standard);margin-right:.5rem;&:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}&:last-child{margin-right:0}}}.cax-dialog-header-close-icon{font-size:20px}.cax-dialog-content{color:var(--neutral-500);font-weight:500;font-size:16px;line-height:24px;overflow:auto;&:last-of-type{border-bottom-right-radius:var(--radius-150);border-bottom-left-radius:var(--radius-150)}}&.cax-dialog-maximized{border-radius:0}&.cax-confirm-dialog{width:592px;padding:24px !important;border:1px solid transparent;gap:16px;.cax-confirm-dialog-icon{font-size:2rem;&.cax-icon{width:2rem;height:2rem}}}}.cax-dialog-checkbox{.cax-checkbox-label{color:var(--neutral-500) !important}}.cax-confirm-dialog-content{padding:0 !important}.cax-confirm-dialog-footer{padding:0 !important}.cax-confirm-dialog-message{font-size:16px;font-weight:500;line-height:24px}.cax-confirm-dialog-header{background:none !important;padding:0 !important}// dialog styles end // breadcrumb styles start .cax-breadcrumb{border:0 none;border-radius:var(--radius-75);padding:var(--space-100) var(--space-200);.cax-breadcrumb-list{li{.cax-menuitem-link{transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);border-radius:var(--radius-75);cursor:pointer;&:hover{.cax-menuitem-icon,.cax-menuitem-text{color:var(--neutral-900) !important}.cax-menuitem-text{text-decoration:underline}}&:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}.cax-menuitem-text{color:var(--neutral-500)}.cax-menuitem-icon{color:var(--neutral-500);font-size:1.5rem;text-decoration:none;border-bottom:0}}&.cax-menuitem-separator{color:var(--neutral-500);i{font-size:16px}}&:last-child{.cax-menuitem-separator{color:var(--neutral-500)}.cax-menuitem-text{color:var(--neutral-900);border-bottom:0}.cax-menuitem-icon{color:var(--neutral-900)}}&:nth-last-child(-n+2){font-weight:bold;color:var(--neutral-900)}}}}// breadcrumb styles end // sidebar styles start .cax-sidebar{background:var(--white-100);overflow:hidden;color:var(--neutral-900);border:transparent;display:flex;flex-direction:column;.cax-sidebar-header{padding:12px 24px;color:var(--neutral-900);font-weight:600;font-size:20px;line-height:28px;background-color:var(--neutral-100);display:flex;align-items:center;justify-content:space-between;.cax-sidebar-close,.cax-sidebar-icon{color:var(--neutral-900);border:0 none;background:transparent;border-radius:50%;transition:background-color var(--slide-default),color var(--slide-default),border-color var(--slide-default),outline-color var(--slide-default);&:enabled:hover{color:var(--neutral-900);border-color:transparent;background:transparent}i{font-size:20px}}}.cax-sidebar-content{flex-grow:1;overflow-y:auto}.cax-sidebar-footer{padding:24px;border-top:1px solid var(--neutral-100)}}// sidebar styles end // tooltip styles start .cax-tooltip{.cax-tooltip-text{background:var(--neutral-900);color:var(--white-100);padding:var(--space-150);// 12px gap:var(--space-150);font-weight:400;font-size:.75rem;// 12px line-height:1.125rem;// 18px box-shadow:0 4px 6px -1px var(--black-10),0 2px 4px -2px var(--black-10);border-radius:var(--radius-100);// 8pxtransition:background-color var(--fade-instant),color var(--fade-instant),border-color var(--fade-instant),box-shadow var(--fade-instant),outline-color var(--fade-instant)}&.cax-tooltip-right,&.cax-tooltip-right-top,&.cax-tooltip-right-bottom{.cax-tooltip-arrow{border-right-color:var(--neutral-900)}}&.cax-tooltip-left,&.cax-tooltip-left-top,&.cax-tooltip-left-bottom{.cax-tooltip-arrow{border-left-color:var(--neutral-900)}}&.cax-tooltip-top,&.cax-tooltip-top-left,&.cax-tooltip-top-right{.cax-tooltip-arrow{border-top-color:var(--neutral-900)}}&.cax-tooltip-bottom,&.cax-tooltip-bottom-left,&.cax-tooltip-bottom-right{.cax-tooltip-arrow{border-bottom-color:var(--neutral-900)}}}.cax-tooltip-link{text-align:left;color:var(--white-100);font-size:inherit;a{color:var(--white-100);text-decoration:underline}}// tooltip styles end // timeline styles start .cax-timeline{.cax-timeline-event-marker{border:1px solid var(--primary-500);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--primary-500);font-size:10px;font-weight:600;background:var(--primary-75);flex:none;&::after{content:' ';position:absolute;width:100%;height:100%;border-radius:50%}}.cax-timeline-event-connector{background-color:var(--primary-500)}&.cax-timeline-vertical{.cax-timeline-event-opposite,.cax-timeline-event-content{padding:8px 12px;color:var(--neutral-900);font-weight:500}.cax-timeline-event-connector{width:1px}}&.cax-timeline-horizontal{.cax-timeline-event-opposite,.cax-timeline-event-content{padding:8px 0;color:var(--neutral-900);font-weight:500}.cax-timeline-event-connector{height:2px}}}// timeline styles end // tabview styles start .cax-tabview{.cax-tabview-nav-content{scroll-padding-inline:var(--space-500);padding-right:0;height:100%;overflow-y:visible;&.scrollable-tabs{padding-right:5.5rem !important}}.cax-tabview-nav-container{height:56px;border-bottom:0 none}.cax-tabview-nav{background:transparent;border-bottom:2px solid var(--neutral-100);display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;li{margin-right:0;.cax-tabview-nav-link{background:transparent;color:var(--neutral-500);padding:var(--space-200);font-weight:500;font-size:16px;height:100%;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);width:100%;display:flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;&:hover{color:var(--neutral-900)}&:not(.cax-disabled):focus-visible{outline:2px solid var(--primary-300) !important;box-shadow:inset none;border-radius:12px;outline-offset:-2px}}&.cax-disabled{.cax-tabview-nav-link{color:var(--neutral-200) !important;cursor:default}}&.cax-highlight{.cax-tabview-nav-link{background:transparent;color:var(--primary-500);font-weight:600;&:hover{color:var(--primary-700)}}&:hover ~ .cax-tabview-ink-bar{background-color:var(--primary-700)}&.cax-disabled{.cax-tabview-nav-link{color:var(--neutral-200) !important}& ~ .cax-tabview-ink-bar{background-color:var(--neutral-200) !important}}}}}// Segment mode styles .cax-segment-tabview-nav{background:var(--white-100);border-width:0 0 var(--border-100) 0;height:100%;position:relative;display:inline-flex;min-width:100%;li{border-left:1px solid var(--neutral-100);margin-right:0;&:first-child{border-left:0 none}&:last-child{border-right:1px solid var(--neutral-100)}// Pinned tabs styling &.pinned{border-right:1px solid var(--neutral-100);border-left:0 none;.cax-tabview-left-icon{margin-right:0}&:first-child{border-left:0 none;// Redundant but safe}}// The tab immediately after a pinned tab shouldn't have a left border
+@use './styles/colors.scss';@use './styles/variables.scss';@use './styles/typography.scss';@use './styles/fonts.scss';@use './styles/transitions.scss';:root{font-family:'Inter',sans-serif;--font-family:'Inter',sans-serif;--primary-color:var(--primary-500);--cax-focus-ring-color:var(--primary-color);--cax-anchor-gutter:4px;--maskbg:var(--black-20)}@layer cax{*{box-sizing:border-box}.cax-component{font-family:var(--font-family);font-feature-settings:var(--font-feature-settings,normal);font-size:.875rem;font-weight:normal}.cax-component-overlay{background-color:var(--black-20);transition-duration:.2s}// .cax-disabled,// .cax-component:disabled{// opacity:.6;//}.cax-error{font-size:14px;line-height:18px;font-weight:500;color:var(--error-600)}.cax-helper-text{font-size:14px;line-height:18px;font-weight:500;color:var(--neutral-900)}.cax-text-secondary{color:var(--neutral-600)}.cax{font-size:.875rem}.cax-icon{width:14px;height:14px}.cax-link{font-family:var(--font-family);font-feature-settings:var(--font-feature-settings,normal);font-size:1rem;border-radius:6px}.cax-link:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}.cax-component-overlay-enter{animation:cax-component-overlay-enter-animation 150ms forwards}.cax-component-overlay-leave{animation:cax-component-overlay-leave-animation 150ms forwards}@keyframes cax-component-overlay-enter-animation{from{background-color:transparent}to{background-color:var(--maskbg)}}@keyframes cax-component-overlay-leave-animation{from{background-color:var(--maskbg)}to{background-color:transparent}}}@layer cax{// colorpicker styles start .cax-colorpicker-panel{background:var(--neutral-900);border:1px solid var(--neutral-150)}.cax-colorpicker-panel .cax-colorpicker-color-handle,.cax-colorpicker-panel .cax-colorpicker-hue-handle{border-color:var(--white-100)}.cax-colorpicker-overlay-panel{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}.cax-colorpicker .cax-colorpicker-preview.cax-inputtext{width:1.5rem !important;height:1.5rem !important;min-width:1.5rem !important;max-width:1.5rem !important;border:2px solid var(--neutral-150) !important;padding:0 !important;appearance:none;flex:none}.cax-colorpicker-preview:enabled:focus{outline-offset:2px}.cax-colorpicker-preview.cax-inputtext.cax-disabled{opacity:.6}// color picker styles end // checkbox styles start .cax-checkbox{display:inline-flex;vertical-align:bottom;align-items:center;.cax-checkbox-box{display:flex;justify-content:center;align-items:center;background-color:var(--white-100);border:2px solid var(--neutral-300);color:var(--white-100);border-radius:6px;width:20px;height:20px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);outline-color:transparent;.cax-checkbox-icon{transition-duration:.2s;color:var(--white-100);font-size:.875rem}.cax-icon{width:.875rem;height:.875rem}// Sizes &.cax-checkbox-sm{width:20px;height:20px;border-radius:var(--radius-75);.cax-checkbox-icon{font-size:16px}}&.cax-checkbox-md{width:24px;height:24px;border-radius:var(--radius-75);.cax-checkbox-icon{font-size:20px}}&.cax-checkbox-lg{width:28px;height:28px;border-radius:var(--radius-100);.cax-checkbox-icon{font-size:24px}}// Focus State - Outline Logic Moved Here &.cax-focus{outline:0;&.cax-checkbox-sm{outline:0}}}// States &:not(.cax-checkbox-disabled) .cax-checkbox-box:hover{border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}// Focus State Override &:not(.cax-checkbox-disabled) .cax-checkbox-box.cax-focus{border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(12,74,243,0.16)}// Focus State Override for Checked &.cax-checkbox-checked:not(.cax-checkbox-disabled) .cax-checkbox-box.cax-focus{border-color:var(--primary-500)}// Checked State(Applied to root element) &.cax-checkbox-checked{.cax-checkbox-box{background-color:var(--primary-500);border-color:var(--primary-500);color:var(--white-100);&:hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}}}// Highlight(Applied to box element when checked) - NO OUTLINE HERE .cax-checkbox-box.cax-highlight{border-color:var(--primary-500) !important;background:var(--primary-500);&:hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}}// Indeterminate State &.cax-checkbox-indeterminate{.cax-checkbox-box{background-color:var(--primary-500);border-color:var(--primary-500);color:var(--white-100);&:hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}}}// Disabled State &.cax-disabled,&.cax-checkbox-disabled{.cax-checkbox-box{border-color:var(--neutral-200) !important;background-color:var(--neutral-100);cursor:not-allowed;.cax-checkbox-icon{color:var(--neutral-200) !important}}}}// Invalid State - Applied to Host Element cax-checkbox.ng-dirty.ng-invalid{.cax-checkbox-box{border-color:var(--error-600) !important}.cax-checkbox .cax-checkbox-box.cax-highlight{background:var(--error-600) !important;border-color:var(--error-600) !important}// Invalid Hover .cax-checkbox-box:hover{border-color:var(--error-700) !important;box-shadow:0 0 0 8px #cc000014 !important}// Invalid Focus .cax-checkbox-box.cax-focus{border-color:var(--error-700) !important;box-shadow:0 0 0 8px #cc000029}&.cax-checkbox-checked:not(.cax-checkbox-disabled) .cax-checkbox-box.cax-focus{border-color:var(--error-600) !important}// Invalid Checked &.cax-checkbox-checked .cax-checkbox-box{background-color:var(--error-600) !important;border-color:var(--error-600) !important;&:hover{background-color:var(--error-600) !important;// Consistent hover darken border-color:var(--error-600) !important}}// Invalid Indeterminate &.cax-checkbox-indeterminate .cax-checkbox-box{background-color:var(--error-600) !important;border-color:var(--error-600) !important;&:hover{background-color:var(--error-600) !important;border-color:var(--error-600) !important}}}// Label Styling .cax-checkbox-label{color:var(--neutral-900);font-weight:600;text-align:left;cursor:pointer;&.cax-checkbox-label-sm{font-size:12px;line-height:16px !important;margin-left:var(--space-100)}&.cax-checkbox-label-md{font-size:14px;line-height:20px !important;margin-left:var(--space-100)}&.cax-checkbox-label-lg{font-size:16px;line-height:24px !important;margin-left:var(--space-100)}&.cax-disabled{color:var(--neutral-200)}}// Filled Input Variant .cax-input-filled .cax-checkbox,.cax-checkbox.cax-variant-filled{.cax-checkbox-box.cax-highlight{background:var(--primary-500);&:hover{background:var(--primary-500);// Consistent hover}}}// checkbox styles end // editor styles start .cax-editor-container{border-radius:8px;.cax-editor-toolbar{background:var(--neutral-100);border-top-right-radius:8px;border-top-left-radius:8px;&.ql-snow{border:1px solid var(--neutral-300);// border-bottom:0 !important;.ql-stroke{stroke:var(--neutral-900) !important;stroke-width:1.3px !important}.ql-fill{fill:var(--neutral-600)}.ql-picker{.ql-picker-label{border:0 none;color:var(--neutral-900);&:hover{color:var(--neutral-900) !important;background:#16181d14 !important;border-radius:4px;.ql-stroke{stroke:var(--neutral-900) !important}.ql-fill{fill:var(--neutral-900) !important}}}&.ql-expanded{.ql-picker-label{color:var(--neutral-900);border:0 !important;.ql-stroke{stroke:var(--neutral-900) !important}.ql-fill{fill:var(--neutral-900) !important}}.ql-picker-options{border:1px solid var(--neutral-300) !important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);border-radius:6px;padding:.25rem .25rem;.ql-picker-item{&:hover{color:var(--neutral-900) !important;background:#16181d14;border-radius:4px}}}&:not(.ql-icon-picker) .ql-picker-item{padding:.5rem .75rem}}}}}.ql-snow.ql-toolbar{font-family:'Inter',sans-serif !important;button,.ql-toolbar button{padding:2px !important}button:hover,button:focus{color:var(--neutral-900) !important;background:#16181d14 !important;border-radius:4px;transition:all var(--fill-standard);.ql-stroke{stroke:var(--neutral-900) !important}.ql-fill{fill:var(--neutral-900) !important}}button.ql-active,.ql-picker-label.ql-active,.ql-picker-item.ql-selected{color:var(--primary-500) !important;background:#0c4af329 !important;border-radius:4px;transition:all var(--fill-standard);.ql-stroke{stroke:var(--primary-500) !important}.ql-fill{fill:var(--primary-500) !important}.ql-picker-label{color:var(--primary-500) !important;background:#0c4af329 !important;border-radius:4px}}}.cax-editor-content{border-bottom-right-radius:8px;border-bottom-left-radius:8px;display:flex;flex-direction:column;height:100%;transition:all var(--fill-standard);&.ql-snow{border:1px solid var(--neutral-300)}.ql-editor{background:var(--white-100);color:var(--neutral-900);border-bottom-right-radius:8px;border-bottom-left-radius:8px;flex:1;transition:all var(--fill-standard)}&.ql-snow{border:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.ql-editor:focus{outline:0}&:has(.ql-editor:focus){border:2px solid var(--primary-300) !important}}.ql-editor.ql-blank::before{font-style:normal !important;font-size:14px !important;color:var(--neutral-500) !important;font-weight:500 !important;font-family:inherit !important;letter-spacing:1.6%}.ql-snow.ql-toolbar button{width:24px !important;height:24px !important;color:var(--neutral-900)}.ql-formats{margin-right:0 !important;button,span{margin-right:12px !important}}.ql-picker-options span{margin-right:0 !important;border-radius:4px !important}.cax-editor-disabled .ql-editor{cursor:not-allowed}&.cax-editor-disabled{.cax-editor-toolbar{.ql-stroke{stroke:var(--neutral-200) !important}.ql-fill{fill:var(--neutral-200) !important}.ql-picker-label{color:var(--neutral-200) !important}button{color:var(--neutral-200) !important}}.cax-editor-content .ql-editor{background:var(--neutral-100) !important;color:var(--neutral-200) !important;&.ql-blank::before{color:var(--neutral-200) !important}}}}// editor styles end // toggle switch styles start .cax-toggleswitch-track{display:block;height:24px;width:44px;border-radius:9999px;cursor:pointer;transition:background-color var(--fill-standard),border-color var(--fill-standard),outline var(--fill-standard);box-shadow:var(--fill-standard);position:relative;background-color:var(--neutral-100);border:2px solid var(--neutral-300)}// Default Unchecked Hover - Track Border only .cax-toggleswitchmaindiv:hover .cax-toggleswitch-track:not(:has(~ .cax-toggleswitch:checked)){border-color:var(--neutral-500)}// Default Unchecked Focus - Track Border only .cax-toggleswitch-track.cax-focus{border-color:var(--neutral-500);outline:0}// Checked State .cax-toggleswitch:checked{~ .cax-toggleswitch-track{background-color:var(--primary-500);border:2px solid var(--primary-500)}// Checked Hover - Track &:hover ~ .cax-toggleswitch-track,~ .cax-toggleswitchmaindiv:hover .cax-toggleswitch-track{background-color:var(--primary-500) !important;border-color:var(--primary-500) !important}}.cax-toggle-thumb{position:absolute;display:flex;cursor:pointer;align-items:center;justify-content:center;height:16px;width:16px;top:50%;left:8px;transform:translateY(-50%);border-radius:50%;background-color:var(--neutral-300);transition:transform var(--fill-standard),background-color var(--fill-standard),width var(--fill-standard),height var(--fill-standard),left var(--fill-standard)}// Thumb Hover Halo(Unchecked & Checked) .cax-toggleswitchmaindiv:hover .cax-toggle-thumb{outline:14px solid rgba(22,24,29,0.08) !important}// Thumb Focus Halo(Unchecked & Checked) .cax-toggle-thumb.cax-focus{outline:14px solid rgba(12,74,243,0.16)}// Thumb hover/focus state updates for color .cax-toggleswitchmaindiv:hover .cax-toggleswitch:not(:checked) ~ .cax-toggle-thumb{background-color:var(--neutral-500)}.cax-toggle-thumb.cax-focus:not(.cax-toggle-thumb-checked){background-color:var(--neutral-500)}.cax-toggleswitch:checked ~ .cax-toggle-thumb{background-color:var(--white-100)}.cax-toggleswitch-size-sm{gap:6px;.cax-toggleswitch-track{height:24px;width:44px}.cax-toggle-thumb{height:12px;width:12px}.cax-toggleswitch:checked ~ .cax-toggle-thumb{height:16px;width:16px;left:calc(100% - 20px)}.cax-toggle-label{font-size:12px;font-weight:600;line-height:16px}}.cax-toggleswitch-size-md{gap:6px;.cax-toggleswitch-track{height:28px;width:48px}.cax-toggle-thumb{height:14px;width:14px}.cax-toggleswitch:checked ~ .cax-toggle-thumb{height:20px;width:20px;left:calc(100% - 24px)}.cax-toggle-label{font-size:14px;font-weight:600;line-height:20px}}.cax-toggleswitch-size-lg{gap:6px;.cax-toggleswitch-track{height:32px;width:52px}.cax-toggle-thumb{height:16px;width:16px}.cax-toggleswitch:checked ~ .cax-toggle-thumb{height:24px;width:24px;left:calc(100% - 28px)}.cax-toggle-label{font-size:16px;font-weight:600;line-height:24px}}// Disabled State .cax-toggleswitchmaindiv-disabled{pointer-events:none;.cax-toggleswitch-track{background-color:var(--neutral-100) !important;border-color:var(--neutral-200) !important}.cax-toggle-thumb{background-color:var(--neutral-200) !important;box-shadow:none !important;// No halo on disabled}.cax-toggleswitch:checked ~ .cax-toggle-thumb{background-color:var(--neutral-200) !important}}.cax-toggleswitch-container-disabled{.cax-toggle-label{color:var(--neutral-200) !important}}.cax-toggle-label{font-weight:600;color:var(--neutral-900);cursor:pointer}// toggle switch styles end // radio button styles start .cax-radiobutton{display:inline-flex;align-items:center;.cax-radiobutton-box{display:flex;justify-content:center;align-items:center;border:2px solid var(--neutral-300);background:transparent;border-radius:50%;transition:background-color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline var(--fill-standard);box-sizing:border-box;.cax-radiobutton-icon{background-color:var(--primary-500);border-radius:50%;transition:all var(--fill-standard);transform:scale(0)}&:not(.cax-disabled):not(.cax-highlight):hover{border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}&.cax-focus:not(.cax-highlight){border-color:var(--neutral-500);box-shadow:0 0 0 8px rgba(12,74,243,0.16)}&.cax-highlight{border-color:var(--primary-500);background:transparent;.cax-radiobutton-icon{transform:scale(1)}&:not(.cax-disabled):hover{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(22,24,29,0.08)}&.cax-focus{border-color:var(--primary-500);box-shadow:0 0 0 8px rgba(12,74,243,0.16)}}}}cax-radiobutton.ng-dirty.ng-invalid>.cax-radiobutton>.cax-radiobutton-box{border-color:var(--error-600)}.cax-radiobutton-label{font-family:'Inter',sans-serif;font-weight:600;cursor:pointer;color:var(--neutral-900);line-height:1.5;&.cax-disabled{color:var(--neutral-200)}}.cax-radiobutton-sm{width:20px;height:20px;.cax-radiobutton-box{width:20px;height:20px;border-radius:50%;.cax-radiobutton-icon{width:11px;height:11px}}}.cax-radiobutton-label-sm{font-size:12px;line-height:16px;letter-spacing:.3px;margin-left:8px}.cax-radiobutton-md{width:24px;height:24px;.cax-radiobutton-box{width:24px;height:24px;border-radius:50%;.cax-radiobutton-icon{width:14px;height:14px}}}.cax-radiobutton-label-md{font-size:14px;line-height:20px;letter-spacing:.2px;margin-left:8px}.cax-radiobutton-lg{width:28px;height:28px;.cax-radiobutton-box{width:28px;height:28px;border-radius:50%;.cax-radiobutton-icon{width:18px;height:18px}}}.cax-radiobutton-label-lg{font-size:16px;line-height:24px;letter-spacing:.1px;margin-left:8px}.cax-radiobutton-label:has(.cax-disabled){color:var(--neutral-300) !important}.cax-radiobutton-disabled{pointer-events:none;.cax-radiobutton-box{border-color:var(--neutral-300) !important;&.cax-highlight{border-color:var(--neutral-300) !important;background-color:transparent !important}.cax-radiobutton-icon{background-color:var(--neutral-200) !important}}}// radio button styles end // button styles start .cax-button{display:inline-flex;cursor:pointer;user-select:none;gap:6px;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;color:var(--white-100);background:var(--primary-500);border:1px solid var(--primary-500);padding:8px 12px;min-width:72px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline var(--fill-standard);border-radius:var(--radius-100);outline-color:transparent;--cax-button-loader-stroke:var(--white-100);--cax-button-loader-bg:var(--white-30);.cax-progress-spinner{transition:transform .1s;.cax-progress-spinner-circle{stroke:var(--cax-button-loader-stroke) !important}.cax-progress-spinner-bg{stroke:var(--cax-button-loader-bg) !important}}&:focus-visible{outline:2px solid var(--primary-300)}&:not(:disabled):hover{background:var(--primary-700);color:var(--white-100);border-color:var(--primary-700)}&:not(:disabled):active{background:var(--primary-700);color:var(--white-100);border-color:var(--primary-700)}&:disabled{pointer-events:none;cursor:default;background:var(--neutral-100) !important;color:var(--neutral-200) !important;border-color:var(--neutral-100) !important}// Outlined &.cax-button-outlined{background-color:transparent;color:var(--primary-500);border-color:var(--primary-500);border-width:1.5px;--cax-button-loader-stroke:var(--primary-500);--cax-button-loader-bg:var(--primary-75);&:not(:disabled):hover{background:var(--primary-75);color:var(--primary-700);border-color:var(--primary-700)}&:not(:disabled):active{background:var(--primary-75);color:var(--primary-700);border-color:var(--primary-700)}&:disabled{pointer-events:none;cursor:default;background:transparent !important}&.cax-button-plain{color:var(--neutral-300);border-color:var(--primary-700);&:not(:disabled):hover{background:var(--white-10);color:var(--primary-700)}&:not(:disabled):active{background:var(--white-20);color:var(--primary-700)}}}// Text &.cax-button-text{background-color:transparent;color:var(--primary-500);border-color:transparent;&:not(:disabled):hover{background:var(--primary-25);color:var(--primary-500);border-color:transparent}&:not(:disabled):active{background:transparent;color:var(--primary-500);border-color:transparent}&.cax-button-plain{color:var(--neutral-300);&:not(:disabled):hover{background:var(--white-10);color:var(--neutral-300)}&:not(:disabled):active{background:var(--white-20);color:var(--neutral-300)}}}// Link &.cax-button-link{color:var(--primary-500);background:transparent;border:transparent;.cax-button-label{text-decoration:underline}&:not(:disabled):hover{background:var(--blue-75);color:var(--primary-700);border:transparent;.cax-button-label{text-decoration:underline}}&:not(:disabled):active{background:var(--blue-75);color:var(--primary-700);border-color:transparent}&:disabled{pointer-events:none;cursor:default;background:transparent !important}--cax-button-loader-stroke:var(--primary-500);--cax-button-loader-bg:var(--primary-75)}// Icons .cax-button-icon{font-size:16px}.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transition:transform var(--fill-standard)}.cax-button-label{transition-duration:150ms;font-family:var(--font-family);font-size:16px;font-weight:500}&.cax-button-loading-label-only .cax-button-label{margin-left:var(--space-100)}&.cax-button-loading-label-only .cax-button-loading-icon{margin-right:0}// Sizes &.cax-button-sm{height:32px !important;padding:8px 12px !important;.cax-button-label{font-size:12px;font-weight:600}.cax-button-icon,.cax-button-icon-center{font-size:16px !important}.cax-button-icon-left,.cax-button-icon-right,.cax-button-icon-bottom,.cax-button-icon-top{font-size:16px !important}.cax-progress-spinner{width:16px !important;height:16px !important}&:active{.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transform:scale(0.8333);transform-origin:center}}}&.cax-button-md{height:36px !important;padding:8px 12px !important;.cax-button-label{font-size:14px;font-weight:600}.cax-button-icon,.cax-button-icon-center{font-size:20px !important}.cax-button-icon-left,.cax-button-icon-right,.cax-button-icon-bottom,.cax-button-icon-top{font-size:20px !important}.cax-progress-spinner{width:20px !important;height:20px !important}&:active{.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transform:scale(0.8571);transform-origin:center}}}&.cax-button-lg{height:40px !important;padding:8px 12px !important;.cax-button-label{font-size:16px;font-weight:600}.cax-button-icon,.cax-button-icon-center{font-size:24px !important}.cax-button-icon-left,.cax-button-icon-right,.cax-button-icon-bottom,.cax-button-icon-top{font-size:24px !important}.cax-progress-spinner{width:24px !important;height:24px !important}&:active{.cax-button-content-wrapper,.cax-button-icon-center,.cax-progress-spinner{transform:scale(0.875);transform-origin:center}}}// Shapes &.cax-button-rounded{border-radius:50px}&.cax-button-raised{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}// Icon Only &.cax-button-icon-only{justify-content:center;min-width:auto;&.cax-button-rounded{border-radius:50%}}&.cax-button-sm.cax-button-icon-only{width:32px;padding:0 !important}&.cax-button-md.cax-button-icon-only{width:36px;padding:0 !important}&.cax-button-lg.cax-button-icon-only{width:40px;padding:0 !important}}// Severities .cax-button.cax-button-secondary{color:var(--neutral-900);background:var(--neutral-100);border:1px solid var(--neutral-100);--cax-button-loader-stroke:var(--neutral-900);--cax-button-loader-bg:var(--neutral-300);&:not(:disabled):hover{background:var(--neutral-200);color:var(--neutral-900);border-color:var(--neutral-200)}&:not(:disabled):active{background:var(--neutral-200);color:var(--neutral-900);border-color:var(--neutral-200)}&.cax-button-outlined{background-color:transparent;color:var(--neutral-900);border:1.5px solid var(--neutral-100);--cax-button-loader-bg:var(--neutral-100);&:not(:disabled):hover{background:var(--neutral-100);border:1.5px solid var(--neutral-200)}&:not(:disabled):active{background:var(--neutral-100);border:1.5px solid var(--neutral-200)}}&.cax-button-link{background:transparent;border:transparent;&:not(:disabled):hover{background:var(--neutral-100);border:transparent}&:not(:disabled):active{background:var(--neutral-100);border-color:transparent}}&.cax-button-text{background-color:transparent;color:var(--neutral-900);border-color:transparent;&:not(:disabled):hover{background-color:var(--neutral-25)}&:not(:disabled):active{background-color:var(--neutral-50)}}}.cax-button.cax-button-info{color:var(--white-100);background:var(--logo-blue-500);border:1px solid var(--logo-blue-500);&:not(:disabled):hover{background:var(--blue-400);border-color:var(--blue-400)}&:not(:disabled):active{background:var(--blue-500);border-color:var(--blue-500)}&.cax-button-outlined{background-color:transparent;color:var(--logo-blue-500);border-color:var(--logo-blue-500);--cax-button-loader-stroke:var(--logo-blue-500);--cax-button-loader-bg:var(--blue-25);&:not(:disabled):hover{background:var(--blue-25)}}&.cax-button-text{color:var(--logo-blue-500);&:not(:disabled):hover{background:var(--blue-25)}}}.cax-button.cax-button-success{color:var(--white-100);background:var(--success-600);border:1px solid var(--success-600);&:not(:disabled):hover{background:var(--success-700);border-color:var(--success-700)}&:not(:disabled):active{background:var(--success-700);border-color:var(--success-700)}&.cax-button-outlined{background-color:transparent;color:var(--success-600);border:1.5px solid var(--success-600);--cax-button-loader-stroke:var(--success-600);--cax-button-loader-bg:var(--success-75);&:not(:disabled):hover,&:not(:disabled):active{background:var(--success-75);color:var(--success-700);border-color:var(--success-700)}}&.cax-button-link{background-color:transparent;color:var(--success-600);border:transparent;&:not(:disabled):hover,&:not(:disabled):active{background:var(--success-75);color:var(--success-700)}}&.cax-button-text{color:var(--success-500);&:not(:disabled):hover{background:var(--success-25)}}}.cax-button.cax-button-warning{color:var(--white-100);background:var(--warning-600);border:1px solid var(--warning-600);&:not(:disabled):hover{background:var(--warning-700);border-color:var(--warning-700)}&:not(:disabled):active{background:var(--warning-700);border-color:var(--warning-700)}&.cax-button-outlined{background-color:transparent;color:var(--warning-600);border:1.5px solid var(--warning-600);--cax-button-loader-stroke:var(--warning-600);--cax-button-loader-bg:var(--warning-75);&:not(:disabled):hover,&:not(:disabled):active{background:var(--warning-75);color:var(--warning-700);border-color:var(--warning-700)}}&.cax-button-link{background-color:transparent;color:var(--warning-600);border:transparent;&:not(:disabled):hover,&:not(:disabled):active{background:var(--warning-75);color:var(--warning-700)}}&.cax-button-text{color:var(--warning-500);&:not(:disabled):hover{background:var(--warning-25)}}}.cax-button.cax-button-help{color:var(--white-100);background:var(--purple-500);border:1px solid var(--purple-500);&:not(:disabled):hover{background:var(--purple-700);border-color:var(--purple-700)}&:not(:disabled):active{background:var(--purple-500);border-color:var(--purple-500)}&.cax-button-outlined{background-color:transparent;color:var(--purple-500);border-color:var(--purple-500);--cax-button-loader-stroke:var(--purple-500);--cax-button-loader-bg:var(--purple-25);&:not(:disabled):hover{background:var(--purple-25)}}&.cax-button-text{color:var(--purple-500);&:not(:disabled):hover{background:var(--purple-25)}}}.cax-button.cax-button-danger{color:var(--white-100);background:var(--error-600);border:1px solid var(--error-600);&:not(:disabled):hover{background:var(--error-700);border-color:var(--error-700)}&:not(:disabled):active{background:var(--error-700);border-color:var(--error-700)}&.cax-button-outlined{background-color:transparent;color:var(--error-600);border:1.5px solid var(--error-600);--cax-button-loader-stroke:var(--error-600);--cax-button-loader-bg:var(--error-75);&:not(:disabled):hover,&:not(:disabled):active{background:var(--error-75);color:var(--error-700);border-color:var(--error-700)}}&.cax-button-link{background-color:transparent;color:var(--error-600);border:transparent;&:not(:disabled):hover,&:not(:disabled):active{background:var(--error-75);color:var(--error-700)}}&.cax-button-text{color:var(--error-500);&:not(:disabled):hover{background:var(--error-25)}}}.cax-button.cax-button-contrast{color:var(--black-100);background:var(--white-100);border:1px solid var(--white-100);--cax-button-loader-stroke:var(--black-100);--cax-button-loader-bg:var(--black-10);&:not(:disabled):hover{background:var(--neutral-50);color:var(--black-100);border-color:var(--neutral-50)}&:not(:disabled):active{background:var(--neutral-100);border-color:var(--neutral-100)}&.cax-button-outlined{background-color:transparent;color:var(--white-100);border-color:var(--white-100);--cax-button-loader-stroke:var(--white-100);--cax-button-loader-bg:var(--white-10);&:not(:disabled):hover{background:var(--white-10)}}&.cax-button-text{color:var(--white-100);&:not(:disabled):hover{background:var(--white-10)}}}.cax-button-group{display:inline-flex;.cax-button{margin:0}.cax-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.cax-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}}// button styles end // speed dial styles start .cax-speeddial{position:static;display:flex;gap:7px;&.cax-speeddial-up{flex-direction:column-reverse;align-items:center}&.cax-speeddial-down{flex-direction:column;align-items:center}&.cax-speeddial-left{flex-direction:row-reverse;align-items:center}&.cax-speeddial-right{flex-direction:row;align-items:center}.cax-speeddial-button{&.cax-button.cax-button-icon-only{width:40px !important;height:40px !important;.cax-button-icon{font-size:20px !important}.cax-icon{width:20px;height:20px}}&.cax-speeddial-rotate{transition:transform var(--slide-default),background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard)}}.cax-speeddial-list{outline:0 none}.cax-speeddial-item{.cax-speeddial-action:focus-visible{outline:2px solid var(--primary-300)}}.cax-speeddial-action{width:40px;height:40px;background:var(--neutral-100);color:var(--neutral-900);&:hover{background:var(--neutral-150)}}// Sizes &.cax-speeddial-sm{.cax-speeddial-button.cax-button.cax-button-icon-only{width:32px !important;height:32px !important;.cax-button-icon{font-size:16px !important}.cax-icon{width:16px !important;height:16px !important}.cax-speeddial-button-icon{font-size:16px !important}}.cax-speeddial-action{width:32px !important;height:32px !important;.cax-speeddial-action-icon{font-size:16px !important}}}&.cax-speeddial-md{.cax-speeddial-button.cax-button.cax-button-icon-only{width:36px !important;height:36px !important;.cax-button-icon{font-size:20px !important}.cax-icon{width:20px !important;height:20px !important}.cax-speeddial-button-icon{font-size:20px !important}}.cax-speeddial-action{width:36px !important;height:36px !important;.cax-speeddial-action-icon{font-size:20px !important}}}&.cax-speeddial-lg{.cax-speeddial-button.cax-button.cax-button-icon-only{width:40px !important;height:40px !important;.cax-button-icon{font-size:24px !important}.cax-icon{width:24px !important;height:24px !important}.cax-speeddial-button-icon{font-size:24px !important}}.cax-speeddial-action{width:40px !important;height:40px !important;.cax-speeddial-action-icon{font-size:24px !important}}}// Circle types &.cax-speeddial-circle,&.cax-speeddial-semi-circle,&.cax-speeddial-quarter-circle{.cax-speeddial-item{margin:0}}}.cax-speeddial-mask{background-color:var(--black-40)}// speed dial styles end // split button styles start .cax-splitbutton{display:inline-flex;position:relative;border-radius:var(--radius-100);.cax-splitbutton-defaultbutton{border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--white-100) !important;gap:6px}.cax-splitbutton-menubutton{border-top-left-radius:0;border-bottom-left-radius:0}.cax-splitbutton-defaultbutton,.cax-splitbutton-menubutton{>*{transition:transform var(--fill-standard)}&.cax-button-sm:active>*{transform:scale(0.8333);transform-origin:center}&.cax-button-md:active>*{transform:scale(0.8571);transform-origin:center}&.cax-button-lg:active>*{transform:scale(0.875);transform-origin:center}}.cax-splitbutton-divider{display:none}&.cax-button-rounded{border-radius:var(--radius-400);>.cax-button{border-radius:var(--radius-400)}}&.cax-button-raised{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}}.cax-button-sm.cax-splitbutton-menubutton{i{font-size:16px}}.cax-button-md.cax-splitbutton-menubutton{i{font-size:20px}}.cax-button-lg.cax-splitbutton-menubutton{i{font-size:24px}}.cax-tieredmenu{display:inline-block;min-width:150px;padding:8px;border-radius:var(--radius-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.cax-tieredmenu-overlay{background:var(--white-100);box-shadow:0 3px 10px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.1)}.cax-tieredmenu-root-list{outline:0 none}.cax-submenu-list{padding:.25rem;background:var(--white-100);border:1px solid var(--neutral-200);box-shadow:0 4px 6px -1px var(--black-10),0 2px 4px -2px var(--black-10);border-radius:6px}.cax-menuitem{>.cax-menuitem-content{color:var(--white-100);transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);border-radius:4px;.cax-menuitem-link{color:var(--neutral-900);padding:.5rem .75rem;user-select:none;display:flex;align-items:center;height:32px;.cax-menuitem-text{color:inherit}.cax-menuitem-icon{color:inherit;margin-right:.5rem;font-size:16px}.cax-submenu-icon{color:inherit;margin-left:auto}}}&.cax-highlight{>.cax-menuitem-content{color:var(--neutral-900);background:var(--neutral-75);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--neutral-900)}}}&.cax-focus>.cax-menuitem-content{background:var(--neutral-100)}}&:not(.cax-highlight):not(.cax-disabled){&.cax-focus>.cax-menuitem-content,>.cax-menuitem-content:hover{color:var(--neutral-900);background:var(--neutral-75);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--neutral-900)}}}}}.cax-menuitem-separator{border-top:1px solid var(--neutral-300);margin:2px 0}.cax-submenu-icon{font-size:20px;&.cax-icon{width:20px;height:20px}}}// split button styles end // badge styles start .cax-badge{background:var(--primary-500);color:var(--white-100);font-weight:500;font-size:12px;min-width:32px;height:32px;line-height:32px;display:flex;align-items:center;justify-content:center}.cax-badge.cax-badge-primary{background-color:var(--primary-500);color:var(--white-100)}.cax-badge.cax-badge-secondary{background-color:var(--neutral-75);color:var(--neutral-900)}.cax-badge.cax-badge-info{background-color:var(--neutral-900);color:var(--white-100)}.cax-badge.cax-badge-success{background-color:var(--success-500);color:var(--white-100)}.cax-badge.cax-badge-warning{background-color:var(--warning-500);color:var(--white-100)}.cax-badge.cax-badge-danger{background-color:var(--error-600);color:var(--white-100)}.cax-badge.cax-badge-xs{font-size:10px;min-width:20px;height:20px;font-weight:500;line-height:20px}.cax-badge.cax-badge-sm{font-size:12px;min-width:24px;height:24px;font-weight:500;line-height:24px}.cax-badge.cax-badge-md{font-size:12px;min-width:32px;height:32px;font-weight:500;line-height:32px}.cax-badge.cax-badge-lg{font-size:12px;min-width:40px;height:40px;font-weight:500;line-height:40px}.cax-button .cax-badge{margin-left:4px}// badge styles end // avatar styles start .cax-avatar{background-color:var(--primary-500);color:var(--white-100)}.cax-avatar.cax-avatar-image{background-color:transparent}.cax-avatar.cax-avatar-xs{width:20px;height:20px;border-radius:4px;font-size:10px;line-height:12px}.cax-avatar.cax-avatar-xs .cax-avatar-icon{font-size:12px}.cax-avatar.cax-avatar-sm{width:28px;height:28px;font-size:12px;line-height:16px;border-radius:6px}.cax-avatar.cax-avatar-sm .cax-avatar-icon{font-size:16px}.cax-avatar.cax-avatar-md{width:36px;height:36px;font-size:14px;line-height:20px;border-radius:8px}.cax-avatar.cax-avatar-md .cax-avatar-icon{font-size:20px}.cax-avatar.cax-avatar-lg{width:48px;height:48px;font-size:20px;line-height:28px;border-radius:12px}.cax-avatar.cax-avatar-lg .cax-avatar-icon{font-size:24px}.cax-avatar.cax-avatar-xl{width:56px;height:56px;font-size:24px;line-height:32px;border-radius:12px}.cax-avatar.cax-avatar-xl .cax-avatar-icon{font-size:32px}.cax-avatar .cax-badge{background-color:var(--error-600) !important;color:var(--white-100) !important}.cax-avatar.cax-avatar-xs .cax-badge,.cax-avatar.cax-avatar-sm .cax-badge{top:auto !important;right:auto !important}.cax-avatar-group .cax-avatar{border:1px solid var(--white-100)}// avatar styles end // tag styles start .cax-tag{background:var(--primary-75);color:var(--neutral-900);font-weight:600;column-gap:4px;font-size:10px;line-height:12px;padding:4px 8px;border-radius:8px;.cax-tag-remove-icon{cursor:pointer;font-size:10px}.cax-tag-image{border-radius:var(--radius-rounded,50%);object-fit:cover;flex-shrink:0}}.cax-tag.cax-tag-blue{background:var(--primary-75)}.cax-tag.cax-tag-grey{background:var(--neutral-50)}.cax-tag.cax-tag-green{background:var(--success-75)}.cax-tag.cax-tag-orange{background:var(--warning-75)}.cax-tag.cax-tag-red{background:var(--error-75)}.cax-tag.cax-tag-pink{background:var(--pink-50)}.cax-tag.cax-tag-purple{background:var(--purple-50)}.cax-tag.cax-tag-teal{background:var(--teal-50)}.cax-tag.cax-tag-cyan{background:var(--cyan-50)}.cax-tag.cax-tag-olive{background:var(--olive-50)}.cax-tag.cax-tag-azure{background:var(--azure-50)}.cax-tag.cax-tag-magenta{background:var(--magenta-50)}.cax-tag.cax-tag-rounded{border-radius:100000px}// Sizes .cax-tag.cax-tag-sm{font-size:10px;padding:4px 8px;line-height:12px;.cax-tag-iconholder{font-size:12px}.cax-tag-remove-icon{font-size:12px}.cax-tag-image{width:12px;height:12px}&.cax-tag-image{padding-left:4px}}.cax-tag.cax-tag-md{font-size:12px;padding:6px 10px;line-height:16px;.cax-tag-iconholder{font-size:16px}.cax-tag-remove-icon{font-size:16px}.cax-tag-image{width:16px;height:16px}&.cax-tag-image{padding-left:6px}}.cax-tag.cax-tag-lg{font-size:14px;padding:6px 12px;line-height:20px;.cax-tag-iconholder{font-size:18px}.cax-tag-remove-icon{font-size:18px}.cax-tag-image{width:20px;height:20px}&.cax-tag-image{padding-left:6px}}// tag styles end // chip styles start .cax-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;font-size:14px;font-weight:600;border-radius:50px;background-color:var(--primary-75);color:var(--primary-500);border:1px solid var(--primary-500);cursor:pointer;transition:all .2s ease;white-space:nowrap;outline:0;transition:all var(--fill-standard);&:hover{background-color:var(--primary-125)}&:focus-visible{outline:2px solid var(--primary-300)}}.cax-chip .cax-chip-icon,.cax-chip .cax-chip-close,.cax-chip .cax-chip-remove-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:16px;line-height:1;flex-shrink:0}.cax-chip .cax-chip-close{cursor:pointer;opacity:.7;&:hover{opacity:1}}.cax-chip .cax-chip-remove-icon:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}.cax-chip .cax-chip-remove-icon:focus{outline:0 none}.cax-chip .cax-chip-text{margin-top:0;margin-bottom:0}.cax-chip:has(.cax-chip-remove-icon){padding-right:.5rem}.cax-chip-remove-icon{cursor:pointer}.cax-chip img{border-radius:50%}// Size variants .cax-chip.cax-chip-sm{padding:4px 6px;font-size:12px;font-weight:600;line-height:16px;.cax-chip-icon,.cax-chip-close,.cax-chip-remove-icon{width:14px;height:14px;font-size:14px}img{width:14px;height:14px}}.cax-chip.cax-chip-md{padding:6px 8px;font-size:14px;font-weight:600;line-height:20px;.cax-chip-icon,.cax-chip-remove-icon,.cax-chip-close{width:16px;height:16px;font-size:16px}img{width:16px;height:16px}}.cax-chip.cax-chip-lg{padding:6px 12px;font-size:16px;font-weight:600;line-height:24px;.cax-chip-icon,.cax-chip-close,.cax-chip-remove-icon{width:18px;height:18px;font-size:18px}img{width:18px;height:18px}}// Variant styles .cax-chip.cax-chip-filled{background-color:var(--primary-500);color:var(--white-100);border:0}.cax-chip.cax-chip-outlined{background-color:transparent;border:1px solid var(--primary-500);color:var(--primary-500)}// Disabled state .cax-chip.cax-chip-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.cax-chip-blue{background-color:var(--primary-75);color:var(--primary-500);border:1px solid var(--primary-500);&:hover{background-color:var(--primary-125)}}.cax-chip-red{background-color:var(--error-75);color:var(--error-600);border:1px solid var(--error-600);&:hover{background-color:var(--error-125)}}.cax-chip-green{background-color:var(--success-75);color:var(--success-600);border:1px solid var(--success-600);&:hover{background-color:var(--success-125)}}.cax-chip-purple{background-color:var(--purple-50);color:var(--purple-600);border:1px solid var(--purple-600);&:hover{background-color:var(--purple-100)}}.cax-chip-orange{background-color:var(--orange-75);color:var(--orange-600);border:1px solid var(--orange-600);&:hover{background-color:var(--orange-125)}}.cax-chip-grey{background-color:var(--neutral-100);color:var(--neutral-900);border:1px solid var(--neutral-300);&:hover{background-color:var(--neutral-125)}}.cax-chip-pink{background-color:var(--pink-50);color:var(--pink-600);border:1px solid var(--pink-600);&:hover{background-color:var(--pink-100)}}.cax-chip-teal{background-color:var(--teal-50);color:var(--teal-600);border:1px solid var(--teal-600);&:hover{background-color:var(--teal-100)}}.cax-chip-cyan{background-color:var(--cyan-50);color:var(--cyan-600);border:1px solid var(--cyan-600);&:hover{background-color:var(--cyan-100)}}.cax-chip-olive{background-color:var(--olive-50);color:var(--olive-600);border:1px solid var(--olive-600);&:hover{background-color:var(--olive-100)}}.cax-chip-azure{background-color:var(--azure-50);color:var(--azure-600);border:1px solid var(--azure-600);&:hover{background-color:var(--azure-100)}}.cax-chip-magenta{background-color:var(--magenta-50);color:var(--magenta-600);border:1px solid var(--magenta-600);&:hover{background-color:var(--magenta-100)}}// chip styles end //message styles start .cax-message{border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 22px 0 #0000002e,0 0 0 1px #00000029;background:var(--white-100);min-width:200px;max-width:500px;width:fit-content;margin-bottom:8px;transition:all var(--fade-standard);&.cax-message-success{.cax-message-icon{span{color:var(--success-600)}}}&.cax-message-warning{.cax-message-icon{span{color:var(--warning-600)}}}&.cax-message-danger{.cax-message-icon{span{color:var(--error-600)}}}.cax-message-close{width:24px;height:24px;border-radius:8px;background:transparent;transition:background-color var(--fade-standard),color var(--fade-standard),border-color var(--fade-standard),box-shadow var(--fade-standard),outline-color var(--fade-standard);i{font-size:20px}}.cax-message-icon{span{font-size:24px}}.cax-message-box{display:flex;flex-direction:column;justify-content:center;gap:4px}.cax-message-summary{font-weight:600;font-size:16px;line-height:24px}.cax-message-detail{line-height:20px;font-size:14px;font-weight:400;color:var(--neutral-500)}.cax-message-button-wrapper{span{color:var(--primary-500);&:hover{color:var(--primary-700);text-decoration:underline}}}}// message styles end // toast styles start .cax-toast{opacity:1;.cax-toast-message{border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 22px 0 #0000002e,0 0 0 1px #00000029;background:var(--white-100);min-width:200px;max-width:500px;width:fit-content;margin-bottom:-8px;transition:all var(--fade-standard);.cax-toast-message-content{display:flex;gap:12px;&.cax-toast-message-content-center{align-items:center}.cax-toast-message-text{display:flex;flex-direction:column;gap:4px}.cax-toast-summary{font-weight:600;font-size:16px;line-height:24px}.cax-toast-detail{font-size:14px;font-weight:400;line-height:20px;color:var(--neutral-500)}}.cax-toast-icon-close{width:24px;height:24px;margin-left:4px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:transparent;transition:background-color var(--fade-standard),color var(--fade-standard),border-color var(--fade-standard),box-shadow var(--fade-standard),outline-color var(--fade-standard);i{font-size:20px}}&.cax-toast-message-success{.message-icon{color:var(--success-600)}}.cax-toast-action-container{display:flex;align-items:center;margin-top:8px;.cax-toast-action{font-weight:600;font-size:14px;line-height:20px;color:var(--primary-500);cursor:pointer;&:hover{color:var(--primary-700);text-decoration:underline}}}&.cax-toast-message-warning{.message-icon{color:var(--warning-600)}}&.cax-toast-message-danger{.message-icon{color:var(--error-600)}}}}// toast styles end // table configuration styles start .table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px;.table-font-size{display:flex;flex-direction:column;gap:12px;.header-details{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;.cax-button{height:20px !important;padding:0 !important;.cax-button-label{font-size:14px !important;text-decoration:none !important}}.cax-button:focus{outline:none !important}.cax-button:hover{background:none !important}}.font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:8px;.font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%;span{cursor:pointer;&.active{color:var(--primary-color)}}}.slider-wrapper{position:relative;width:100%;height:24px;display:flex;align-items:center}}}.table-row-size{display:flex;flex-direction:column;gap:8px;.header-details{font-weight:500;font-size:14px}.row-configuration{display:flex;justify-content:space-between;gap:16px;li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:600;height:32px;border-radius:8px;cursor:pointer;flex:1;&.active{border:1px solid var(--primary-600);color:var(--primary-600);background:var(--primary-75)}&.disabled{cursor:not-allowed;background-color:var(--neutral-100);color:var(--neutral-500);border:1px solid var(--neutral-200)}}}}}// table configuration styles end // skeleton styles start .cax-skeleton{background-color:var(--neutral-100);border-radius:6px;animation:cax-skeleton-fade 1.2s ease-in-out infinite;&.cax-skeleton-circle{border-radius:var(--radius-rounded)}&.cax-skeleton-none{animation:none}}@keyframes cax-skeleton-fade{0%,100%{background-color:var(--neutral-100)}50%{background-color:var(--neutral-200)}}// skeleton styles end // progressbar styles start .cax-progressbar-container{display:flex;align-items:center;gap:12px;width:100%;.cax-progressbar{padding:0;margin:0;flex:1;height:12px;background:var(--neutral-100);border-radius:8px;position:relative;overflow:hidden;.cax-progressbar-value{border:0 none;margin:0;background:var(--primary-500);border-radius:8px;transition:width var(--fill-standard);max-width:100%;height:100%;position:absolute;width:var(--value,0)}&.cax-progressbar-secondary .cax-progressbar-value{background:var(--neutral-200)}&.cax-progressbar-success .cax-progressbar-value{background:var(--success-600)}&.cax-progressbar-danger .cax-progressbar-value{background:var(--error-600)}&.cax-progressbar-warning .cax-progressbar-value{background:var(--warning-600)}&.cax-progressbar-determinate-no-value{height:12px}}.cax-progressbar-label{color:var(--neutral-900);font-size:12px;font-weight:500;line-height:16px;white-space:nowrap}}.cax-progressbar-indeterminate{height:12px;width:100%;background:var(--neutral-100);border-radius:8px;overflow:hidden;position:relative;.cax-progressbar-value{&::before{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;border-radius:8px;will-change:left,right;animation:cax-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite}&::after{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;border-radius:8px;will-change:left,right;animation:cax-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite;animation-delay:1.15s}background:var(--primary-500);width:100%;height:100%}}@keyframes cax-progressbar-indeterminate-anim{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes cax-progressbar-indeterminate-anim-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}// progressbar styles end // progressspinner styles start .cax-progress-spinner{position:relative;margin:0 auto;display:inline-block;&::before{content:'';display:block;padding-top:100%}&-size-sm{width:16px;height:16px}&-size-md{width:24px;height:24px}&-size-lg{width:50px;height:50px}.cax-progress-spinner-svg{animation-name:cax-progress-spinner-rotate;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.cax-progress-spinner-circle{stroke-dasharray:89,200;stroke-dashoffset:0;animation:cax-progress-spinner-dash 1.5s ease-in-out infinite;stroke-linecap:round}}@keyframes cax-progress-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes cax-progress-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}// progressspinner styles end // divider styles start .cax-divider{display:flex;position:relative;align-items:center;.cax-divider-content{z-index:1;background-color:var(--white-100);padding:0 .5rem}&::before{position:absolute;display:block;content:'';border-color:var(--neutral-100)}&.cax-divider-horizontal{margin:1rem 0;width:100%;&::before{top:50%;left:0;width:100%;border-top-width:1px}&.cax-divider-left{justify-content:flex-start}&.cax-divider-right{justify-content:flex-end}&.cax-divider-center{justify-content:center}&.cax-divider-solid::before{border-top-style:solid}&.cax-divider-dashed::before{border-top-style:dashed}&.cax-divider-dotted::before{border-top-style:dotted}}&.cax-divider-vertical{margin:0 1rem;padding:1rem 0;min-height:100%;justify-content:center;&::before{top:0;left:50%;height:100%;border-left-width:1px;border-color:var(--neutral-300)}.cax-divider-content{padding:.5rem 0}&.cax-divider-top{align-items:flex-start}&.cax-divider-center{align-items:center}&.cax-divider-bottom{align-items:flex-end}&.cax-divider-solid::before{border-left-style:solid}&.cax-divider-dashed::before{border-left-style:dashed}&.cax-divider-dotted::before{border-left-style:dotted}}&.cax-divider-primary::before{border-color:var(--neutral-300)}&.cax-divider-secondary::before{border-color:var(--neutral-100)}&.cax-divider-brand::before{border-color:var(--primary-500)}}// divider styles end // accordion styles start .cax-accordion{display:flex;flex-direction:column;gap:4px;.cax-accordion-tab{border-radius:12px;transition:outline-color .2s;&:has(.cax-accordion-header-link:focus-visible){outline:2px solid var(--primary-300)}&:has(.cax-disabled){opacity:.5}}.cax-accordion-header{.cax-accordion-header-link{padding:16px;color:var(--neutral-700);background:var(--white-100);font-weight:700;font-size:20px;border-radius:12px;cursor:pointer;display:flex;flex-direction:row-reverse;justify-content:start;gap:8px;align-items:center;transition:background-color var(--slide-default),color var(--slide-default),border-color var(--slide-default),box-shadow var(--slide-default),outline-color var(--slide-default),border-radius var(--slide-default);.cax-accordion-icon{display:flex}.cax-accordion-toggle-icon{font-size:20px}&:focus-visible{outline:0 none !important}}.cax-accordion-header-text{flex:1}&:not(.cax-disabled).cax-highlight{.cax-accordion-header-link{color:var(--neutral-900);border-bottom-right-radius:0;border-bottom-left-radius:0}}&:not(.cax-disabled):hover{.cax-accordion-header-text{color:var(--neutral-900)}}}.cax-accordion-content{padding:16px;border-top:1px solid var(--neutral-100);background:var(--white-100);color:var(--neutral-900);border-bottom-left-radius:12px;border-bottom-right-radius:12px}}// accordion styles end // navigation styles start .cax-nav{background-color:var(--white-100);border-right:1.5px solid var(--neutral-100);.cax-nav-header{color:var(--neutral-900)}.cax-divider.cax-divider-vertical::before{border-color:var(--neutral-300)}.cax-nav-bottom-container{background:var(--white-100)}.cax-nav-list-container,.cax-nav-bottom-list{ul{li{transition:color var(--fill-standard),background-color var(--fill-standard);i{font-size:24px;color:var(--neutral-900)}&:hover{background-color:var(--neutral-75)}&.active{background:var(--primary-color);i,span{color:var(--white-100)}}}}}.cax-nav-list-label{font-size:16px;font-weight:600;color:var(--neutral-900);margin-left:8px;white-space:nowrap}.cax-nav-account-details{border:1px solid var(--neutral-100);transition:border-color var(--fill-standard),background-color var(--fill-standard);&:hover{border:1px solid var(--neutral-300);background-color:var(--neutral-100)}.cax-nav-account-icon{i{font-size:12px;font-weight:600 !important;color:var(--neutral-900)}}&.active{background:var(--neutral-50);border:1px solid var(--neutral-200)}}.cax-nav-user{.cax-nav-user-name{color:var(--neutral-900)}.cax-nav-user-role{color:var(--neutral-500)}}}.cax-nav-overlay,.cax-nav-overlay-expand{border:1.5px solid transparent !important;background:var(--white-100) !important;box-shadow:none !important;border-radius:16px !important;transition:all var(--fill-standard);i{font-size:24px}}.cax-nav-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--black-10);z-index:999;transition:all var(--fill-standard)}.cax-nav-profile-options{padding:12px 24px;font-weight:600;line-height:24px;display:flex;align-items:center;cursor:pointer;border-radius:8px;margin-bottom:8px;font-size:16px;background-color:var(--white-100);transition:all var(--fill-standard);span{margin-left:8px}&.cax-nav-logout{color:var(--error-600)}&:hover{background-color:var(--neutral-75)}}.cax-nav-copyright-container{display:flex;align-items:center;justify-content:space-between;padding:0 8px;.cax-nav-privacy-policy{font-size:12px;font-weight:500;color:var(--neutral-500);cursor:pointer;text-decoration:underline;transition:all var(--fill-standard)}.cax-nav-copyright{font-size:12px;font-weight:500;color:var(--neutral-500);span{margin:0 0 0 8px}}}.cax-nav-subscription-list{display:flex;flex-direction:column;border-radius:12px;background:var(--white-100);margin-bottom:8px;transition:all var(--fill-standard);gap:4px;.cax-nav-subscription-list-item{list-style-type:none;padding:8px 16px;border-radius:8px;font-weight:500;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:44px;transition:all var(--fill-standard);&:hover{background:var(--neutral-75)}&.expanded{background:var(--neutral-100)}&.active{background:var(--primary-75);color:var(--primary-color)}}}// navigation styles end // overlay panel styles start .cax-overlaypanel{background:var(--white-100);color:var(--neutral-900);max-width:500px;border-radius:12px;box-shadow:0 4px 14px 0 #00000024,0 0 0 1px #0000001f;.cax-overlaypanel-close{background:transparent;color:var(--neutral-300);width:1.75rem;height:1.75rem;font-size:20px;border:0 none;border-radius:50%;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);position:absolute;top:.25rem;right:.25rem;&:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}}&:after{content:'';border:solid transparent;border-color:rgba(255,255,255,0);border-bottom-color:var(--white-100)}&:before{content:'';border:solid transparent;border-color:rgba(228,228,231,0);border-bottom-color:var(--neutral-100)}&.cax-overlaypanel-flipped{&:after{border-top-color:var(--white-100)}&:before{border-top-color:var(--neutral-100)}}}// overlay panel styles end // steps styles start .cax-steps{.cax-steps-item{.cax-menuitem-link{background:transparent;border-radius:6px;cursor:pointer;.cax-steps-number{color:var(--neutral-900);border:1px solid var(--neutral-300);background:var(--neutral-100);min-width:24px;height:24px;line-height:16px;font-size:12px;z-index:2;border-radius:50px;position:relative;font-weight:600;border-width:2px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);&:after{content:' ';position:absolute;width:100%;height:100%;border-radius:50%}}.cax-steps-title{margin-top:.5rem;color:var(--neutral-900);font-weight:500;font-size:14px;line-height:20px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard)}&:not(.cax-disabled):focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}}&.cax-highlight{.cax-steps-number{background:var(--primary-75);color:var(--primary-500);border-color:var(--primary-500)}.cax-steps-title{font-weight:500;color:var(--primary-500)}&:before{border-top:1px solid var(--primary-500) !important;z-index:1}}&:before{content:' ';border-top:1px solid var(--neutral-100);width:100%;top:50%;left:-53%;right:50%;display:block;position:absolute;margin-top:calc(-1rem + 1px);border-top-width:1px}&:first-child::before{display:none}&.cax-disabled{opacity:1}}}// steps styles end // menu styles start .cax-menu{padding:var(--space-150) var(--space-50);// 12px 4px color:var(--neutral-900);background:var(--white-100);border:1px solid var(--neutral-200);border-radius:var(--radius-100);min-width:12.5rem;margin-top:var(--space-100) !important;&.cax-menu-overlay{position:absolute !important;z-index:1000}.cax-menuitem-separator{border-top:1px solid var(--neutral-200);margin:var(--space-25) 0}.cax-submenu-header{margin:0;padding:var(--space-25) var(--space-150) var(--space-100);color:var(--neutral-500);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.cax-menuitem{.cax-menuitem-content{padding:var(--space-50) var(--space-100);color:var(--neutral-900);border-radius:var(--radius-50);transition:background-color .2s,color .2s,box-shadow .2s;&:hover{background:var(--neutral-25);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--primary-700)}}}.cax-menuitem-link{display:flex;align-items:center;color:var(--neutral-900);user-select:none;text-decoration:none;gap:var(--space-100);.cax-menuitem-text{color:var(--neutral-900);font-weight:500;font-size:14px;flex:1 1 auto}.cax-menuitem-icon,.cax-submenu-icon{color:var(--neutral-700);font-size:1rem}.cax-menuitem-badge{background:var(--primary-500);color:var(--white-100);font-size:.75rem;font-weight:700;min-width:1.25rem;height:1.25rem;line-height:1.25rem;border-radius:var(--radius-25);padding:0 var(--space-50);display:flex;align-items:center;justify-content:center}}}&.cax-highlight{>.cax-menuitem-content{background:var(--primary-50);.cax-menuitem-link{.cax-menuitem-text,.cax-menuitem-icon,.cax-submenu-icon{color:var(--primary-700)}}}&.cax-focus>.cax-menuitem-content{background:var(--primary-100)}}&:not(.cax-highlight):not(.cax-disabled).cax-focus>.cax-menuitem-content{background:var(--neutral-50)}&.cax-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}}}// menu styles end // selectbutton styles start .cax-selectbutton{display:inline-flex !important;gap:8px;border-radius:12px;padding:4px;background:var(--neutral-100)}.cax-selectbutton .cax-button{border-radius:8px !important;background:transparent !important;color:var(--neutral-900);height:32px;min-width:72px;display:flex;align-items:center;gap:10px;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);border:none !important;.cax-button-label,.cax-button-icon{color:var(--neutral-500)}}.cax-selectbutton-secondary{.cax-button{&.cax-highlight{background:var(--white-100) !important;.cax-button-label,.cax-button-icon{color:var(--neutral-900);font-weight:600}}&:hover{.cax-button-label,.cax-button-icon{color:var(--neutral-900)}}}}.cax-selectbutton-primary{background-color:var(--primary-75);.cax-button{&.cax-highlight{background:var(--primary-500) !important;.cax-button-label,.cax-button-icon{color:var(--white-100);font-weight:600}}&:not(.cax-highlight):hover{.cax-button-label,.cax-button-icon{color:var(--primary-500)}}}}.cax-selectbutton-sm{height:28px !important;.cax-button-label{font-size:12px}.cax-button-icon{font-size:16px !important}}.cax-selectbutton-md{height:32px !important;.cax-button-label{font-size:14px}.cax-button-icon{font-size:20px !important}}.cax-selectbutton-lg{height:36px !important;.cax-button-label{font-size:16px}.cax-button-icon{font-size:24px !important}}cax-selectbutton.ng-dirty.ng-invalid>.cax-selectbutton>.cax-button{border-color:var(--error-500) !important}.cax-selectbutton .cax-button.cax-disabled{opacity:.5}.cax-selectbutton.cax-invalid{box-shadow:0 0 0 1px var(--error-500);border-radius:var(--radius-75)}.cax-selectbutton.cax-invalid>.cax-button{border:1px solid var(--error-500)}.cax-selectbutton.cax-disabled{opacity:.6}.cax-selectbutton.cax-disabled .cax-button{color:var(--neutral-25)}.cax-selectbutton .cax-button.cax-input-invalid{border:1px solid var(--error-500) !important}// selectbutton styles end // image styles start .cax-image-mask{--maskbg:rgba(0,0,0,0.9)}.cax-image-preview-indicator{background-color:transparent;color:var(--neutral-300);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.cax-image-preview-container:hover>.cax-image-preview-indicator{background-color:rgba(0,0,0,0.5)}.cax-image-toolbar{padding:1rem}.cax-image-action.cax-link{color:var(--neutral-300);background-color:transparent;width:3rem;height:3rem;border-radius:50%;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s;margin-right:.5rem}.cax-image-action.cax-link:last-child{margin-right:0}.cax-image-action.cax-link:hover{color:var(--white-100);background-color:rgba(255,255,255,0.03)}.cax-image-action.cax-link i{font-size:1.5rem}.cax-image-action.cax-link .cax-icon{width:1.5rem;height:1.5rem}// image styles end // dialog styles start .cax-dialog{border-radius:16px;background-color:var(--white-100);padding:24px;.cax-dialog-header{background:var(--white-100);color:var(--neutral-900);.cax-dialog-title{font-weight:600;font-size:20px;line-height:28px}.cax-dialog-header-icon{width:1.5rem;height:1.5rem;color:var(--neutral-900);border:0 none;background:transparent;border-radius:50%;transition:background-color var(--fade-standard),color var(--fade-standard),border-color var(--fade-standard),box-shadow var(--fade-standard),outline-color var(--fade-standard);margin-right:.5rem;&:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}&:last-child{margin-right:0}}}.cax-dialog-header-close-icon{font-size:20px}.cax-dialog-content{color:var(--neutral-500);font-weight:500;font-size:16px;line-height:24px;overflow:auto;&:last-of-type{border-bottom-right-radius:var(--radius-150);border-bottom-left-radius:var(--radius-150)}}&.cax-dialog-maximized{border-radius:0}&.cax-confirm-dialog{width:592px;padding:24px !important;border:1px solid transparent;gap:16px;.cax-confirm-dialog-icon{font-size:2rem;&.cax-icon{width:2rem;height:2rem}}}}.cax-dialog-checkbox{.cax-checkbox-label{color:var(--neutral-500) !important}}.cax-confirm-dialog-content{padding:0 !important}.cax-confirm-dialog-footer{padding:0 !important}.cax-confirm-dialog-message{font-size:16px;font-weight:500;line-height:24px}.cax-confirm-dialog-header{background:none !important;padding:0 !important}// dialog styles end // breadcrumb styles start .cax-breadcrumb{border:0 none;border-radius:var(--radius-75);padding:var(--space-100) var(--space-200);.cax-breadcrumb-list{li{.cax-menuitem-link{transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);border-radius:var(--radius-75);cursor:pointer;&:hover{.cax-menuitem-icon,.cax-menuitem-text{color:var(--neutral-900) !important}.cax-menuitem-text{text-decoration:underline}}&:focus-visible{outline:1px solid var(--cax-focus-ring-color);outline-offset:2px;box-shadow:none}.cax-menuitem-text{color:var(--neutral-500)}.cax-menuitem-icon{color:var(--neutral-500);font-size:1.5rem;text-decoration:none;border-bottom:0}}&.cax-menuitem-separator{color:var(--neutral-500);i{font-size:16px}}&:last-child{.cax-menuitem-separator{color:var(--neutral-500)}.cax-menuitem-text{color:var(--neutral-900);border-bottom:0}.cax-menuitem-icon{color:var(--neutral-900)}}&:nth-last-child(-n+2){font-weight:bold;color:var(--neutral-900)}}}}// breadcrumb styles end // sidebar styles start .cax-sidebar{background:var(--white-100);overflow:hidden;color:var(--neutral-900);border:transparent;display:flex;flex-direction:column;.cax-sidebar-header{padding:12px 24px;color:var(--neutral-900);font-weight:600;font-size:20px;line-height:28px;background-color:var(--neutral-100);display:flex;align-items:center;justify-content:space-between;.cax-sidebar-close,.cax-sidebar-icon{color:var(--neutral-900);border:0 none;background:transparent;border-radius:50%;transition:background-color var(--slide-default),color var(--slide-default),border-color var(--slide-default),outline-color var(--slide-default);&:enabled:hover{color:var(--neutral-900);border-color:transparent;background:transparent}i{font-size:20px}}}.cax-sidebar-content{flex-grow:1;overflow-y:auto}.cax-sidebar-footer{padding:24px;border-top:1px solid var(--neutral-100)}}// sidebar styles end // tooltip styles start .cax-tooltip{.cax-tooltip-text{background:var(--neutral-900);color:var(--white-100);padding:var(--space-150);// 12px gap:var(--space-150);font-weight:400;font-size:.75rem;// 12px line-height:1.125rem;// 18px box-shadow:0 4px 6px -1px var(--black-10),0 2px 4px -2px var(--black-10);border-radius:var(--radius-100);// 8pxtransition:background-color var(--fade-instant),color var(--fade-instant),border-color var(--fade-instant),box-shadow var(--fade-instant),outline-color var(--fade-instant)}&.cax-tooltip-right,&.cax-tooltip-right-top,&.cax-tooltip-right-bottom{.cax-tooltip-arrow{border-right-color:var(--neutral-900)}}&.cax-tooltip-left,&.cax-tooltip-left-top,&.cax-tooltip-left-bottom{.cax-tooltip-arrow{border-left-color:var(--neutral-900)}}&.cax-tooltip-top,&.cax-tooltip-top-left,&.cax-tooltip-top-right{.cax-tooltip-arrow{border-top-color:var(--neutral-900)}}&.cax-tooltip-bottom,&.cax-tooltip-bottom-left,&.cax-tooltip-bottom-right{.cax-tooltip-arrow{border-bottom-color:var(--neutral-900)}}}.cax-tooltip-link{text-align:left;color:var(--white-100);font-size:inherit;a{color:var(--white-100);text-decoration:underline}}// tooltip styles end // timeline styles start .cax-timeline{.cax-timeline-event-marker{border:1px solid var(--primary-500);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--primary-500);font-size:10px;font-weight:600;background:var(--primary-75);flex:none;&::after{content:' ';position:absolute;width:100%;height:100%;border-radius:50%}}.cax-timeline-event-connector{background-color:var(--primary-500)}&.cax-timeline-vertical{.cax-timeline-event-opposite,.cax-timeline-event-content{padding:8px 12px;color:var(--neutral-900);font-weight:500}.cax-timeline-event-connector{width:1px}}&.cax-timeline-horizontal{.cax-timeline-event-opposite,.cax-timeline-event-content{padding:8px 0;color:var(--neutral-900);font-weight:500}.cax-timeline-event-connector{height:2px}}}// timeline styles end // tabview styles start .cax-tabview{.cax-tabview-nav-content{scroll-padding-inline:var(--space-500);padding-right:0;height:100%;overflow-y:visible;&.scrollable-tabs{padding-right:5.5rem !important}}.cax-tabview-nav-container{height:56px;border-bottom:0 none}.cax-tabview-nav{background:transparent;border-bottom:2px solid var(--neutral-100);display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;li{margin-right:0;.cax-tabview-nav-link{background:transparent;color:var(--neutral-500);padding:var(--space-200);font-weight:500;font-size:16px;height:100%;transition:background-color var(--fill-standard),color var(--fill-standard),border-color var(--fill-standard),box-shadow var(--fill-standard),outline-color var(--fill-standard);width:100%;display:flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;&:hover{color:var(--neutral-900)}&:not(.cax-disabled):focus-visible{outline:2px solid var(--primary-300) !important;box-shadow:inset none;border-radius:12px;outline-offset:-2px}}&.cax-disabled{.cax-tabview-nav-link{color:var(--neutral-200) !important;cursor:default}}&.cax-highlight{.cax-tabview-nav-link{background:transparent;color:var(--primary-500);font-weight:600;&:hover{color:var(--primary-700)}}&:hover ~ .cax-tabview-ink-bar{background-color:var(--primary-700)}&.cax-disabled{.cax-tabview-nav-link{color:var(--neutral-200) !important}& ~ .cax-tabview-ink-bar{background-color:var(--neutral-200) !important}}}}}// Segment mode styles .cax-segment-tabview-nav{background:var(--white-100);border-width:0 0 var(--border-100) 0;height:100%;position:relative;display:inline-flex;min-width:100%;li{border-left:1px solid var(--neutral-100);margin-right:0;&:first-child{border-left:0 none}&:last-child{border-right:1px solid var(--neutral-100)}// Pinned tabs styling &.pinned{border-right:1px solid var(--neutral-100);border-left:0 none;.cax-tabview-left-icon{margin-right:0}&:first-child{border-left:0 none;// Redundant but safe}}// The tab immediately after a pinned tab shouldn't have a left border
                 &.pinned + li:not(.pinned) {
                     border-left: 0 none;
                 }
@@ -489,7 +489,7 @@
         font-weight: 500;
         width: 100%;
         min-width: 0;
-        background: transparent;
+        background: var(--white-100);
         padding: 8px 10px;
         border: var(--border-100) solid var(--neutral-300);
         border-radius: var(--radius-100);
@@ -1351,7 +1351,7 @@
     // dropdown styles start
 
     .cax-dropdown {
-        background: transparent;
+        background: var(--white-100);
         border: 1px solid var(--neutral-300);
         transition:
             background-color var(--fill-standard),
@@ -2695,6 +2695,7 @@
         border: var(--border-100) solid var(--neutral-300);
         border-radius: 8px;
         padding: 8px 10px;
+        background: var(--white-100);
         transition:
             background-color var(--fill-standard),
             color var(--fill-standard),
@@ -3374,7 +3375,7 @@
             align-items: center;
             flex-wrap: wrap;
             width: 100%;
-            background: transparent;
+            background: var(--white-100);
             border: var(--border-100) solid var(--neutral-300);
             border-radius: var(--radius-100);
             padding: 4px 8px;
@@ -5991,6 +5992,27 @@
         transition: height var(--fill-standard);
     }
 
+    .cax-slider .cax-slider-step-indicator {
+        background: var(--neutral-100);
+        transition:
+            background-color var(--fill-standard),
+            transform var(--fill-standard);
+    }
+    .cax-slider .cax-slider-step-indicator.cax-slider-step-active {
+        background: var(--primary-500);
+    }
+
+    .cax-slider.cax-disabled {
+        .cax-slider-step-indicator {
+            background: var(--neutral-100);
+            cursor: default;
+
+            &.cax-slider-step-active {
+                background: var(--neutral-300);
+            }
+        }
+    }
+
     // slider styles end
 }
 

package/resources/cax.scss

@@ -2313,7 +2313,6 @@
 
     .cax-chip-remove-icon {
         cursor: pointer;
-        z-index: 10;
     }
 
     .cax-chip img {
@@ -4923,7 +4922,7 @@
         font-weight: 500;
         width: 100%;
         min-width: 0;
-        background: transparent;
+        background: var(--white-100);
         padding: 8px 10px;
         border: var(--border-100) solid var(--neutral-300);
         border-radius: var(--radius-100);
@@ -5785,7 +5784,7 @@
     // dropdown styles start
 
     .cax-dropdown {
-        background: transparent;
+        background: var(--white-100);
         border: 1px solid var(--neutral-300);
         transition:
             background-color var(--fill-standard),
@@ -7129,6 +7128,7 @@
         border: var(--border-100) solid var(--neutral-300);
         border-radius: 8px;
         padding: 8px 10px;
+        background: var(--white-100);
         transition:
             background-color var(--fill-standard),
             color var(--fill-standard),
@@ -7808,7 +7808,7 @@
             align-items: center;
             flex-wrap: wrap;
             width: 100%;
-            background: transparent;
+            background: var(--white-100);
             border: var(--border-100) solid var(--neutral-300);
             border-radius: var(--radius-100);
             padding: 4px 8px;
@@ -10425,6 +10425,27 @@
         transition: height var(--fill-standard);
     }
 
+    .cax-slider .cax-slider-step-indicator {
+        background: var(--neutral-100);
+        transition:
+            background-color var(--fill-standard),
+            transform var(--fill-standard);
+    }
+    .cax-slider .cax-slider-step-indicator.cax-slider-step-active {
+        background: var(--primary-500);
+    }
+
+    .cax-slider.cax-disabled {
+        .cax-slider-step-indicator {
+            background: var(--neutral-100);
+            cursor: default;
+
+            &.cax-slider-step-active {
+                background: var(--neutral-300);
+            }
+        }
+    }
+
     // slider styles end
 }
 

package/resources/components/navigation/navigation.scss

@@ -142,7 +142,8 @@
         }
     }
 
-    .cax-overlaypanel {
+    .cax-overlaypanel.cax-nav-overlay,
+    .cax-overlaypanel.cax-nav-overlay-expand {
         width: 300px;
         overflow: visible !important;