:root,[data-fs-density=comfortable]{--fs-field-h: var(--fs-ctl-h-lg);--fs-field-h-row: var(--fs-ctl-h);--fs-field-px: 14px;--fs-field-font: var(--fs-size-16);--fs-field-gap: 6px;--fs-field-label: var(--fs-size-14);--fs-field-note: var(--fs-size-note);--fs-field-icon-pad: 44px;--fs-textarea-h: 120px;--fs-textarea-py: var(--fs-space-3);--fs-select-pe: 40px;--fs-option-row: 40px;--fs-option-ps: 10px;--fs-option-pe: 12px;--fs-check: 18px;--fs-check-line: 1.5px;--fs-check-radius: 3px;--fs-check-dot: 8px;--fs-check-nudge: -2px;--fs-tile-gap: 10px;--fs-tile-py: 6px;--fs-tile-ps: 12px;--fs-tile-pe: 10px;--fs-seg-px: 10px;--fs-seg-gap: 6px;--fs-switch-w: 44px;--fs-switch-h: 26px;--fs-switch-knob: 18px}[data-fs-density=compact]{--fs-field-h: 36px;--fs-field-h-row: 36px;--fs-field-px: 10px;--fs-field-font: var(--fs-size-14);--fs-field-label: var(--fs-size-12);--fs-field-note: var(--fs-size-12);--fs-field-icon-pad: 36px;--fs-textarea-h: 64px;--fs-textarea-py: var(--fs-space-2);--fs-select-pe: 32px;--fs-option-row: 32px;--fs-option-ps: 8px;--fs-option-pe: 10px;--fs-check: 16px;--fs-check-dot: 6px;--fs-tile-gap: 8px;--fs-tile-py: 4px;--fs-tile-ps: 10px;--fs-tile-pe: 8px;--fs-seg-px: 8px;--fs-switch-w: 32px;--fs-switch-h: 20px;--fs-switch-knob: 14px}@media(pointer:coarse){[data-fs-density=compact]{--fs-field-h: 44px;--fs-field-h-row: 44px;--fs-field-font: var(--fs-size-16);--fs-option-row: 48px;--fs-check: 18px;--fs-check-dot: 8px;--fs-switch-w: 44px;--fs-switch-h: 26px;--fs-switch-knob: 18px}:root{--fs-option-row: 48px}:where(.fs-demo,.fs-ui) :where(label:has(input:is(.fs-checkbox,.fs-radio))),:where(.fs-admin-body label:has(input:is([type=checkbox],[type=radio]):not([role=switch]))){display:inline-flex;align-items:center;min-height:var(--fs-ctl-h)}}:where(.fs-ui){--fs-accent: var(--fs-brand);--fs-accent-surface: var(--fs-brand-surface);--fs-accent-border: var(--fs-brand-border)}:is(.fs-demo,.fs-ui) .fs-field{display:grid;gap:var(--fs-field-gap);align-content:start;min-width:0;margin:0;padding:0;border:0}:is(.fs-demo,.fs-ui) .fs-field>legend{padding:0;margin-bottom:var(--fs-field-gap)}:is(.fs-demo,.fs-ui) .fs-field-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--fs-space-2);color:var(--fs-foreground);font-size:var(--fs-field-label);font-weight:var(--fs-weight-strong);line-height:1.4}:is(.fs-demo,.fs-ui) .fs-field-req{color:var(--fs-muted-foreground);font-size:var(--fs-size-12);font-weight:var(--fs-weight-regular)}:is(.fs-demo,.fs-ui) :is(.fs-field-hint,.fs-field-error){margin:0;font-size:var(--fs-field-note);font-weight:var(--fs-weight-regular);line-height:1.45}:is(.fs-demo,.fs-ui) .fs-field-hint{color:var(--fs-muted-foreground)}:is(.fs-demo,.fs-ui) .fs-field-error{color:var(--fs-destructive)}:is(.fs-demo,.fs-ui) .fs-field-error:empty{display:none}:is(.fs-demo,.fs-ui) .fs-field:is(.is-invalid,[data-invalid])>.fs-field-hint:not([role=status],[data-fs-keep]){display:none}:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea){box-sizing:border-box;width:100%;height:var(--fs-field-h);min-height:var(--fs-field-h);margin:0;padding:0 var(--fs-field-px);border:var(--fs-border) solid var(--fs-border-strong);border-radius:var(--fs-radius);background-color:var(--fs-input);color:var(--fs-foreground);font-family:var(--fs-font-ui);font-size:var(--fs-field-font);font-weight:var(--fs-weight-regular);line-height:1.4;letter-spacing:0;font-variant-numeric:tabular-nums;box-shadow:none;transition:border-color var(--fs-dur-fast)}:is(.fs-demo,.fs-ui) textarea:is(.fs-input,.fs-textarea){height:auto;min-height:var(--fs-textarea-h);padding:var(--fs-textarea-py) var(--fs-field-px);resize:vertical}:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-textarea)::placeholder{color:var(--fs-subtle-foreground);opacity:1}:is(.fs-demo,.fs-ui) :is(.fs-input--compact,.fs-select--compact){height:var(--fs-field-h-row);min-height:var(--fs-field-h-row)}:is(.fs-demo,.fs-ui) :is(.fs-input--auto,.fs-select--auto){width:auto;max-width:100%}:is(.fs-demo,.fs-ui) .fs-input-box{position:relative;min-width:0}:is(.fs-demo,.fs-ui) .fs-input-icon{position:absolute;top:50%;left:var(--fs-field-px);width:var(--fs-icon);height:var(--fs-icon);translate:0 -50%;color:var(--fs-muted-foreground);pointer-events:none}:is(.fs-demo,.fs-ui) .fs-input--icon{padding-left:var(--fs-field-icon-pad)}@media(hover:hover){:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea):hover:not(:disabled,:focus-visible){border-color:var(--fs-border-hover)}}:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea):focus-visible{outline:var(--fs-focus-width) solid var(--fs-ring);outline-offset:var(--fs-focus-offset);box-shadow:var(--fs-focus-halo)}:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea)[aria-invalid=true]{border-color:var(--fs-destructive);box-shadow:inset 0 0 0 1px var(--fs-destructive)}:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea)[aria-invalid=true]:focus-visible{box-shadow:var(--fs-focus-halo),inset 0 0 0 1px var(--fs-destructive)}.fs-ui :is(.fs-input,.fs-select,.fs-textarea):disabled{opacity:.45;cursor:not-allowed}:is(.fs-demo,.fs-ui) select.fs-select{padding-right:var(--fs-select-pe);-webkit-appearance:none;appearance:none;background-image:var(--fs-chevron);background-position:right var(--fs-field-px) center;background-size:12px 8px;background-repeat:no-repeat;cursor:pointer}:is(.fs-demo,.fs-ui) select.fs-select:has(option[value=""]:checked){color:var(--fs-subtle-foreground)}:is(.fs-demo,.fs-ui) select.fs-select option{background:var(--fs-card);color:var(--fs-foreground)}@supports (appearance: base-select){:is(.fs-demo,.fs-ui) select.fs-select:where(:not(.fs-select--native)),:is(.fs-demo,.fs-ui) select.fs-select:where(:not(.fs-select--native))::picker(select){-webkit-appearance:base-select;appearance:base-select}:is(.fs-demo,.fs-ui) select.fs-select:where(:not(.fs-select--native)){display:flex;align-items:center;gap:var(--fs-tile-gap);padding-inline:var(--fs-field-px);overflow:hidden;background-image:none;font-family:var(--fs-font-ui);white-space:nowrap}:is(.fs-demo,.fs-ui) select.fs-select::picker-icon{content:"";width:12px;height:8px;margin-left:auto;background:var(--fs-muted-foreground);-webkit-mask:var(--fs-chevron) center / contain no-repeat;mask:var(--fs-chevron) center / contain no-repeat;transition:rotate var(--fs-dur-fast)}:is(.fs-demo,.fs-ui) select.fs-select:open::picker-icon{rotate:180deg}:is(.fs-demo,.fs-ui) select.fs-select:open{border-color:var(--fs-border-hover)}:is(.fs-demo,.fs-ui) select.fs-select::picker(select){box-sizing:border-box;margin-block:var(--fs-space-1);padding:var(--fs-space-1);max-height:min(360px,50svh);overflow-y:auto;border:var(--fs-border) solid var(--fs-border-strong);border-radius:var(--fs-radius);background:var(--fs-popover);color:var(--fs-popover-foreground);font-family:var(--fs-font-ui);box-shadow:var(--fs-shadow-picker);scrollbar-color:var(--fs-border-strong) transparent;position-try-fallbacks:flip-block}:is(.fs-demo,.fs-ui) select.fs-select option{display:flex;align-items:center;gap:var(--fs-tile-gap);min-height:var(--fs-option-row);padding:var(--fs-space-1) var(--fs-option-pe) var(--fs-space-1) var(--fs-option-ps);border-radius:var(--fs-radius-sm);background:transparent;color:var(--fs-foreground);font-family:var(--fs-font-ui);font-size:var(--fs-size-14);font-weight:var(--fs-weight-medium);line-height:1.3;cursor:pointer}:is(.fs-demo,.fs-ui) select.fs-select :is(option img,.fs-opt-icon){flex:none;width:24px;height:24px;object-fit:contain}:is(.fs-demo,.fs-ui) select.fs-select option:hover{background:color-mix(in oklab,var(--fs-foreground) 8%,transparent)}:is(.fs-demo,.fs-ui) select.fs-select option:focus-visible{outline:var(--fs-focus-width) solid var(--fs-ring);outline-offset:-2px;box-shadow:none}:is(.fs-demo,.fs-ui) select.fs-select option:checked{background:var(--fs-accent-surface);box-shadow:inset 2px 0 0 var(--fs-accent)}:is(.fs-demo,.fs-ui) select.fs-select option::checkmark{order:9;margin-left:auto;color:var(--fs-accent);font-weight:var(--fs-weight-bold)}:is(.fs-demo,.fs-ui) select.fs-select:is([aria-required=true],[required]) option[value=""]{display:none}}:is(.fs-demo,.fs-ui) :is(.fs-box,input:is(.fs-checkbox,.fs-radio)),:where(.fs-admin-body :is(input[type=checkbox],input[type=radio])):not([role=switch]){display:grid;place-items:center;flex:none;box-sizing:border-box;width:var(--fs-check);height:var(--fs-check);margin:0;border:var(--fs-check-line) solid var(--fs-muted-foreground);border-radius:var(--fs-check-radius);background:var(--fs-input)}:is(.fs-demo,.fs-ui) input:is(.fs-checkbox,.fs-radio),:where(.fs-admin-body :is(input[type=checkbox],input[type=radio])):not([role=switch]){-webkit-appearance:none;appearance:none;color:inherit;cursor:pointer}:is(.fs-demo,.fs-ui) :is(.fs-box--radio,input.fs-radio),:where(.fs-admin-body input[type=radio]):not([role=switch]){border-radius:var(--fs-radius-pill)}:is(.fs-demo,.fs-ui) :is(.fs-check,.fs-commit,.fs-tile,.fs-option-tile):has(input:checked) .fs-box,:is(.fs-demo,.fs-ui) .fs-chip[aria-pressed=true]>.fs-box,:is(.fs-demo,.fs-ui) input:is(.fs-checkbox,.fs-radio):checked,:where(.fs-admin-body :is(input[type=checkbox],input[type=radio])):not([role=switch]):checked{border-color:var(--fs-accent);background:var(--fs-accent)}:is(.fs-demo,.fs-ui) :is(.fs-check,.fs-commit,.fs-tile):has(input:checked) .fs-box:after,:is(.fs-demo,.fs-ui) .fs-option-tile:has(input:checked) .fs-box:after,:is(.fs-demo,.fs-ui) .fs-chip[aria-pressed=true]>.fs-box:after,:is(.fs-demo,.fs-ui) input.fs-checkbox:checked:after,:where(.fs-admin-body input[type=checkbox]):not([role=switch]):checked:after{content:"";width:10px;height:6px;margin-top:var(--fs-check-nudge);border:solid var(--fs-primary-foreground);border-width:0 0 2px 2px;rotate:-45deg}:is(.fs-demo,.fs-ui) :is(.fs-check,.fs-option-tile):has(input:checked) .fs-box--radio:after,:is(.fs-demo,.fs-ui) input.fs-radio:checked:after,:where(.fs-admin-body input[type=radio]):checked:after{content:"";width:var(--fs-check-dot);height:var(--fs-check-dot);margin:0;border:0;border-radius:var(--fs-radius-pill);background:var(--fs-primary-foreground);rotate:none}:is(.fs-demo,.fs-ui) input:is(.fs-checkbox,.fs-radio):focus-visible,:where(.fs-admin-body :is(input[type=checkbox],input[type=radio])):not([role=switch]):focus-visible{outline:var(--fs-focus-width) solid var(--fs-ring);outline-offset:var(--fs-focus-offset);box-shadow:var(--fs-focus-halo)}:is(.fs-demo,.fs-ui) input:is(.fs-checkbox,.fs-radio):disabled,:where(.fs-admin-body :is(input[type=checkbox],input[type=radio])):disabled{opacity:.45;cursor:not-allowed}:is(.fs-demo,.fs-ui) .fs-switch{-webkit-appearance:none;appearance:none;position:relative;display:inline-block;flex:none;box-sizing:border-box;width:var(--fs-switch-w);height:var(--fs-switch-h);margin:0;border:var(--fs-border) solid var(--fs-border-strong);border-radius:var(--fs-radius-pill);background:var(--fs-background);cursor:pointer;transition:background-color var(--fs-dur-fast),border-color var(--fs-dur-fast)}:is(.fs-demo,.fs-ui) .fs-switch:before{--fs-switch-inset: calc((var(--fs-switch-h) - 2 * var(--fs-border) - var(--fs-switch-knob)) / 2);content:"";position:absolute;top:var(--fs-switch-inset);left:var(--fs-switch-inset);width:var(--fs-switch-knob);height:var(--fs-switch-knob);border-radius:var(--fs-radius-pill);background:var(--fs-muted-foreground);transition:translate var(--fs-dur-fast) var(--fs-ease),background-color var(--fs-dur-fast)}:is(.fs-demo,.fs-ui) .fs-switch:checked,:is(.fs-demo,.fs-ui) [aria-checked=true]>.fs-switch{border-color:var(--fs-primary);background:var(--fs-primary)}:is(.fs-demo,.fs-ui) .fs-switch:checked:before,:is(.fs-demo,.fs-ui) [aria-checked=true]>.fs-switch:before{background:var(--fs-background);translate:calc(var(--fs-switch-w) - var(--fs-switch-h)) 0}:is(.fs-demo,.fs-ui) .fs-switch:focus-visible{outline:var(--fs-focus-width) solid var(--fs-ring);outline-offset:var(--fs-focus-offset);box-shadow:var(--fs-focus-halo)}:is(.fs-demo,.fs-ui) .fs-option-tile,:is(.fs-demo,.fs-ui) .fs-checks>.fs-check,:is(.fs-demo,.fs-ui) .fs-options--grid>.fs-option{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:var(--fs-tile-gap);width:auto;min-width:0;height:auto;min-height:var(--fs-field-h);margin:0;padding:var(--fs-tile-py) var(--fs-tile-pe) var(--fs-tile-py) var(--fs-tile-ps);border:var(--fs-border) solid var(--fs-border-strong);border-radius:var(--fs-radius);background:var(--fs-input);color:var(--fs-foreground);font-size:var(--fs-size-14);font-weight:var(--fs-weight-medium);line-height:1.25;text-align:left;accent-color:auto;cursor:pointer}:is(.fs-demo,.fs-ui) .fs-option-tile:has(>.fs-box)>input,:is(.fs-demo,.fs-ui) .fs-checks>.fs-check>input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}@media(hover:hover){:is(.fs-demo,.fs-ui) .fs-option-tile:hover,:is(.fs-demo,.fs-ui) .fs-checks>.fs-check:hover,:is(.fs-demo,.fs-ui) .fs-options--grid>.fs-option:hover{border-color:var(--fs-border-hover)}}:is(.fs-demo,.fs-ui) .fs-option-tile:has(input:checked),:is(.fs-demo,.fs-ui) .fs-checks>.fs-check:has(input:checked),:is(.fs-demo,.fs-ui) .fs-options--grid>.fs-option:has(input:checked){border-color:var(--fs-accent-border);background:var(--fs-accent-surface);box-shadow:none}:is(.fs-demo,.fs-ui) .fs-option-tile:has(input:focus-visible),:is(.fs-demo,.fs-ui) .fs-checks>.fs-check:has(input:focus-visible){z-index:3;outline:var(--fs-focus-width) solid var(--fs-ring);outline-offset:var(--fs-focus-offset);box-shadow:var(--fs-focus-halo)}:is(.fs-demo,.fs-ui) .fs-option-tile input:focus-visible{outline:none;box-shadow:none}:is(.fs-demo,.fs-ui) .fs-option-tile:has(input:disabled),:is(.fs-demo,.fs-ui) .fs-checks>.fs-check:has(input:disabled){opacity:.45;cursor:not-allowed}:is(.fs-demo,.fs-ui) .fs-option-tile:has(input:disabled) input,:is(.fs-demo,.fs-ui) .fs-checks>.fs-check:has(input:disabled) input{opacity:1}:is(.fs-demo,.fs-ui) .fs-field:is(.is-invalid,[data-invalid]) .fs-option-tile{border-color:var(--fs-destructive)}:is(.fs-demo,.fs-ui) .fs-options{display:flex;flex-wrap:wrap;gap:var(--fs-space-2)}:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt){position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--fs-space-2);min-height:var(--fs-field-h);padding:0 var(--fs-ctl-px);border:var(--fs-border) solid var(--fs-border-strong);border-radius:var(--fs-radius);background:var(--fs-input);color:var(--fs-foreground);font-size:var(--fs-size-14);font-weight:var(--fs-weight-strong);line-height:1.25;cursor:pointer}:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt)>input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}@media(hover:hover){:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt):hover{border-color:var(--fs-border-hover)}}:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt):has(input:checked){z-index:1;border-color:var(--fs-accent);background:var(--fs-accent-surface);box-shadow:inset 0 calc(-1 * var(--fs-border-active)) 0 var(--fs-accent)}:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt):has(input:checked)>:last-child:before{content:"\2713  ";content:"\2713  " / "";color:var(--fs-accent)}:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt):has(input:focus-visible){outline:var(--fs-focus-width) solid var(--fs-ring);outline-offset:var(--fs-focus-offset);box-shadow:var(--fs-focus-halo)}:is(.fs-demo,.fs-ui) :is(.fs-option,.fs-choice-option,.fs-seg-opt):has(input:checked):has(input:focus-visible){box-shadow:var(--fs-focus-halo),inset 0 calc(-1 * var(--fs-border-active)) 0 var(--fs-accent)}:is(.fs-demo,.fs-ui) .fs-option--start{justify-content:flex-start;text-align:left}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;width:100%;min-width:0}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option){display:flex;gap:var(--fs-seg-gap);min-width:0;margin:0;padding:var(--fs-space-1) var(--fs-seg-px);border-radius:0;line-height:1.2;text-align:center}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option)+*{margin-left:calc(-1 * var(--fs-border))}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option):first-child{border-radius:var(--fs-radius) 0 0 var(--fs-radius)}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option):last-child{border-radius:0 var(--fs-radius) var(--fs-radius) 0}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option):only-child{border-radius:var(--fs-radius)}:is(.fs-demo,.fs-ui) :is(.fs-seg-opt,.fs-choice-option,.fs-option)>span{min-width:0;overflow-wrap:anywhere}@media(hover:hover){:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option):hover:not(:has(input:checked)){z-index:1}}:is(.fs-demo,.fs-ui) :is(.fs-seg,.fs-choice)>:is(.fs-seg-opt,.fs-choice-option,.fs-option):has(input:checked){z-index:2}:is(.fs-demo,.fs-ui) .fs-field:is(.is-invalid,[data-invalid]) :is(.fs-option,.fs-choice-option,.fs-seg-opt){border-color:var(--fs-destructive)}@media(forced-colors:active){:is(.fs-demo,.fs-ui) :is(.fs-check,.fs-commit,.fs-tile,.fs-option-tile):has(input:checked) .fs-box,:is(.fs-demo,.fs-ui) input:is(.fs-checkbox,.fs-radio):checked,:where(.fs-admin-body :is(input[type=checkbox],input[type=radio])):not([role=switch]):checked{background:Highlight;forced-color-adjust:none}:is(.fs-demo,.fs-ui) .fs-switch:checked{background:Highlight}}@media(prefers-reduced-motion:reduce){:is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea,.fs-switch),:is(.fs-demo,.fs-ui) .fs-switch:before,:is(.fs-demo,.fs-ui) select.fs-select::picker-icon{transition:none}}html[data-fs-motion=reduced] :is(.fs-demo,.fs-ui) :is(.fs-input,.fs-select,.fs-textarea,.fs-switch),html[data-fs-motion=reduced] :is(.fs-demo,.fs-ui) .fs-switch:before,html[data-fs-motion=reduced] :is(.fs-demo,.fs-ui) select.fs-select::picker-icon{transition:none}
/*# sourceMappingURL=/cdn/shop/t/26/assets/fs-ui-field.css.map */