maz-ui/dist/assets/MazInput.CKB0yQH-.css

A standalone components library for Vue.Js 3 & Nuxt.Js 3

.m-input[data-v-e765b66f]{vertical-align:top;--maz-tw-text-opacity:1;color:hsl(var(--maz-foreground) / var(--maz-tw-text-opacity,1));flex-direction:column;align-items:flex-start;display:inline-flex}.m-input.--block[data-v-e765b66f]{width:100%}.m-input-top-label[data-v-e765b66f]{margin-bottom:.5rem}.m-input-bottom-text[data-v-e765b66f]{margin-top:.25rem;font-size:.875rem;line-height:1.25rem}.m-input-wrapper[data-v-e765b66f]{z-index:1;--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background) / var(--maz-tw-bg-opacity,1));flex:1;width:100%;height:100%;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.m-input-wrapper.--border[data-v-e765b66f]{border-width:var(--maz-border-width);border-style:solid}.m-input-wrapper.--block[data-v-e765b66f]{width:100%}.m-input-wrapper.--default-border[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-border) / var(--maz-tw-border-opacity,1))}.m-input-wrapper.--default-border[data-v-e765b66f]:is([class~=dark] *){--maz-tw-border-opacity:1;border-color:hsl(var(--maz-border-400) / var(--maz-tw-border-opacity,1))}.m-input-wrapper-input[data-v-e765b66f]{flex:1;align-items:center;width:100%;max-width:100%;display:flex;position:relative}.m-input-wrapper-input.--has-left-icon .m-input-input[data-v-e765b66f]{padding-inline-start:.5rem}.m-input-wrapper-input.--has-left-icon .m-input-label[data-v-e765b66f]{inset-inline-start:.5rem}.m-input-wrapper-input.--has-right-icon .m-input-input[data-v-e765b66f]{padding-inline-end:.5rem}.m-input-wrapper-input.--xl[data-v-e765b66f]{height:calc(4rem - (var(--maz-border-width) * 2))}.m-input-wrapper-input.--xl .m-input-input[data-v-e765b66f],.m-input-wrapper-input.--xl .m-input-label[data-v-e765b66f]{font-size:1.25rem;line-height:1.75rem}.m-input-wrapper-input.--lg[data-v-e765b66f]{height:calc(3.5rem - (var(--maz-border-width) * 2))}.m-input-wrapper-input.--lg .m-input-input[data-v-e765b66f],.m-input-wrapper-input.--lg .m-input-label[data-v-e765b66f]{font-size:1.125rem;line-height:1.75rem}.m-input-wrapper-input.--md[data-v-e765b66f]{height:calc(3rem - (var(--maz-border-width) * 2))}.m-input-wrapper-input.--sm[data-v-e765b66f]{height:calc(2.5rem - (var(--maz-border-width) * 2))}.m-input-wrapper-input.--sm .m-input-input[data-v-e765b66f],.m-input-wrapper-input.--sm .m-input-label[data-v-e765b66f]{font-size:.875rem;line-height:1.25rem}.m-input-wrapper-input.--xs[data-v-e765b66f]{height:calc(2rem - (var(--maz-border-width) * 2))}.m-input-wrapper-input.--xs .m-input-input[data-v-e765b66f],.m-input-wrapper-input.--xs .m-input-label[data-v-e765b66f]{font-size:.75rem;line-height:1rem}.m-input-wrapper-input.--mini[data-v-e765b66f]{height:calc(1.5rem - (var(--maz-border-width) * 2))}.m-input-wrapper-input.--mini .m-input-input[data-v-e765b66f],.m-input-wrapper-input.--mini .m-input-label[data-v-e765b66f]{font-size:.75rem;line-height:1rem}.m-input-wrapper-right[data-v-e765b66f],.m-input-wrapper-left[data-v-e765b66f]{z-index:1;display:flex;position:relative}.m-input-wrapper-right[data-v-e765b66f]>:not([hidden])~:not([hidden]),.m-input-wrapper-left[data-v-e765b66f]>:not([hidden])~:not([hidden]){--maz-tw-space-x-reverse:0;margin-right:calc(.25rem * var(--maz-tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--maz-tw-space-x-reverse)))}.m-input-wrapper-right[data-v-e765b66f],.m-input-wrapper-left[data-v-e765b66f]{justify-content:center;align-items:center;padding-top:.25rem;padding-bottom:.25rem}.m-input-wrapper-right[data-v-e765b66f]{padding-inline-end:.5rem}.m-input-wrapper-left[data-v-e765b66f]{padding-inline-start:.5rem}.m-input-wrapper.--rounded-sm[data-v-e765b66f]{border-radius:calc(var(--maz-radius) - 8px)}.m-input-wrapper.--rounded-md[data-v-e765b66f]{border-radius:calc(var(--maz-radius) - 4px)}.m-input-wrapper.--rounded-base[data-v-e765b66f]{border-radius:var(--maz-radius)}.m-input-wrapper.--rounded-lg[data-v-e765b66f]{border-radius:calc(var(--maz-radius) + 4px)}.m-input-wrapper.--rounded-xl[data-v-e765b66f]{border-radius:calc(var(--maz-radius) + 8px)}.m-input-wrapper.--rounded-full[data-v-e765b66f]{border-radius:9999px}.m-input-input[data-v-e765b66f]{appearance:none;text-overflow:ellipsis;white-space:nowrap;--maz-tw-text-opacity:1;width:100%;height:100%;color:hsl(var(--maz-foreground) / var(--maz-tw-text-opacity,1));--maz-tw-shadow:0 0 #0000;--maz-tw-shadow-colored:0 0 #0000;box-shadow:var(--maz-tw-ring-offset-shadow,0 0 #0000), var(--maz-tw-ring-shadow,0 0 #0000), var(--maz-tw-shadow);outline-offset:2px;background-color:#0000;border-style:none;outline:2px solid #0000;margin:0;padding:0 1rem;transition:padding .2s cubic-bezier(0,0,.2,1);overflow:hidden}.m-input-input[data-v-e765b66f]::placeholder{--maz-tw-text-opacity:1;color:hsl(var(--maz-muted) / var(--maz-tw-text-opacity,1))}.m-input-label[data-v-e765b66f]{pointer-events:none;transform-origin:0 0;text-overflow:ellipsis;white-space:nowrap;text-align:start;align-items:center;width:calc(100% - .75rem);line-height:1.5rem;transition:transform .2s cubic-bezier(0,0,.2,1);position:absolute;inset-inline-start:1rem;overflow:hidden}.m-input.--always-up .m-input-label[data-v-e765b66f],.m-input.--has-placeholder .m-input-label[data-v-e765b66f],.m-input .m-input-input:not(:placeholder-shown)~.m-input-label[data-v-e765b66f]{width:calc(100% + 1.3rem);transform:scale(.8)translateY(-.65em)}.m-input .m-input-input:-webkit-autofill~.m-input-label[data-v-e765b66f]{width:calc(100% + 1.3rem);transform:scale(.8)translateY(-.65em)}.m-input.--always-up .m-input-input[data-v-e765b66f],.m-input.--has-placeholder.--has-label .m-input-input[data-v-e765b66f],.m-input.--has-label .m-input-input[data-v-e765b66f]:not(:placeholder-shown){padding-top:1rem}.m-input .m-input-input[data-v-e765b66f]:-webkit-autofill{padding-top:1rem}.m-input:not(.--has-state) .m-input-wrapper[data-v-e765b66f]{--maz-tw-text-opacity:1;color:hsl(var(--maz-muted) / var(--maz-tw-text-opacity,1))}.m-input.--has-z-2 .m-input-wrapper[data-v-e765b66f]{z-index:2}.m-input.--is-readonly .m-input-input[data-v-e765b66f]{cursor:default}.m-input .m-input-wrapper[data-v-e765b66f]:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400) / var(--maz-tw-bg-opacity,1))}.m-input:has(input:disabled) .m-input-wrapper[data-v-e765b66f]{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-muted) / var(--maz-tw-text-opacity,1))}.m-input:has(input:disabled) .m-input-wrapper[data-v-e765b66f]:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-300) / var(--maz-tw-bg-opacity,1))}.m-input:has(input:disabled) .m-input-input[data-v-e765b66f]{cursor:not-allowed;--maz-tw-text-opacity:1;color:hsl(var(--maz-muted) / var(--maz-tw-text-opacity,1))}.m-input .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--border-active .m-input-wrapper[data-v-e765b66f]{z-index:3}.m-input.--primary .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--primary.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-primary) / var(--maz-tw-border-opacity,1))}.m-input.--secondary .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--secondary.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-secondary) / var(--maz-tw-border-opacity,1))}.m-input.--accent .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--accent.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-accent) / var(--maz-tw-border-opacity,1))}.m-input.--info .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--info.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-info) / var(--maz-tw-border-opacity,1))}.m-input.--success .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--success.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-success) / var(--maz-tw-border-opacity,1))}.m-input.--warning .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--warning.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-warning) / var(--maz-tw-border-opacity,1))}.m-input.--destructive .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--destructive.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-destructive) / var(--maz-tw-border-opacity,1))}.m-input.--contrast .m-input-wrapper[data-v-e765b66f]:focus-within,.m-input.--contrast.--border-active .m-input-wrapper[data-v-e765b66f]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-contrast) / var(--maz-tw-border-opacity,1))}.m-input.--has-label .m-input-label[data-v-e765b66f]{padding-inline-end:.75rem}