vue-smart-ui
Version:
A collection of Vue 3 smart and highly customizable UI components for modern web applications
1 lines • 62.3 kB
CSS
:root{--vsui-color-primary: #3b82f6;--vsui-color-primary-dark: #2563eb;--vsui-color-primary-light: #e0e7ff;--vsui-color-primary-text: #1e40af;--vsui-color-secondary: #9333ea;--vsui-color-secondary-dark: #7e22ce;--vsui-color-secondary-light: #ede9fe;--vsui-color-secondary-text: #4338ca;--vsui-color-info: #3b82f6;--vsui-color-info-dark: #0284c7;--vsui-color-info-light: #dbeafe;--vsui-color-success: #22c55e;--vsui-color-success-dark: #15803d;--vsui-color-success-light: #f0fdf4;--vsui-color-warning: #f59e0b;--vsui-color-warning-dark: #92400e;--vsui-color-warning-light: #fefce8;--vsui-color-error: #ef4444;--vsui-color-error-dark: #991b1b;--vsui-color-error-light: #fee2e2;--vsui-bg-default: #ffffff;--vsui-bg-subtle: #f9fafb;--vsui-bg-muted: #f3f4f6;--vsui-bg-emphasized: #e5e7eb;--vsui-bg-disabled: #f3f4f6;--vsui-surface-default: #f9fafb;--vsui-surface-hover: #f3f4f6;--vsui-surface-active: #e5e7eb;--vsui-surface-selected: #eff6ff;--vsui-text-default: #111827;--vsui-text-muted: #374151;--vsui-text-subtle: #6b7280;--vsui-text-disabled: #9ca3af;--vsui-text-inverse: #ffffff;--vsui-border-default: #e5e7eb;--vsui-border-strong: #c0c4c9;--vsui-border-focus: #d1d5db;--vsui-color-white: #ffffff;--vsui-color-black: #000000}:root[data-theme=dark],:root.dark,html.dark :root,[data-theme=dark] :root{--vsui-color-primary: #60a5fa;--vsui-color-primary-dark: #3b82f6;--vsui-color-primary-light: #1e3a8a;--vsui-color-primary-text: #dbeafe;--vsui-color-secondary: #a855f7;--vsui-color-secondary-dark: #9333ea;--vsui-color-secondary-light: #4c1d95;--vsui-color-secondary-text: #ede9fe;--vsui-color-info: #60a5fa;--vsui-color-info-dark: #3b82f6;--vsui-color-info-light: #1e3a8a;--vsui-color-success: #4ade80;--vsui-color-success-dark: var(--vsui-text-default);--vsui-color-success-light: #14532d;--vsui-color-warning: #fbbf24;--vsui-color-warning-dark: var(--vsui-text-default);--vsui-color-warning-light: #78350f;--vsui-color-error: #f87171;--vsui-color-error-dark: var(--vsui-text-default);--vsui-color-error-light: #7f1d1d;--vsui-bg-default: #111827;--vsui-bg-subtle: #1f2937;--vsui-bg-muted: #374151;--vsui-bg-emphasized: #4b5563;--vsui-bg-disabled: #374151;--vsui-surface-default: #1f2937;--vsui-surface-hover: #374151;--vsui-surface-active: #4b5563;--vsui-surface-selected: #2563eb;--vsui-text-default: #f9fafb;--vsui-text-muted: #e5e7eb;--vsui-text-subtle: #9ca3af;--vsui-text-disabled: #6b7280;--vsui-text-inverse: #111827;--vsui-border-default: #4b5563;--vsui-border-strong: #6b7280;--vsui-border-focus: #9ca3af}.vsui{--color-primary: var(--vsui-color-primary);--color-primary-dark: var(--vsui-color-primary-dark);--color-primary-light: var(--vsui-color-primary-light);--color-primary-text: var(--vsui-color-primary-text);--color-secondary: var(--vsui-color-secondary);--color-secondary-dark: var(--vsui-color-secondary-dark);--color-secondary-light: var(--vsui-color-secondary-light);--color-secondary-text: var(--vsui-color-secondary-text);--color-info: var(--vsui-color-info);--color-info-dark: var(--vsui-color-info-dark);--color-info-light: var(--vsui-color-info-light);--color-success: var(--vsui-color-success);--color-success-dark: var(--vsui-color-success-dark);--color-success-light: var(--vsui-color-success-light);--color-warning: var(--vsui-color-warning);--color-warning-dark: var(--vsui-color-warning-dark);--color-warning-light: var(--vsui-color-warning-light);--color-error: var(--vsui-color-error);--color-error-dark: var(--vsui-color-error-dark);--color-error-light: var(--vsui-color-error-light);--bg-default: var(--vsui-bg-default);--bg-subtle: var(--vsui-bg-subtle);--bg-muted: var(--vsui-bg-muted);--bg-emphasized: var(--vsui-bg-emphasized);--bg-disabled: var(--vsui-bg-disabled);--surface-default: var(--vsui-surface-default);--surface-hover: var(--vsui-surface-hover);--surface-active: var(--vsui-surface-active);--surface-selected: var(--vsui-surface-selected);--text-default: var(--vsui-text-default);--text-muted: var(--vsui-text-muted);--text-subtle: var(--vsui-text-subtle);--text-disabled: var(--vsui-text-disabled);--text-inverse: var(--vsui-text-inverse);--border-default: var(--vsui-border-default);--border-strong: var(--vsui-border-strong);--border-focus: var(--vsui-border-focus);--color-white: var(--vsui-color-white);--color-black: var(--vsui-color-black);--font-family-base: "Roboto", sans-serif;--vsui-button-primary-bg: var(--vsui-color-primary);--vsui-button-primary-hover: var(--vsui-color-primary-dark);--vsui-button-primary-text: var(--vsui-color-white);--vsui-button-secondary-bg: var(--vsui-color-secondary);--vsui-button-secondary-hover: var(--vsui-color-secondary-dark);--vsui-button-secondary-text: var(--vsui-color-white);--vsui-button-gray-bg: var(--vsui-bg-muted);--vsui-button-gray-hover: var(--vsui-bg-emphasized);--vsui-button-gray-text: var(--vsui-text-muted);--vsui-button-outline-border: var(--vsui-border-strong);--vsui-button-outline-hover: var(--vsui-bg-muted);--vsui-button-outline-text: var(--vsui-text-muted);--vsui-button-ghost-text: var(--vsui-text-muted);--vsui-button-focus-outline: var(--vsui-color-primary);--vsui-button-small-font-size: .875rem;--vsui-button-medium-font-size: 1rem;--vsui-button-large-font-size: 1.125rem;--vsui-popup-default-color: var(--vsui-text-subtle);--vsui-popup-info-color: var(--vsui-color-info);--vsui-popup-success-color: var(--vsui-color-success);--vsui-popup-warning-color: var(--vsui-color-warning);--vsui-popup-error-color: var(--vsui-color-error);--vsui-popup-border-color: var(--vsui-border-strong);--vsui-popup-default-bg: var(--vsui-surface-default);--vsui-popup-info-bg: var(--vsui-surface-default);--vsui-popup-success-bg: var(--vsui-surface-default);--vsui-popup-warning-bg: var(--vsui-surface-default);--vsui-popup-error-bg: var(--vsui-surface-default);--vsui-toast-default-bg: var(--vsui-surface-default);--vsui-toast-default-color: var(--vsui-border-strong);--vsui-toast-default-text: var(--vsui-text-default);--vsui-toast-info-bg: var(--vsui-color-primary-light);--vsui-toast-info-color: var(--vsui-color-primary);--vsui-toast-info-text: var(--vsui-color-primary-text);--vsui-toast-success-bg: var(--vsui-color-success-light);--vsui-toast-success-color: var(--vsui-color-success);--vsui-toast-success-text: var(--vsui-color-success-dark);--vsui-toast-warning-bg: var(--vsui-color-warning-light);--vsui-toast-warning-color: var(--vsui-color-warning);--vsui-toast-warning-text: var(--vsui-color-warning-dark);--vsui-toast-error-bg: var(--vsui-color-error-light);--vsui-toast-error-color: var(--vsui-color-error);--vsui-toast-error-text: var(--vsui-color-error-dark);--toast-title-font-size: 1rem;--toast-message-font-size: .75rem;--vsui-dropdown-bg: var(--vsui-surface-default);--vsui-dropdown-border-color: var(--vsui-border-default);--vsui-dropdown-item-hover-bg: var(--vsui-surface-hover);--vsui-dropdown-dark-bg: var(--vsui-text-muted);--dropdown-dark-border-color: #4b5563;--dropdown-dark-item-hover-bg: #4b5563;--vsui-skeleton-bg: var(--bg-emphasized);--vsui-skeleton-rectangle-height: 1.5rem;--vsui-skeleton-circle-size: 3rem;--vsui-skeleton-heading-height: 2rem;--vsui-skeleton-button-height: 2.5rem;--vsui-skeleton-button-width: 8rem;--vsui-skeleton-text-height: 1rem;--vsui-skeleton-rounded-radius: .375rem;--vsui-skeleton-shine: rgba(255, 255, 255, .3);--vsui-accordion-border-color: var(--vsui-border-default);--vsui-accordion-header-color: var(--vsui-text-default);--vsui-accordion-hover-bg: var(--vsui-bg-subtle);--vsui-accordion-focus-ring: var(--vsui-color-primary);--vsui-input-label-color: var(--vsui-text-muted);--vsui-input-required-color: var(--vsui-color-error);--vsui-input-helper-color: var(--vsui-text-subtle);--vsui-input-border-color: var(--vsui-border-strong);--vsui-input-bg: var(--vsui-bg-subtle);--vsui-input-text-color: var(--vsui-text-default);--vsui-input-focus-border-color: var(--vsui-color-primary);--input-focus-ring-color: rgba(59, 130, 246, .1);--vsui-input-placeholder-color: var(--vsui-text-disabled);--vsui-input-disabled-bg: var(--vsui-bg-muted);--vsui-input-disabled-text: var(--vsui-text-subtle);--vsui-input-icon-color: var(--vsui-text-subtle);--vsui-input-filled-bg: var(--vsui-bg-muted);--vsui-input-filled-focus-bg: var(--vsui-bg-subtle);--vsui-input-success-color: var(--vsui-color-success);--vsui-input-error-color: var(--vsui-color-error);--vsui-input-warning-color: var(--vsui-color-warning);--input-label-font-size: .875rem;--input-field-font-size: .875rem;--input-helper-font-size: .75rem;--vsui-checkbox-border: 1px solid var(--checkbox-border-color);--vsui-checkbox-border-color: var(--border-strong);--vsui-checkbox-hover-border-color: var(--bg-emphasized);--vsui-checkbox-border-radius: .25rem;--vsui-checkbox-bg: var(--bg-subtle);--vsui-checkbox-check: var(--text-muted);--vsui-checkbox-text: var(--text-muted);--vsui-checkbox-small-font-size: .875rem;--vsui-checkbox-medium-font-size: 1rem;--vsui-checkbox-large-font-size: 1.125rem;--vsui-combobox-tag-bg: var(--vsui-bg-emphasized);--vsui-combobox-tag-text: var(--vsui-text-default);--vsui-combobox-tag-remove: var(--vsui-text-muted);--vsui-combobox-tag-remove-hover: var(--vsui-bg-muted);--vsui-combobox-clear-hover: var(--vsui-bg-subtle);--vsui-combobox-option-selected-bg: var(--vsui-color-primary-light);--vsui-combobox-option-selected-text: var(--vsui-color-primary);--vsui-combobox-option-text-color: var(--vsui-text-muted);--textarea-font-size: 1rem;--vsui-textarea-font-family: var(--vsui-font-family-base);--textarea-line-height: 1.6;--textarea-padding: .75rem 1rem;--textarea-border-radius: .5rem;--vsui-textarea-bg: var(--vsui-bg-subtle);--vsui-textarea-text-color: var(--vsui-text-default);--vsui-textarea-border-color: var(--vsui-border-strong);--vsui-textarea-focus-border-color: var(--vsui-color-primary);--vsui-textarea-success-color: var(--vsui-color-success);--vsui-textarea-error-color: var(--vsui-color-error);--vsui-textarea-warning-color: var(--vsui-color-warning);--vsui-textarea-filled-bg: var(--vsui-bg-muted);--vsui-textarea-filled-hover-bg: var(--vsui-bg-emphasized);--vsui-textarea-filled-focus-bg: var(--vsui-bg-subtle);--textarea-helper-font-size: .75rem;--textarea-label-font-size: .875rem;--slider-track-height: 6px;--vsui-slider-track-bg: var(--vsui-surface-active);--slider-track-radius: 3px;--vsui-slider-fill-color: var(--vsui-color-primary);--slider-thumb-size: 18px;--vsui-slider-thumb-bg: var(--vsui-surface-default);--slider-thumb-border-width: 2px;--vsui-slider-thumb-border-color: var(--vsui-color-primary);--slider-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .1);--slider-focus-ring-color: rgba(59, 130, 246, .1);--slider-value-font-size: .875rem;--vsui-slider-value-color: var(--vsui-text-muted);--vsui-slider-value-bubble-bg: var(--vsui-surface-default);--vsui-slider-value-bubble-color: var(--vsui-text-muted);--slider-value-bubble-font-size: .75rem;--slider-value-bubble-padding: 2px 6px;--slider-value-bubble-radius: 4px;--slider-value-bubble-shadow: 0 1px 2px rgba(0, 0, 0, .1);--slider-value-bubble-border: 1px solid var(--color-primary);--slider-mark-size: 4px;--vsui-slider-mark-color: var(--vsui-border-strong);--slider-mark-label-font-size: .75rem;--vsui-slider-mark-label-color: var(--vsui-text-subtle);--slider-mark-label-max-width: 80px;--slider-label-font-size: .875rem;--vsui-slider-label-color: var(--vsui-text-muted);--vsui-slider-required-color: var(--vsui-color-error);--slider-helper-font-size: .75rem;--vsui-slider-helper-color: var(--vsui-text-subtle);--slider-disabled-opacity: .6;--vsui-slider-disabled-track-bg: var(--vsui-bg-muted);--vsui-slider-disabled-thumb-bg: var(--vsui-bg-muted);--vsui-slider-disabled-thumb-border: var(--vsui-text-subtle);--vsui-slider-success-color: var(--vsui-color-success);--slider-success-ring-color: rgba(34, 197, 94, .1);--vsui-slider-error-color: var(--vsui-color-error);--slider-error-ring-color: rgba(239, 68, 68, .1);--vsui-slider-warning-color: var(--vsui-color-warning);--slider-warning-ring-color: rgba(245, 158, 11, .1);--vsui-slider-filled-bg: var(--vsui-bg-muted);--vsui-avatar-default-bg: var(--vsui-bg-muted);--vsui-avatar-default-text: var(--vsui-text-muted);--vsui-avatar-default-border: var(--vsui-border-default);--vsui-avatar-filled-bg: var(--vsui-color-primary);--vsui-avatar-filled-text: var(--vsui-color-white);--vsui-avatar-filled-border: var(--vsui-color-primary);--vsui-avatar-outlined-bg: var(--vsui-bg-default);--vsui-avatar-outlined-text: var(--vsui-text-muted);--vsui-avatar-outlined-border: var(--vsui-border-strong);--vsui-avatar-status-online: var(--vsui-color-success);--vsui-avatar-status-offline: var(--vsui-text-disabled);--vsui-avatar-status-away: var(--vsui-color-warning);--vsui-avatar-status-busy: var(--vsui-color-error);--vsui-avatar-disabled-opacity: .6;--vsui-table-border-color: var(--vsui-border-default);--table-border-radius: .5rem;--vsui-table-header-bg: var(--vsui-surface-default);--vsui-table-header-text-color: var(--vsui-text-muted);--table-header-font-weight: 600;--table-header-padding: .75rem;--vsui-table-body-bg: var(--vsui-bg-default);--vsui-table-row-hover-bg: var(--vsui-surface-hover);--vsui-table-row-selected-bg: var(--vsui-surface-selected);--vsui-table-stripe-bg: var(--vsui-bg-subtle);--table-cell-padding: .75rem;--vsui-table-cell-text-color: var(--vsui-text-muted);--vsui-table-cell-border-color: var(--vsui-border-default);--table-sort-icon-opacity: .5;--table-sort-icon-size: .75rem;--vsui-table-sort-active-color: var(--vsui-color-primary);--table-filter-margin-top: .5rem;--vsui-table-empty-text-color: var(--vsui-text-subtle);--table-empty-padding: 2rem;--vsui-table-pagination-bg: var(--vsui-surface-default);--vsui-table-pagination-border-color: var(--vsui-border-default);--table-pagination-padding: 1rem;--table-pagination-gap: 1rem;--vsui-table-pagination-info-color: var(--vsui-text-subtle);--table-pagination-info-font-size: .875rem;--vsui-table-pagination-pages-color: var(--vsui-text-muted);--table-pagination-pages-font-size: .875rem;--table-actions-gap: .5rem;--table-actions-justify-content: center;--table-checkbox-width: 2.5rem;--table-checkbox-padding: .75rem .5rem;--table-small-padding: .5rem;--table-small-font-size: .875rem;--table-large-padding: 1rem;--table-large-font-size: 1.125rem;font-family:var(--font-family-base)}.base-accordion{width:100%}.base-accordion--default{border:1px solid var(--vsui-accordion-border-color, #e5e7eb);border-radius:.5rem;overflow:hidden}.base-accordion--bordered .base-accordion-item{border-bottom:1px solid var(--vsui-accordion-border-color, #e5e7eb)}.base-accordion--bordered .base-accordion-item:last-child{border-bottom:none}.base-accordion--minimal .base-accordion-item{margin-bottom:.5rem}.base-accordion--minimal .base-accordion-item:last-child{margin-bottom:0}.base-accordion-item__header{width:100%;display:flex;align-items:center;gap:.75rem;padding:1rem;background:none;border:none;cursor:pointer;text-align:left;font-size:1rem;font-weight:500;color:var(--vsui-accordion-header-color, #111827)}.base-accordion-item__header:hover{background-color:var(--vsui-accordion-hover-bg, #f9fafb)}.base-accordion-item__header:focus{outline:2px solid var(--vsui-accordion-focus-ring, #3b82f6);outline-offset:-2px}.base-accordion-item__chevron{margin-left:auto;transition:transform .2s}.base-accordion-item__content{overflow:hidden;transition:height .2s ease-in-out}.base-accordion-item__body{padding:0 1rem 1rem}.base-accordion-item--active .base-accordion-item__chevron{transform:rotate(180deg)}.base-accordion-item--disabled{opacity:.5;cursor:not-allowed}.base-accordion-item--disabled .base-accordion-item__header{cursor:not-allowed}.base-button{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;border-radius:.375rem;font-weight:500;transition:all .2s ease;border:none;cursor:pointer}.base-button--primary{background-color:var(--vsui-button-primary-bg);color:var(--vsui-button-primary-text)}.base-button--primary:hover:not(:disabled){background-color:var(--vsui-button-primary-hover)}.base-button--secondary{background-color:var(--vsui-button-secondary-bg);color:var(--vsui-button-secondary-text)}.base-button--secondary:hover:not(:disabled){background-color:var(--vsui-button-secondary-hover)}.base-button--gray{background-color:var(--vsui-button-gray-bg);color:var(--vsui-button-gray-text)}.base-button--gray:hover:not(:disabled){background-color:var(--vsui-button-gray-hover)}.base-button--outline{background-color:transparent;border:1px solid var(--vsui-button-outline-border);color:var(--vsui-button-outline-text)}.base-button--outline:hover:not(:disabled){background-color:var(--vsui-button-outline-hover)}.base-button--ghost{background-color:transparent;color:var(--vsui-button-ghost-text)}.base-button--ghost:hover:not(:disabled){opacity:.8}.base-button--icon-only{aspect-ratio:1/1}.base-button--icon-only.base-button--small{width:2rem;height:2rem;padding:0}.base-button--icon-only.base-button--medium{width:2.5rem;height:2.5rem;padding:0}.base-button--icon-only.base-button--large{width:3rem;height:3rem;padding:0}.base-button--small{padding:.5rem 1rem;font-size:var(--vsui-button-small-font-size)}.base-button--medium{padding:.75rem 1.5rem;font-size:var(--vsui-button-medium-font-size)}.base-button--large{padding:1rem 2rem;font-size:var(--vsui-button-large-font-size)}.base-button--auto{padding:0;margin:0;width:auto}.base-button--block{width:100%}.base-button--disabled{opacity:.5;cursor:not-allowed}.base-button:focus{outline:2px solid var(--vsui-button-focus-outline);outline-offset:2px}.base-button--loading{position:relative}.base-button .button-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.base-button .button-content.hidden{visibility:hidden}.base-button .spinner{width:1em;height:1em;border:3px solid currentColor;border-bottom-color:transparent;border-radius:50%;display:inline-block;animation:rotation 1s linear infinite;position:absolute}.base-button :deep([name="prefix"]),.base-button :deep([name="suffix"]){display:inline-flex;align-items:center;justify-content:center}.base-button :deep([name="prefix"]) svg,.base-button :deep([name="suffix"]) svg{width:1em;height:1em}.base-checkbox{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.base-checkbox__input{position:absolute;opacity:0;width:0;height:0}.base-checkbox__checkmark{position:relative;display:inline-flex;align-items:center;justify-content:center;border:var(--vsui-checkbox-border);border-radius:var(--vsui-checkbox-border-radius);background-color:var(--vsui-checkbox-bg);color:var(--vsui-checkbox-check);transition:all .2s ease}.base-checkbox__checkmark svg{opacity:0;transform:scale(.8);transition:all .2s ease}.base-checkbox__label{color:var(--vsui-checkbox-text)}.base-checkbox--small{font-size:var(--vsui-checkbox-small-font-size)}.base-checkbox--small .base-checkbox__checkmark{width:16px;height:16px}.base-checkbox--small .base-checkbox__checkmark svg{width:12px;height:12px}.base-checkbox--medium{font-size:var(--vsui-checkbox-medium-font-size)}.base-checkbox--medium .base-checkbox__checkmark{width:20px;height:20px}.base-checkbox--medium .base-checkbox__checkmark svg{width:14px;height:14px}.base-checkbox--large{font-size:var(--vsui-checkbox-large-font-size)}.base-checkbox--large .base-checkbox__checkmark{width:24px;height:24px}.base-checkbox--large .base-checkbox__checkmark svg{width:16px;height:16px}.base-checkbox input:checked+.base-checkbox__checkmark svg,.base-checkbox input:indeterminate+.base-checkbox__checkmark svg{opacity:1;transform:scale(1)}.base-checkbox:hover:not(.base-checkbox--disabled) .base-checkbox__checkmark{border-color:var(--vsui-checkbox-hover-border-color, var(--vsui-checkbox-border-color))}.base-checkbox--disabled{cursor:not-allowed;opacity:.5}.base-checkbox--error{--checkbox-hover-border-color: var(--vsui-input-error-color)}.base-checkbox--error .base-checkbox__checkmark{border-color:var(--vsui-input-error-color)}.base-checkbox--error .base-checkbox__label{color:var(--vsui-input-error-color)}.base-checkbox input:focus-visible+.base-checkbox__checkmark{outline-offset:2px}.base-dropdown{position:relative;display:inline-block}.base-dropdown__trigger{cursor:pointer}.base-dropdown__menu{position:absolute;top:100%;right:0;margin-top:.5rem;z-index:50;border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;min-width:10rem}.base-dropdown__menu--default{background-color:var(--vsui-dropdown-bg, #ffffff);border:1px solid var(--vsui-dropdown-border-color, #e5e7eb)}.base-dropdown__menu--white{background-color:#fff;border:1px solid #e5e7eb}.base-dropdown__menu--dark{background-color:var(--vsui-dropdown-dark-bg, #374151);border:1px solid var(--vsui-dropdown-dark-border-color, #4b5563);color:#fff}.dropdown-enter-active,.dropdown-leave-active{transition:opacity .2s,transform .2s}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-.25rem)}.base-dropdown-item{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer;transition:background-color .2s}.base-dropdown-item:hover{background-color:var(--vsui-dropdown-item-hover-bg, #f3f4f6)}.base-dropdown__menu--dark .base-dropdown-item:hover{background-color:var(--vsui-dropdown-dark-item-hover-bg, #4b5563)}.infinite-scroll__loader{display:flex;align-items:center;justify-content:center;padding:2rem 1rem;gap:.5rem;color:#6b7280}.infinite-scroll__loader .spinner{width:1em;height:1em;border:2px solid currentColor;border-bottom-color:transparent;border-radius:50%;display:inline-block;animation:rotation 1s linear infinite}.infinite-scroll__end{text-align:center;padding:2rem 1rem;color:#6b7280}.base-input{display:flex;flex-direction:column;gap:.25rem}.base-input__label{font-size:var(--vsui-input-label-font-size);font-weight:500;color:var(--vsui-input-label-color, #374151)}.base-input__required{color:var(--vsui-input-required-color, #ef4444);margin-left:.25rem}.base-input__wrapper{position:relative;display:flex;align-items:center;width:100%;border-radius:.375rem;border:1px solid var(--vsui-input-border-color, #d1d5db);background-color:var(--vsui-input-bg, white);transition:all .2s}.base-input__field{flex:1;width:100%;padding:.625rem .75rem;font-size:var(--vsui-input-field-font-size);border:none;background-color:transparent;color:var(--vsui-input-text-color, #374151);font-family:var(--vsui-font-family-base, inherit)}.base-input__field:focus{outline:none}.base-input__field::placeholder{color:var(--vsui-input-placeholder-color, #9ca3af)}.base-input__prefix,.base-input__suffix{display:flex;align-items:center;padding:0 .75rem;color:var(--vsui-input-icon-color, #6b7280);z-index:1}.base-input__prefix{padding-right:0}.base-input__suffix{padding-left:0}.base-input__helper{font-size:var(--vsui-input-helper-font-size);color:var(--vsui-input-helper-color, #6b7280)}.base-input--success .base-input__wrapper{border-color:var(--vsui-input-success-color, #22c55e)!important}.base-input--success .base-input__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-input-success-ring-color, rgba(34, 197, 94, .1))}.base-input--success .base-input__helper{color:var(--vsui-input-success-color, #22c55e)}.base-input--error .base-input__wrapper{border-color:var(--vsui-input-error-color, #ef4444)!important}.base-input--error .base-input__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-input-error-ring-color, rgba(239, 68, 68, .1))}.base-input--error .base-input__helper{color:var(--vsui-input-error-color, #ef4444)}.base-input--warning .base-input__wrapper{border-color:var(--vsui-input-warning-color, #f59e0b)!important}.base-input--warning .base-input__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-input-warning-ring-color, rgba(245, 158, 11, .1))}.base-input--warning .base-input__helper{color:var(--vsui-input-warning-color, #f59e0b)}.base-input__wrapper:focus-within{border-color:var(--vsui-input-focus-border-color, #3b82f6);box-shadow:0 0 0 3px var(--vsui-input-focus-ring-color, rgba(59, 130, 246, .1))}.base-input--filled .base-input__wrapper{background-color:var(--vsui-input-filled-bg, #f3f4f6);border-color:transparent}.base-input--filled .base-input__wrapper:hover{background-color:var(--vsui-input-filled-hover-bg, #e5e7eb)}.base-input--filled .base-input__wrapper:focus-within{background-color:var(--vsui-input-filled-focus-bg, #f9fafb)}.base-input--outlined .base-input__wrapper{border-width:2px}.base-input--disabled{opacity:.6;cursor:not-allowed}.base-input--disabled .base-input__field{cursor:not-allowed}.base-input--disabled .base-input__prefix button,.base-input--disabled .base-input__prefix [role=button],.base-input--disabled .base-input__suffix button,.base-input--disabled .base-input__suffix [role=button]{pointer-events:none;opacity:.6;cursor:not-allowed}.base-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;z-index:1000}.base-popup-overlay--center{align-items:center;justify-content:center}.base-popup-overlay--top{align-items:flex-start;justify-content:center;padding-top:2rem}.base-popup-overlay--bottom{align-items:flex-end;justify-content:center;padding-bottom:2rem}.base-popup-overlay--left{align-items:center;justify-content:flex-start;padding-left:2rem}.base-popup-overlay--right{align-items:center;justify-content:flex-end;padding-right:2rem}.base-popup{background-color:#fff;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;position:relative;max-height:90vh;overflow-y:auto}.base-popup--default{background-color:var(--vsui-popup-default-bg, white);border:1px solid var(--vsui-popup-border-color, #e5e7eb)}.base-popup--info{background-color:var(--vsui-popup-info-bg, #eff6ff);border:1px solid var(--vsui-popup-info-color, #3b82f6)}.base-popup--info .base-popup__header{background-color:var(--vsui-popup-info-color, #3b82f6);color:#fff}.base-popup--success{background-color:var(--vsui-popup-success-bg, #f0fdf4);border:1px solid var(--vsui-popup-success-color, #22c55e)}.base-popup--success .base-popup__header{background-color:var(--vsui-popup-success-color, #22c55e);color:#fff}.base-popup--warning{background-color:var(--vsui-popup-warning-bg, #fffbeb);border:1px solid var(--vsui-popup-warning-color, #f59e0b)}.base-popup--warning .base-popup__header{background-color:var(--vsui-popup-warning-color, #f59e0b);color:#fff}.base-popup--error{background-color:var(--vsui-popup-error-bg, #fef2f2);border:1px solid var(--vsui-popup-error-color, #ef4444)}.base-popup--error .base-popup__header{background-color:var(--vsui-popup-error-color, #ef4444);color:#fff}.base-popup--small{width:300px}.base-popup--small .base-popup__content{padding:1rem}.base-popup--medium{width:500px}.base-popup--medium .base-popup__content{padding:1.5rem}.base-popup--large{width:800px}.base-popup--large .base-popup__content{padding:2rem}.base-popup__header{padding:1rem;border-bottom:1px solid var(--vsui-popup-border-color, #e5e7eb)}.base-popup__footer{padding:1rem;border-top:1px solid var(--vsui-popup-border-color, #e5e7eb)}.base-popup__close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer;padding:.25rem}.base-popup__close:hover{opacity:.7}.base-skeleton{display:block;background-color:var(--vsui-skeleton-bg, #e5e7eb);position:relative;overflow:hidden}.base-skeleton--rectangle{height:var(--vsui-skeleton-rectangle-height, 1.5rem)}.base-skeleton--circle{border-radius:50%;height:var(--vsui-skeleton-circle-size, 3rem);width:var(--vsui-skeleton-circle-size, 3rem)}.base-skeleton--text{height:var(--vsui-skeleton-text-height, 1rem);margin:.5rem 0}.base-skeleton--text:last-child{width:80%}.base-skeleton--heading{height:var(--vsui-skeleton-heading-height, 2rem);margin:1rem 0}.base-skeleton--button{height:var(--vsui-skeleton-button-height, 2.5rem);width:var(--vsui-skeleton-button-width, 8rem)}.base-skeleton--rounded{border-radius:.375rem}.base-skeleton--animated:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--vsui-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:skeleton-shine 1.5s infinite}@keyframes skeleton-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.base-slider{font-family:var(--vsui-font-family-base);display:flex;flex-direction:column;width:100%;margin-bottom:1rem}.base-slider__label{display:block;margin-bottom:.5rem;font-size:var(--vsui-slider-label-font-size, .875rem);font-weight:500;color:var(--vsui-slider-label-color, #374151)}.base-slider__required{color:var(--vsui-slider-required-color, #ef4444);margin-left:.25rem}.base-slider__container{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;margin-bottom:1.5rem}.base-slider__extremity-value{font-size:var(--vsui-slider-value-font-size, .875rem);color:var(--vsui-slider-value-color, #374151);min-width:2rem}.base-slider__extremity-value--min{text-align:right}.base-slider__extremity-value--max{text-align:left}.base-slider__track{position:relative;height:var(--vsui-slider-track-height, 6px);flex-grow:1;background-color:var(--vsui-slider-track-bg, #e5e7eb);border-radius:var(--vsui-slider-track-radius, 3px);cursor:pointer}.base-slider__track-fill{position:absolute;height:100%;background-color:var(--vsui-slider-fill-color, #3b82f6);border-radius:var(--vsui-slider-track-radius, 3px);pointer-events:none}.base-slider__thumb{position:absolute;top:50%;width:var(--vsui-slider-thumb-size, 18px);height:var(--vsui-slider-thumb-size, 18px);background-color:var(--vsui-slider-thumb-bg, #ffffff);border:var(--vsui-slider-thumb-border-width, 2px) solid var(--vsui-slider-thumb-border-color, #3b82f6);border-radius:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:var(--vsui-slider-thumb-shadow, 0 2px 4px rgba(0, 0, 0, .1));transition:box-shadow .2s,transform .1s}.base-slider__thumb:hover{transform:translate(-50%,-50%) scale(1.1)}.base-slider__thumb:focus{outline:none;box-shadow:0 0 0 3px var(--vsui-slider-focus-ring-color, rgba(59, 130, 246, .1))}.base-slider__thumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.base-slider__thumb-value{position:absolute;top:-28px;left:50%;transform:translate(-50%);background-color:var(--vsui-slider-value-bubble-bg, #ffffff);color:var(--vsui-slider-value-bubble-color, #374151);font-size:var(--vsui-slider-value-bubble-font-size, .75rem);padding:var(--vsui-slider-value-bubble-padding, 2px 6px);border-radius:var(--vsui-slider-value-bubble-radius, 4px);white-space:nowrap;box-shadow:var(--vsui-slider-value-bubble-shadow, 0 1px 2px rgba(0, 0, 0, .1));border:var(--vsui-slider-value-bubble-border, 1px solid #3b82f6);pointer-events:none}.base-slider__mark{position:absolute;top:100%;left:0;transform:translate(-50%)}.base-slider__mark-dot{width:var(--vsui-slider-mark-size, 4px);height:var(--vsui-slider-mark-size, 4px);margin-top:8px;background-color:var(--vsui-slider-mark-color, #9ca3af);border-radius:50%}.base-slider__mark-label{margin-top:4px;font-size:var(--vsui-slider-mark-label-font-size, .75rem);color:var(--vsui-slider-mark-label-color, #6b7280);white-space:nowrap;text-align:center;transform:translate(-50%);position:absolute;left:50%;max-width:var(--vsui-slider-mark-label-max-width, 80px);overflow:hidden;text-overflow:ellipsis}.base-slider__mark--active .base-slider__mark-dot{background-color:var(--vsui-slider-fill-color, #3b82f6)}.base-slider__helper{margin-top:.25rem;font-size:var(--vsui-slider-helper-font-size, .75rem);color:var(--vsui-slider-helper-color, #6b7280)}.base-slider--disabled{opacity:var(--vsui-slider-disabled-opacity, .6);pointer-events:none}.base-slider--disabled .base-slider__track{background-color:var(--vsui-slider-disabled-track-bg, #f3f4f6)}.base-slider--disabled .base-slider__thumb{background-color:var(--vsui-slider-disabled-thumb-bg, #f3f4f6);border-color:var(--vsui-slider-disabled-thumb-border, #6b7280)}.base-slider--success .base-slider__track-fill{background-color:var(--vsui-slider-success-color, #22c55e)}.base-slider--success .base-slider__thumb{border-color:var(--vsui-slider-success-color, #22c55e)}.base-slider--success .base-slider__thumb:focus{box-shadow:0 0 0 3px var(--vsui-slider-success-ring-color, rgba(34, 197, 94, .1))}.base-slider--success .base-slider__thumb-value{border-color:var(--vsui-slider-success-color, #22c55e)}.base-slider--success .base-slider__helper{color:var(--vsui-slider-success-color, #22c55e)}.base-slider--error .base-slider__track-fill{background-color:var(--vsui-slider-error-color, #ef4444)}.base-slider--error .base-slider__thumb{border-color:var(--vsui-slider-error-color, #ef4444)}.base-slider--error .base-slider__thumb:focus{box-shadow:0 0 0 3px var(--vsui-slider-error-ring-color, rgba(239, 68, 68, .1))}.base-slider--error .base-slider__thumb-value{border-color:var(--vsui-slider-error-color, #ef4444)}.base-slider--error .base-slider__helper{color:var(--vsui-slider-error-color, #ef4444)}.base-slider--warning .base-slider__track-fill{background-color:var(--vsui-slider-warning-color, #f59e0b)}.base-slider--warning .base-slider__thumb{border-color:var(--vsui-slider-warning-color, #f59e0b)}.base-slider--warning .base-slider__thumb:focus{box-shadow:0 0 0 3px var(--vsui-slider-warning-ring-color, rgba(245, 158, 11, .1))}.base-slider--warning .base-slider__thumb-value{border-color:var(--vsui-slider-warning-color, #f59e0b)}.base-slider--warning .base-slider__helper{color:var(--vsui-slider-warning-color, #f59e0b)}.base-slider--filled .base-slider__track{background-color:var(--vsui-slider-filled-bg, #f3f4f6)}.base-textarea{display:inline-flex;flex-direction:column;gap:.25rem;min-width:20rem}.base-textarea__label{font-size:var(--vsui-textarea-label-font-size, .875rem);font-weight:500;color:var(--vsui-textarea-label-color, #374151)}.base-textarea__required{color:var(--vsui-textarea-required-color, #ef4444);margin-left:.25rem}.base-textarea__wrapper{position:relative;width:100%;border-radius:var(--vsui-textarea-border-radius, .375rem);border:1px solid var(--vsui-textarea-border-color, #d1d5db);background-color:var(--vsui-textarea-bg, white);transition:all .2s}.base-textarea__field{width:100%;padding:var(--vsui-textarea-padding, .625rem .75rem);font-size:var(--vsui-textarea-font-size, .875rem);line-height:var(--vsui-textarea-line-height, 1.5);color:var(--vsui-textarea-text-color, #111827);border:none;background-color:transparent;box-sizing:border-box;font-family:var(--vsui-font-family-base, inherit)}.base-textarea__field:focus{outline:none}.base-textarea__field::placeholder{color:var(--vsui-textarea-placeholder-color, #9ca3af)}.base-textarea__helper{font-size:var(--vsui-textarea-helper-font-size, .75rem);color:var(--vsui-textarea-helper-color, #6b7280)}.base-textarea--success .base-textarea__wrapper{border-color:var(--vsui-textarea-success-color, #22c55e)!important}.base-textarea--success .base-textarea__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-textarea-success-ring-color, rgba(34, 197, 94, .1))}.base-textarea--success .base-textarea__helper{color:var(--vsui-textarea-success-color, #22c55e)}.base-textarea--error .base-textarea__wrapper{border-color:var(--vsui-textarea-error-color, #ef4444)!important}.base-textarea--error .base-textarea__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-textarea-error-ring-color, rgba(239, 68, 68, .1))}.base-textarea--error .base-textarea__helper{color:var(--vsui-textarea-error-color, #ef4444)}.base-textarea--warning .base-textarea__wrapper{border-color:var(--vsui-textarea-warning-color, #f59e0b)!important}.base-textarea--warning .base-textarea__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-textarea-warning-ring-color, rgba(245, 158, 11, .1))}.base-textarea--warning .base-textarea__helper{color:var(--vsui-textarea-warning-color, #f59e0b)}.base-textarea__wrapper:focus-within{border-color:var(--vsui-textarea-focus-border-color, #3b82f6);box-shadow:0 0 0 3px var(--vsui-textarea-focus-ring-color, rgba(59, 130, 246, .1))}.base-textarea--filled .base-textarea__wrapper{background-color:var(--vsui-textarea-filled-bg, #f3f4f6);border-color:transparent}.base-textarea--filled .base-textarea__wrapper:hover{background-color:var(--vsui-textarea-filled-hover-bg, #e5e7eb)}.base-textarea--filled .base-textarea__wrapper:focus-within{background-color:var(--vsui-textarea-filled-focus-bg, #f9fafb)}.base-textarea--outlined .base-textarea__wrapper{border-width:var(--vsui-textarea-outlined-border-width, 2px)}.base-textarea--disabled{opacity:var(--vsui-textarea-disabled-opacity, .6);cursor:not-allowed}.base-textarea--disabled .base-textarea__field{cursor:not-allowed}.base-textarea--block{display:flex;width:100%}.base-textarea--resize-none .base-textarea__field{resize:none}.base-textarea--resize-both .base-textarea__field{resize:both}.base-textarea--resize-horizontal .base-textarea__field{resize:horizontal}.base-textarea--resize-vertical .base-textarea__field{resize:vertical}.base-toast{position:relative;display:flex;align-items:center;padding:1rem;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a;min-width:300px;max-width:400px;transition:all .3s ease;overflow:hidden}.base-toast--default{background-color:var(--vsui-toast-default-bg, #fff);border:1px solid var(--vsui-toast-default-color, #e5e7eb);color:var(--vsui-toast-default-text, #1f2937)}.base-toast--info{background-color:var(--vsui-toast-info-bg, #eff6ff);border:1px solid var(--vsui-toast-info-color, #3b82f6);color:var(--vsui-toast-info-text, #1e40af)}.base-toast--success{background-color:var(--vsui-toast-success-bg, #f0fdf4);border:1px solid var(--vsui-toast-success-color, #22c55e);color:var(--vsui-toast-success-text, #15803d)}.base-toast--warning{background-color:var(--vsui-toast-warning-bg, #fffbeb);border:1px solid var(--vsui-toast-warning-color, #f59e0b);color:var(--vsui-toast-warning-text, #b45309)}.base-toast--error{background-color:var(--vsui-toast-error-bg, #fef2f2);border:1px solid var(--vsui-toast-error-color, #ef4444);color:var(--vsui-toast-error-text, #b91c1c)}.base-toast__icon{flex-shrink:0;margin-right:.75rem;width:1.5rem;height:1.5rem}.base-toast__content{flex:1}.base-toast__title{font-weight:600;margin-bottom:.25rem;font-size:var(--vsui-toast-title-font-size)}.base-toast__message{font-size:var(--vsui-toast-message-font-size)}.base-toast__close{background:none;border:none;padding:.25rem;margin:-.25rem;cursor:pointer;color:currentColor;opacity:.6;font-size:1.5rem}.base-toast__close:hover{opacity:1}.base-toast .progress-bar{position:absolute;bottom:0;left:0;width:100%;height:3px;transform-origin:left;animation:progress linear forwards}.base-toast .progress-bar--default{background-color:var(--vsui-toast-default-color, #9ca3af)}.base-toast .progress-bar--info{background-color:var(--vsui-toast-info-color, #3b82f6)}.base-toast .progress-bar--success{background-color:var(--vsui-toast-success-color, #22c55e)}.base-toast .progress-bar--warning{background-color:var(--vsui-toast-warning-color, #f59e0b)}.base-toast .progress-bar--error{background-color:var(--vsui-toast-error-color, #ef4444)}.base-toast--simple{padding:.75rem 1rem;min-width:200px}.base-toast--simple .base-toast__message{margin:0}.base-toast--simple .base-toast__close{margin-left:.5rem}@keyframes progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.base-segmented-buttons-wrapper{display:flex;flex-direction:column;gap:.25rem}.base-segmented-buttons{display:inline-flex;align-items:center}.base-segmented-buttons__label{font-size:var(--vsui-input-label-font-size, .875rem);font-weight:500;color:var(--vsui-input-label-color, #374151)}.base-segmented-buttons__required{color:var(--vsui-input-required-color, #ef4444);margin-left:.25rem}.base-segmented-buttons__helper{font-size:var(--vsui-input-helper-font-size, .75rem);color:var(--vsui-input-helper-color, #6b7280);margin-top:.25rem}.base-segmented-buttons__helper--error{color:var(--vsui-input-error-color, #ef4444)}.base-segmented-buttons--block{width:100%}.base-segmented-buttons--block .base-segmented-buttons__button{flex:1}.base-segmented-buttons--disabled{opacity:.5;pointer-events:none}.base-segmented-buttons--error .base-segmented-buttons__button{border-color:var(--vsui-input-error-color, #ef4444)}.base-segmented-buttons__button{display:inline-flex;align-items:center;justify-content:center;font-weight:500;transition:all .2s ease;border:1px solid var(--vsui-button-outline-border, #d1d5db);background-color:transparent;cursor:pointer;margin:0;position:relative}.base-segmented-buttons__button:focus{outline:2px solid var(--vsui-button-focus-outline, rgba(59, 130, 246, .5));outline-offset:2px;z-index:2}.base-segmented-buttons__button--first{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.base-segmented-buttons__button--last{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.base-segmented-buttons__button--middle{border-left:none}.base-segmented-buttons__button--last:not(.base-segmented-buttons__button--first){border-left:none}.base-segmented-buttons__button--selected{z-index:1}.base-segmented-buttons__button--primary{color:var(--vsui-button-outline-text, #374151)}.base-segmented-buttons__button--primary:hover:not(:disabled):not(.base-segmented-buttons__button--selected){background-color:var(--vsui-button-outline-hover, rgba(229, 231, 235, .5))}.base-segmented-buttons__button--primary.base-segmented-buttons__button--selected{background-color:var(--vsui-button-primary-bg, #3b82f6);color:var(--vsui-button-primary-text, white);border-color:var(--vsui-button-primary-bg, #3b82f6)}.base-segmented-buttons__button--secondary{color:var(--vsui-button-outline-text, #374151)}.base-segmented-buttons__button--secondary:hover:not(:disabled):not(.base-segmented-buttons__button--selected){background-color:var(--vsui-button-outline-hover, rgba(229, 231, 235, .5))}.base-segmented-buttons__button--secondary.base-segmented-buttons__button--selected{background-color:var(--vsui-button-secondary-bg, #6b7280);color:var(--vsui-button-secondary-text, white);border-color:var(--vsui-button-secondary-bg, #6b7280)}.base-segmented-buttons__button--gray{color:var(--vsui-button-outline-text, #374151)}.base-segmented-buttons__button--gray:hover:not(:disabled):not(.base-segmented-buttons__button--selected){background-color:var(--vsui-button-outline-hover, rgba(229, 231, 235, .5))}.base-segmented-buttons__button--gray.base-segmented-buttons__button--selected{background-color:var(--vsui-button-gray-bg, #e5e7eb);color:var(--vsui-button-gray-text, #111827);border-color:var(--vsui-button-gray-bg, #e5e7eb)}.base-segmented-buttons--small .base-segmented-buttons__button{height:2rem;padding:0 .75rem;font-size:.75rem}.base-segmented-buttons--medium .base-segmented-buttons__button{height:2.5rem;padding:0 1rem;font-size:.875rem}.base-segmented-buttons--large .base-segmented-buttons__button{height:3rem;padding:0 1.25rem;font-size:1rem}.base-color-picker{position:relative}.base-color-picker__container{position:relative;width:100%}.base-color-picker__preview{width:1.5rem;height:1.5rem;border-radius:.25rem;border:1px solid rgba(0,0,0,.1);cursor:pointer}.base-color-picker__icon{display:flex;align-items:center;justify-content:center;color:var(--vsui-input-icon-color, #6b7280);cursor:pointer}.base-color-picker__popup{position:absolute;top:100%;left:0;margin-top:.5rem;background-color:var(--vsui-surface-default, white);border:1px solid var(--vsui-border-default, #e5e7eb);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:10;padding:1rem;min-width:240px}.base-color-picker__color-input{width:100%;height:40px;border:none;padding:0;background-color:transparent;cursor:pointer}.base-color-picker__color-input::-webkit-color-swatch-wrapper{padding:0}.base-color-picker__color-input::-webkit-color-swatch{border:1px solid var(--vsui-border-default, #e5e7eb);border-radius:.25rem}.base-color-picker__presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.base-color-picker__preset{width:1.5rem;height:1.5rem;border-radius:.25rem;border:1px solid var(--vsui-border-default, #e5e7eb);cursor:pointer;transition:all .2s}.base-color-picker__preset:hover{transform:scale(1.1)}.base-color-picker__preset--active{box-shadow:0 0 0 2px var(--vsui-color-primary, #3b82f6)}.base-color-picker--disabled .base-color-picker__preview,.base-color-picker--disabled .base-color-picker__icon{cursor:not-allowed;opacity:.6}.base-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative}.base-combobox__label{font-size:var(--vsui-input-label-font-size, .875rem);font-weight:500;color:var(--vsui-input-label-color, #374151)}.base-combobox__required{color:var(--vsui-input-required-color, #ef4444);margin-left:.25rem}.base-combobox__wrapper{position:relative;display:flex;align-items:center;width:100%;border-radius:.375rem;border:1px solid var(--vsui-input-border-color, #d1d5db);background-color:var(--vsui-input-bg, white);transition:all .2s;cursor:pointer;box-sizing:border-box}.base-combobox__wrapper:focus{outline:none}.base-combobox__field{flex:1;width:100%;min-width:0;padding:.625rem .75rem;font-size:var(--vsui-input-field-font-size, 1rem);border:none;background-color:transparent;color:var(--vsui-input-text-color, #374151);font-family:var(--vsui-font-family-base, inherit);cursor:inherit;box-sizing:border-box}.base-combobox__field:focus{outline:none}.base-combobox__field::placeholder{color:var(--vsui-input-placeholder-color, #9ca3af)}.base-combobox__field--display{display:flex;align-items:center;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-combobox__field--placeholder{color:var(--vsui-input-placeholder-color, #9ca3af)}.base-combobox__tags{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem .75rem;flex:1;min-width:0;overflow:hidden}.base-combobox__tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;background-color:var(--vsui-combobox-tag-bg, #e5e7eb);color:var(--vsui-combobox-tag-text, #374151);border-radius:.25rem;font-size:.875rem}.base-combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;background:none;border:none;border-radius:50%;color:var(--vsui-combobox-tag-remove, #6b7280);cursor:pointer;font-size:.75rem;line-height:1}.base-combobox__tag-remove:hover{background-color:var(--vsui-combobox-tag-remove-hover, #d1d5db)}.base-combobox__prefix{display:flex;align-items:center;padding:0 .75rem;color:var(--vsui-input-icon-color, #6b7280);flex-shrink:0}.base-combobox__suffix{display:flex;align-items:center;padding:0 .75rem;gap:.5rem;min-width:0;flex-shrink:0}.base-combobox__suffix-content{display:flex;align-items:center;color:var(--vsui-input-icon-color, #6b7280);flex-shrink:0}.base-combobox__clear-container{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex-shrink:0}.base-combobox__clear{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:50%;color:var(--vsui-input-icon-color, #6b7280);cursor:pointer;font-size:1rem;line-height:1}.base-combobox__clear:hover{background-color:var(--vsui-combobox-clear-hover, #f3f4f6)}.base-combobox__arrow{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--vsui-input-icon-color, #6b7280);transition:transform .2s;flex-shrink:0}.base-combobox__arrow svg{width:1rem;height:1rem}.base-combobox__arrow--open{transform:rotate(180deg)}.base-combobox__spinner{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex-shrink:0}.base-combobox__menu{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;z-index:50;border-radius:.375rem;border:1px solid var(--vsui-dropdown-border-color, #e5e7eb);background-color:var(--vsui-dropdown-bg, #ffffff);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;overflow-y:auto;min-width:100%}.base-combobox__options{padding:.25rem 0}.base-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;transition:background-color .2s;word-wrap:break-word}.base-combobox__option:hover,.base-combobox__option--highlighted{background-color:var(--vsui-dropdown-item-hover-bg, #f3f4f6)}.base-combobox__option--selected{background-color:var(--vsui-combobox-option-selected-bg, #eff6ff);color:var(--vsui-combobox-option-selected-text, #1d4ed8)}.base-combobox__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.5rem;color:var(--vsui-combobox-option-text-color)}.base-combobox__option-label--wrap{white-space:normal;word-break:break-word;line-height:1.4}.base-combobox__option-check{flex-shrink:0;font-weight:600;width:1rem;text-align:center}.base-combobox__loading,.base-combobox__no-data{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;color:var(--vsui-input-placeholder-color, #9ca3af);font-size:.875rem}.base-combobox__helper{font-size:var(--vsui-input-helper-font-size, .75rem);color:var(--vsui-input-helper-color, #6b7280)}.base-combobox__helper--error{color:var(--vsui-input-error-color, #ef4444)}.base-combobox--success .base-combobox__wrapper{border-color:var(--vsui-input-success-color, #22c55e)!important}.base-combobox--success .base-combobox__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-input-success-ring-color, rgba(34, 197, 94, .1))}.base-combobox--success .base-combobox__helper{color:var(--vsui-input-success-color, #22c55e)}.base-combobox--error .base-combobox__wrapper{border-color:var(--vsui-input-error-color, #ef4444)!important}.base-combobox--error .base-combobox__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-input-error-ring-color, rgba(239, 68, 68, .1))}.base-combobox--error .base-combobox__helper{color:var(--vsui-input-error-color, #ef4444)}.base-combobox--warning .base-combobox__wrapper{border-color:var(--vsui-input-warning-color, #f59e0b)!important}.base-combobox--warning .base-combobox__wrapper:focus-within{box-shadow:0 0 0 3px var(--vsui-input-warning-ring-color, rgba(245, 158, 11, .1))}.base-combobox--warning .base-combobox__helper{color:var(--vsui-input-warning-color, #f59