vue-smart-ui
Version:
A collection of Vue 3 smart and highly customizable UI components for modern web applications
2 lines (1 loc) • 41.1 kB
CSS
.vsui{--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-primary-light: #e0e7ff;--color-primary-text: #1e40af;--color-secondary: #9333ea;--color-secondary-dark: #7e22ce;--color-secondary-light: #ede9fe;--color-secondary-text: #4338ca;--color-info: #3b82f6;--color-info-dark: #0284c7;--color-info-light: #dbeafe;--color-success: #22c55e;--color-success-dark: #15803d;--color-success-light: #f0fdf4;--color-warning: #f59e0b;--color-warning-dark: #92400e;--color-warning-light: #fefce8;--color-error: #ef4444;--color-error-dark: #991b1b;--color-error-light: #fee2e2;--bg-default: #ffffff;--bg-subtle: #f9fafb;--bg-muted: #f3f4f6;--bg-emphasized: #e5e7eb;--bg-disabled: #f3f4f6;--surface-default: #f9fafb;--surface-hover: #f3f4f6;--surface-active: #e5e7eb;--surface-selected: #eff6ff;--text-default: #111827;--text-muted: #374151;--text-subtle: #6b7280;--text-disabled: #9ca3af;--text-inverse: #ffffff;--border-default: #e5e7eb;--border-strong: #c0c4c9;--border-focus: #d1d5db;--color-white: #ffffff;--color-black: #000000;--font-family-base: "Roboto", sans-serif;--button-primary-bg: var(--color-primary);--button-primary-hover: var(--color-primary-dark);--button-primary-text: var(--color-white);--button-secondary-bg: var(--color-secondary);--button-secondary-hover: var(--color-secondary-dark);--button-secondary-text: var(--color-white);--button-gray-bg: var(--bg-muted);--button-gray-hover: var(--bg-emphasized);--button-gray-text: var(--text-muted);--button-outline-border: var(--border-strong);--button-outline-hover: var(--bg-muted);--button-outline-text: var(--text-muted);--button-ghost-text: var(--text-muted);--button-focus-outline: var(--color-primary);--button-small-font-size: .875rem;--button-medium-font-size: 1rem;--button-large-font-size: 1.125rem;--popup-default-color: var(--text-subtle);--popup-info-color: var(--color-info);--popup-success-color: var(--color-success);--popup-warning-color: var(--color-warning);--popup-error-color: var(--color-error);--popup-border-color: var(--border-strong);--popup-default-bg: var(--surface-default);--popup-info-bg: var(--surface-default);--popup-success-bg: var(--surface-default);--popup-warning-bg: var(--surface-default);--popup-error-bg: var(--surface-default);--toast-default-bg: var(--surface-default);--toast-default-color: var(--border-strong);--toast-default-text: var(--text-default);--toast-info-bg: var(--color-primary-light);--toast-info-color: var(--color-primary);--toast-info-text: var(--color-primary-text);--toast-success-bg: var(--color-success-light);--toast-success-color: var(--color-success);--toast-success-text: var(--color-success-dark);--toast-warning-bg: var(--color-warning-light);--toast-warning-color: var(--color-warning);--toast-warning-text: var(--color-warning-dark);--toast-error-bg: var(--color-error-light);--toast-error-color: var(--color-error);--toast-error-text: var(--color-error-dark);--toast-title-font-size: 1rem;--toast-message-font-size: .75rem;--dropdown-bg: var(--surface-default);--dropdown-border-color: var(--border-default);--dropdown-item-hover-bg: var(--surface-hover);--dropdown-dark-bg: var(--text-muted);--dropdown-dark-border-color: #4b5563;--dropdown-dark-item-hover-bg: #4b5563;--skeleton-bg: var(--bg-emphasized);--skeleton-rectangle-height: 1.5rem;--skeleton-circle-size: 3rem;--skeleton-heading-height: 2rem;--skeleton-button-height: 2.5rem;--skeleton-button-width: 8rem;--skeleton-text-height: 1rem;--skeleton-rounded-radius: .375rem;--skeleton-shine: rgba(255, 255, 255, .3);--accordion-border-color: var(--border-default);--accordion-header-color: var(--text-default);--accordion-hover-bg: var(--bg-subtle);--accordion-focus-ring: var(--color-primary);--input-label-color: var(--text-muted);--input-required-color: var(--color-error);--input-helper-color: var(--text-subtle);--input-border-color: var(--border-strong);--input-bg: var(--bg-subtle);--input-text-color: var(--text-default);--input-focus-border-color: var(--color-primary);--input-focus-ring-color: rgba(59, 130, 246, .1);--input-placeholder-color: var(--text-disabled);--input-disabled-bg: var(--bg-muted);--input-disabled-text: var(--text-subtle);--input-icon-color: var(--text-subtle);--input-filled-bg: var(--bg-muted);--input-filled-focus-bg: var(--bg-subtle);--input-success-color: var(--color-success);--input-error-color: var(--color-error);--input-warning-color: var(--color-warning);--input-label-font-size: .875rem;--input-field-font-size: .875rem;--input-helper-font-size: .75rem;--checkbox-border: 1px solid var(--checkbox-border-color);--checkbox-border-color: var(--border-strong);--checkbox-hover-border-color: var(--bg-emphasized);--checkbox-border-radius: .25rem;--checkbox-bg: var(--bg-subtle);--checkbox-check: var(--text-muted);--checkbox-text: var(--text-muted);--checkbox-small-font-size: .875rem;--checkbox-medium-font-size: 1rem;--checkbox-large-font-size: 1.125rem;--textarea-font-size: 1rem;--textarea-font-family: var(--font-family-base);--textarea-line-height: 1.6;--textarea-padding: .75rem 1rem;--textarea-border-radius: .5rem;--textarea-bg: var(--bg-subtle);--textarea-text-color: var(--text-default);--textarea-border-color: var(--border-strong);--textarea-focus-border-color: var(--color-primary);--textarea-success-color: var(--color-success);--textarea-error-color: var(--color-error);--textarea-warning-color: var(--color-warning);--textarea-filled-bg: var(--bg-muted);--textarea-filled-hover-bg: var(--bg-emphasized);--textarea-filled-focus-bg: var(--bg-subtle);--textarea-helper-font-size: .75rem;--textarea-label-font-size: .875rem;--slider-track-height: 6px;--slider-track-bg: var(--surface-active);--slider-track-radius: 3px;--slider-fill-color: var(--color-primary);--slider-thumb-size: 18px;--slider-thumb-bg: var(--surface-default);--slider-thumb-border-width: 2px;--slider-thumb-border-color: var(--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;--slider-value-color: var(--text-muted);--slider-value-bubble-bg: var(--surface-default);--slider-value-bubble-color: var(--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;--slider-mark-color: var(--border-strong);--slider-mark-label-font-size: .75rem;--slider-mark-label-color: var(--text-subtle);--slider-mark-label-max-width: 80px;--slider-label-font-size: .875rem;--slider-label-color: var(--text-muted);--slider-required-color: var(--color-error);--slider-helper-font-size: .75rem;--slider-helper-color: var(--text-subtle);--slider-disabled-opacity: .6;--slider-disabled-track-bg: var(--bg-muted);--slider-disabled-thumb-bg: var(--bg-muted);--slider-disabled-thumb-border: var(--text-subtle);--slider-success-color: var(--color-success);--slider-success-ring-color: rgba(34, 197, 94, .1);--slider-error-color: var(--color-error);--slider-error-ring-color: rgba(239, 68, 68, .1);--slider-warning-color: var(--color-warning);--slider-warning-ring-color: rgba(245, 158, 11, .1);--slider-filled-bg: var(--bg-muted);font-family:var(--font-family-base)}.vsui[data-theme=dark],.vsui.dark,html.dark .vsui,[data-theme=dark] .vsui{--color-primary: #60a5fa;--color-primary-dark: #3b82f6;--color-primary-light: #1e3a8a;--color-primary-text: #dbeafe;--color-secondary: #a855f7;--color-secondary-dark: #9333ea;--color-secondary-light: #4c1d95;--color-secondary-text: #ede9fe;--color-info: #60a5fa;--color-info-dark: #3b82f6;--color-info-light: #1e3a8a;--color-success: #4ade80;--color-success-dark: var(--text-default);--color-success-light: #14532d;--color-warning: #fbbf24;--color-warning-dark: var(--text-default);--color-warning-light: #78350f;--color-error: #f87171;--color-error-dark: var(--text-default);--color-error-light: #7f1d1d;--bg-default: #111827;--bg-subtle: #1f2937;--bg-muted: #374151;--bg-emphasized: #4b5563;--bg-disabled: #374151;--surface-default: #1f2937;--surface-hover: #374151;--surface-active: #4b5563;--surface-selected: #2563eb;--text-default: #f9fafb;--text-muted: #e5e7eb;--text-subtle: #9ca3af;--text-disabled: #6b7280;--text-inverse: #111827;--border-default: #4b5563;--border-strong: #6b7280;--border-focus: #9ca3af}.base-accordion{width:100%}.base-accordion--default{border:1px solid var(--accordion-border-color, #e5e7eb);border-radius:.5rem;overflow:hidden}.base-accordion--bordered .base-accordion-item{border-bottom:1px solid var(--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(--accordion-header-color, #111827)}.base-accordion-item__header:hover{background-color:var(--accordion-hover-bg, #f9fafb)}.base-accordion-item__header:focus{outline:2px solid var(--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(--button-primary-bg);color:var(--button-primary-text)}.base-button--primary:hover:not(:disabled){background-color:var(--button-primary-hover)}.base-button--secondary{background-color:var(--button-secondary-bg);color:var(--button-secondary-text)}.base-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-hover)}.base-button--gray{background-color:var(--button-gray-bg);color:var(--button-gray-text)}.base-button--gray:hover:not(:disabled){background-color:var(--button-gray-hover)}.base-button--outline{background-color:transparent;border:1px solid var(--button-outline-border);color:var(--button-outline-text)}.base-button--outline:hover:not(:disabled){background-color:var(--button-outline-hover)}.base-button--ghost{background-color:transparent;color:var(--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(--button-small-font-size)}.base-button--medium{padding:.75rem 1.5rem;font-size:var(--button-medium-font-size)}.base-button--large{padding:1rem 2rem;font-size:var(--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(--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(--checkbox-border);border-radius:var(--checkbox-border-radius);background-color:var(--checkbox-bg);color:var(--checkbox-check);transition:all .2s ease}.base-checkbox__checkmark svg{opacity:0;transform:scale(.8);transition:all .2s ease}.base-checkbox__label{color:var(--checkbox-text)}.base-checkbox--small{font-size:var(--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(--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(--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(--checkbox-hover-border-color, var(--checkbox-border-color))}.base-checkbox--disabled{cursor:not-allowed;opacity:.5}.base-checkbox--error{--checkbox-hover-border-color: var(--input-error-color)}.base-checkbox--error .base-checkbox__checkmark{border-color:var(--input-error-color)}.base-checkbox--error .base-checkbox__label{color:var(--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(--dropdown-bg, #ffffff);border:1px solid var(--dropdown-border-color, #e5e7eb)}.base-dropdown__menu--white{background-color:#fff;border:1px solid #e5e7eb}.base-dropdown__menu--dark{background-color:var(--dropdown-dark-bg, #374151);border:1px solid var(--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(--dropdown-item-hover-bg, #f3f4f6)}.base-dropdown__menu--dark .base-dropdown-item:hover{background-color:var(--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}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.base-input{display:flex;flex-direction:column;gap:.25rem}.base-input__label{font-size:var(--input-label-font-size);font-weight:500;color:var(--input-label-color, #374151)}.base-input__required{color:var(--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(--input-border-color, #d1d5db);background-color:var(--input-bg, white);transition:all .2s}.base-input__field{flex:1;width:100%;padding:.625rem .75rem;font-size:var(--input-field-font-size);border:none;background-color:transparent;color:var(--input-text-color, #374151);font-family:var(--font-family-base, inherit)}.base-input__field:focus{outline:none}.base-input__field::placeholder{color:var(--input-placeholder-color, #9ca3af)}.base-input__prefix,.base-input__suffix{display:flex;align-items:center;padding:0 .75rem;color:var(--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(--input-helper-font-size);color:var(--input-helper-color, #6b7280)}.base-input--success .base-input__wrapper{border-color:var(--input-success-color, #22c55e)}.base-input--success .base-input__wrapper:focus-within{box-shadow:0 0 0 3px var(--input-success-ring-color, rgba(34, 197, 94, .1))}.base-input--success .base-input__helper{color:var(--input-success-color, #22c55e)}.base-input--error .base-input__wrapper{border-color:var(--input-error-color, #ef4444)}.base-input--error .base-input__wrapper:focus-within{box-shadow:0 0 0 3px var(--input-error-ring-color, rgba(239, 68, 68, .1))}.base-input--error .base-input__helper{color:var(--input-error-color, #ef4444)}.base-input--warning .base-input__wrapper{border-color:var(--input-warning-color, #f59e0b)}.base-input--warning .base-input__wrapper:focus-within{box-shadow:0 0 0 3px var(--input-warning-ring-color, rgba(245, 158, 11, .1))}.base-input--warning .base-input__helper{color:var(--input-warning-color, #f59e0b)}.base-input__wrapper:focus-within{border-color:var(--input-focus-border-color, #3b82f6);box-shadow:0 0 0 3px var(--input-focus-ring-color, rgba(59, 130, 246, .1))}.base-input--filled .base-input__wrapper{background-color:var(--input-filled-bg, #f3f4f6);border-color:transparent}.base-input--filled .base-input__wrapper:hover{background-color:var(--input-filled-hover-bg, #e5e7eb)}.base-input--filled .base-input__wrapper:focus-within{background-color:var(--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(--popup-default-bg, white);border:1px solid var(--popup-border-color, #e5e7eb)}.base-popup--info{background-color:var(--popup-info-bg, #eff6ff);border:1px solid var(--popup-info-color, #3b82f6)}.base-popup--info .base-popup__header{background-color:var(--popup-info-color, #3b82f6);color:#fff}.base-popup--success{background-color:var(--popup-success-bg, #f0fdf4);border:1px solid var(--popup-success-color, #22c55e)}.base-popup--success .base-popup__header{background-color:var(--popup-success-color, #22c55e);color:#fff}.base-popup--warning{background-color:var(--popup-warning-bg, #fffbeb);border:1px solid var(--popup-warning-color, #f59e0b)}.base-popup--warning .base-popup__header{background-color:var(--popup-warning-color, #f59e0b);color:#fff}.base-popup--error{background-color:var(--popup-error-bg, #fef2f2);border:1px solid var(--popup-error-color, #ef4444)}.base-popup--error .base-popup__header{background-color:var(--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(--popup-border-color, #e5e7eb)}.base-popup__footer{padding:1rem;border-top:1px solid var(--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(--skeleton-bg, #e5e7eb);position:relative;overflow:hidden}.base-skeleton--rectangle{height:var(--skeleton-rectangle-height, 1.5rem)}.base-skeleton--circle{border-radius:50%;height:var(--skeleton-circle-size, 3rem);width:var(--skeleton-circle-size, 3rem)}.base-skeleton--text{height:var(--skeleton-text-height, 1rem);margin:.5rem 0}.base-skeleton--text:last-child{width:80%}.base-skeleton--heading{height:var(--skeleton-heading-height, 2rem);margin:1rem 0}.base-skeleton--button{height:var(--skeleton-button-height, 2.5rem);width:var(--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(--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(--font-family-base);display:flex;flex-direction:column;width:100%;margin-bottom:1rem}.base-slider__label{display:block;margin-bottom:.5rem;font-size:var(--slider-label-font-size, .875rem);font-weight:500;color:var(--slider-label-color, #374151)}.base-slider__required{color:var(--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(--slider-value-font-size, .875rem);color:var(--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(--slider-track-height, 6px);flex-grow:1;background-color:var(--slider-track-bg, #e5e7eb);border-radius:var(--slider-track-radius, 3px);cursor:pointer}.base-slider__track-fill{position:absolute;height:100%;background-color:var(--slider-fill-color, #3b82f6);border-radius:var(--slider-track-radius, 3px);pointer-events:none}.base-slider__thumb{position:absolute;top:50%;width:var(--slider-thumb-size, 18px);height:var(--slider-thumb-size, 18px);background-color:var(--slider-thumb-bg, #ffffff);border:var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, #3b82f6);border-radius:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:var(--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(--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(--slider-value-bubble-bg, #ffffff);color:var(--slider-value-bubble-color, #374151);font-size:var(--slider-value-bubble-font-size, .75rem);padding:var(--slider-value-bubble-padding, 2px 6px);border-radius:var(--slider-value-bubble-radius, 4px);white-space:nowrap;box-shadow:var(--slider-value-bubble-shadow, 0 1px 2px rgba(0, 0, 0, .1));border:var(--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(--slider-mark-size, 4px);height:var(--slider-mark-size, 4px);margin-top:8px;background-color:var(--slider-mark-color, #9ca3af);border-radius:50%}.base-slider__mark-label{margin-top:4px;font-size:var(--slider-mark-label-font-size, .75rem);color:var(--slider-mark-label-color, #6b7280);white-space:nowrap;text-align:center;transform:translate(-50%);position:absolute;left:50%;max-width:var(--slider-mark-label-max-width, 80px);overflow:hidden;text-overflow:ellipsis}.base-slider__mark--active .base-slider__mark-dot{background-color:var(--slider-fill-color, #3b82f6)}.base-slider__helper{margin-top:.25rem;font-size:var(--slider-helper-font-size, .75rem);color:var(--slider-helper-color, #6b7280)}.base-slider--disabled{opacity:var(--slider-disabled-opacity, .6);pointer-events:none}.base-slider--disabled .base-slider__track{background-color:var(--slider-disabled-track-bg, #f3f4f6)}.base-slider--disabled .base-slider__thumb{background-color:var(--slider-disabled-thumb-bg, #f3f4f6);border-color:var(--slider-disabled-thumb-border, #6b7280)}.base-slider--success .base-slider__track-fill{background-color:var(--slider-success-color, #22c55e)}.base-slider--success .base-slider__thumb{border-color:var(--slider-success-color, #22c55e)}.base-slider--success .base-slider__thumb:focus{box-shadow:0 0 0 3px var(--slider-success-ring-color, rgba(34, 197, 94, .1))}.base-slider--success .base-slider__thumb-value{border-color:var(--slider-success-color, #22c55e)}.base-slider--success .base-slider__helper{color:var(--slider-success-color, #22c55e)}.base-slider--error .base-slider__track-fill{background-color:var(--slider-error-color, #ef4444)}.base-slider--error .base-slider__thumb{border-color:var(--slider-error-color, #ef4444)}.base-slider--error .base-slider__thumb:focus{box-shadow:0 0 0 3px var(--slider-error-ring-color, rgba(239, 68, 68, .1))}.base-slider--error .base-slider__thumb-value{border-color:var(--slider-error-color, #ef4444)}.base-slider--error .base-slider__helper{color:var(--slider-error-color, #ef4444)}.base-slider--warning .base-slider__track-fill{background-color:var(--slider-warning-color, #f59e0b)}.base-slider--warning .base-slider__thumb{border-color:var(--slider-warning-color, #f59e0b)}.base-slider--warning .base-slider__thumb:focus{box-shadow:0 0 0 3px var(--slider-warning-ring-color, rgba(245, 158, 11, .1))}.base-slider--warning .base-slider__thumb-value{border-color:var(--slider-warning-color, #f59e0b)}.base-slider--warning .base-slider__helper{color:var(--slider-warning-color, #f59e0b)}.base-slider--filled .base-slider__track{background-color:var(--slider-filled-bg, #f3f4f6)}.base-textarea{display:inline-flex;flex-direction:column;gap:.25rem;min-width:20rem}.base-textarea__label{font-size:var(--textarea-label-font-size, .875rem);font-weight:500;color:var(--textarea-label-color, #374151)}.base-textarea__required{color:var(--textarea-required-color, #ef4444);margin-left:.25rem}.base-textarea__wrapper{position:relative;width:100%;border-radius:var(--textarea-border-radius, .375rem);border:1px solid var(--textarea-border-color, #d1d5db);background-color:var(--textarea-bg, white);transition:all .2s}.base-textarea__field{width:100%;padding:var(--textarea-padding, .625rem .75rem);font-size:var(--textarea-font-size, .875rem);line-height:var(--textarea-line-height, 1.5);color:var(--textarea-text-color, #111827);border:none;background-color:transparent;box-sizing:border-box;font-family:var(--font-family-base, inherit)}.base-textarea__field:focus{outline:none}.base-textarea__field::placeholder{color:var(--textarea-placeholder-color, #9ca3af)}.base-textarea__helper{font-size:var(--textarea-helper-font-size, .75rem);color:var(--textarea-helper-color, #6b7280)}.base-textarea--success .base-textarea__wrapper{border-color:var(--textarea-success-color, #22c55e)}.base-textarea--success .base-textarea__wrapper:focus-within{box-shadow:0 0 0 3px var(--textarea-success-ring-color, rgba(34, 197, 94, .1))}.base-textarea--success .base-textarea__helper{color:var(--textarea-success-color, #22c55e)}.base-textarea--error .base-textarea__wrapper{border-color:var(--textarea-error-color, #ef4444)}.base-textarea--error .base-textarea__wrapper:focus-within{box-shadow:0 0 0 3px var(--textarea-error-ring-color, rgba(239, 68, 68, .1))}.base-textarea--error .base-textarea__helper{color:var(--textarea-error-color, #ef4444)}.base-textarea--warning .base-textarea__wrapper{border-color:var(--textarea-warning-color, #f59e0b)}.base-textarea--warning .base-textarea__wrapper:focus-within{box-shadow:0 0 0 3px var(--textarea-warning-ring-color, rgba(245, 158, 11, .1))}.base-textarea--warning .base-textarea__helper{color:var(--textarea-warning-color, #f59e0b)}.base-textarea__wrapper:focus-within{border-color:var(--textarea-focus-border-color, #3b82f6);box-shadow:0 0 0 3px var(--textarea-focus-ring-color, rgba(59, 130, 246, .1))}.base-textarea--filled .base-textarea__wrapper{background-color:var(--textarea-filled-bg, #f3f4f6);border-color:transparent}.base-textarea--filled .base-textarea__wrapper:hover{background-color:var(--textarea-filled-hover-bg, #e5e7eb)}.base-textarea--filled .base-textarea__wrapper:focus-within{background-color:var(--textarea-filled-focus-bg, #f9fafb)}.base-textarea--outlined .base-textarea__wrapper{border-width:var(--textarea-outlined-border-width, 2px)}.base-textarea--disabled{opacity:var(--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(--toast-default-bg, #fff);border:1px solid var(--toast-default-color, #e5e7eb);color:var(--toast-default-text, #1f2937)}.base-toast--info{background-color:var(--toast-info-bg, #eff6ff);border:1px solid var(--toast-info-color, #3b82f6);color:var(--toast-info-text, #1e40af)}.base-toast--success{background-color:var(--toast-success-bg, #f0fdf4);border:1px solid var(--toast-success-color, #22c55e);color:var(--toast-success-text, #15803d)}.base-toast--warning{background-color:var(--toast-warning-bg, #fffbeb);border:1px solid var(--toast-warning-color, #f59e0b);color:var(--toast-warning-text, #b45309)}.base-toast--error{background-color:var(--toast-error-bg, #fef2f2);border:1px solid var(--toast-error-color, #ef4444);color:var(--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(--toast-title-font-size)}.base-toast__message{font-size:var(--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(--toast-default-color, #9ca3af)}.base-toast .progress-bar--info{background-color:var(--toast-info-color, #3b82f6)}.base-toast .progress-bar--success{background-color:var(--toast-success-color, #22c55e)}.base-toast .progress-bar--warning{background-color:var(--toast-warning-color, #f59e0b)}.base-toast .progress-bar--error{background-color:var(--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(--input-label-font-size, .875rem);font-weight:500;color:var(--input-label-color, #374151)}.base-segmented-buttons__required{color:var(--input-required-color, #ef4444);margin-left:.25rem}.base-segmented-buttons__helper{font-size:var(--input-helper-font-size, .75rem);color:var(--input-helper-color, #6b7280);margin-top:.25rem}.base-segmented-buttons__helper--error{color:var(--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(--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(--button-outline-border, #d1d5db);background-color:transparent;cursor:pointer;margin:0;position:relative}.base-segmented-buttons__button:focus{outline:2px solid var(--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(--button-outline-text, #374151)}.base-segmented-buttons__button--primary:hover:not(:disabled):not(.base-segmented-buttons__button--selected){background-color:var(--button-outline-hover, rgba(229, 231, 235, .5))}.base-segmented-buttons__button--primary.base-segmented-buttons__button--selected{background-color:var(--button-primary-bg, #3b82f6);color:var(--button-primary-text, white);border-color:var(--button-primary-bg, #3b82f6)}.base-segmented-buttons__button--secondary{color:var(--button-outline-text, #374151)}.base-segmented-buttons__button--secondary:hover:not(:disabled):not(.base-segmented-buttons__button--selected){background-color:var(--button-outline-hover, rgba(229, 231, 235, .5))}.base-segmented-buttons__button--secondary.base-segmented-buttons__button--selected{background-color:var(--button-secondary-bg, #6b7280);color:var(--button-secondary-text, white);border-color:var(--button-secondary-bg, #6b7280)}.base-segmented-buttons__button--gray{color:var(--button-outline-text, #374151)}.base-segmented-buttons__button--gray:hover:not(:disabled):not(.base-segmented-buttons__button--selected){background-color:var(--button-outline-hover, rgba(229, 231, 235, .5))}.base-segmented-buttons__button--gray.base-segmented-buttons__button--selected{background-color:var(--button-gray-bg, #e5e7eb);color:var(--button-gray-text, #111827);border-color:var(--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,.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(--input-icon-color, #6b7280);cursor:pointer}.base-color-picker__popup{position:absolute;top:100%;left:0;margin-top:.5rem;background-color:var(--surface-default, white);border:1px solid var(--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(--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(--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(--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-otp{display:flex;flex-direction:column;gap:.25rem}.base-otp__label{font-size:var(--input-label-font-size);font-weight:500;color:var(--input-label-color, #374151)}.base-otp__required{color:var(--input-required-color, #ef4444);margin-left:.25rem}.base-otp__wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%}.base-otp__field{width:3rem;height:3rem;padding:.625rem 0;text-align:center;font-size:var(--input-field-font-size, 1.25rem);font-weight:600;border-radius:.375rem;border:1px solid var(--input-border-color, #d1d5db);background-color:var(--input-bg, white);color:var(--input-text-color, #374151);font-family:var(--font-family-base, inherit);transition:all .2s}.base-otp__field:focus{outline:none;border-color:var(--input-focus-border-color, #3b82f6);box-shadow:0 0 0 3px var(--input-focus-ring-color, rgba(59, 130, 246, .1))}.base-otp__helper{font-size:var(--input-helper-font-size);color:var(--input-helper-color, #6b7280);text-align:center;margin-top:.25rem}.base-otp__instructions{font-size:var(--input-helper-font-size, .75rem);color:var(--input-instruction-color, #9ca3af);text-align:center;margin-top:.25rem;font-style:italic}.base-otp--success .base-otp__field{border-color:var(--input-success-color, #22c55e)}.base-otp--success .base-otp__field:focus{box-shadow:0 0 0 3px var(--input-success-ring-color, rgba(34, 197, 94, .1))}.base-otp--success .base-otp__helper{color:var(--input-success-color, #22c55e)}.base-otp--error .base-otp__field{border-color:var(--input-error-color, #ef4444)}.base-otp--error .base-otp__field:focus{box-shadow:0 0 0 3px var(--input-error-ring-color, rgba(239, 68, 68, .1))}.base-otp--error .base-otp__helper{color:var(--input-error-color, #ef4444)}.base-otp--warning .base-otp__field{border-color:var(--input-warning-color, #f59e0b)}.base-otp--warning .base-otp__field:focus{box-shadow:0 0 0 3px var(--input-warning-ring-color, rgba(245, 158, 11, .1))}.base-otp--warning .base-otp__helper{color:var(--input-warning-color, #f59e0b)}.base-otp--filled .base-otp__field{background-color:var(--input-filled-bg, #f3f4f6);border-color:transparent}.base-otp--filled .base-otp__field:hover{background-color:var(--input-filled-hover-bg, #e5e7eb)}.base-otp--filled .base-otp__field:focus{background-color:var(--input-filled-focus-bg, #f9fafb)}.base-otp--outlined .base-otp__field{border-width:2px}.base-otp--disabled{opacity:.6;cursor:not-allowed}.base-otp--disabled .base-otp__field{cursor:not-allowed}.toasts-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:.75rem;padding:1rem;pointer-events:none}.toasts-container>*{pointer-events:auto}.toasts-container--top-right{top:0;right:0}.toasts-container--top-left{top:0;left:0}.toasts-container--top-center{top:0;left:50%;transform:translate(-50%);align-items:center}.toasts-container--bottom-right{bottom:0;right:0;flex-direction:column-reverse}.toasts-container--bottom-left{bottom:0;left:0;flex-direction:column-reverse}.toasts-container--bottom-center{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}.toast-enter-active,.toast-leave-active{transition:all .3s ease}.toasts-container--top-right .toast-enter-from,.toasts-container--top-left .toast-enter-from,.toasts-container--top-right .toast-leave-to,.toasts-container--top-left .toast-leave-to,.toasts-container--bottom-right .toast-enter-from,.toasts-container--bottom-left .toast-enter-from,.toasts-container--bottom-right .toast-leave-to,.toasts-container--bottom-left .toast-leave-to{opacity:0;transform:translate(100%)}.toasts-container--top-center .toast-enter-from,.toasts-container--bottom-center .toast-enter-from{opacity:0;transform:translateY(-100%)}.toasts-container--top-center .toast-leave-to,.toasts-container--bottom-center .toast-leave-to{opacity:0;transform:translateY(100%)}