/* -- Clear user agent style -- */
fieldset,form,label,input { -webkit-appearance:initial; appearance:initial; box-sizing:border-box; margin-block:0; margin-inline:0; padding-block:0; padding-inline:0; border:0; font:inherit; font-size:100%; font-weight:inherit; vertical-align:baseline; }
input[type=date]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { display:none; appearance:none; -webkit-appearance:none; }
input[type=time]::-webkit-inner-spin-button, input[type="time"]::-webkit-calendar-picker-indicator { display:none; appearance:none; -webkit-appearance:none; }
input:is([type=date],[type=time])::-webkit-date-and-time-value { margin:1px 4px; }

form, [role=form] { max-width:min(100%, 100vw); width:100%; flex:1; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; margin:0 auto; }
:is(form,[role=form]) > section:not(.user-input) { display:flex; flex-flow:row wrap; justify-content:space-between; padding:0; gap:24px; }

form > button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child) { opacity:0; }

form:invalid > button:is(.submit,[type=submit]):not([data-label-invalid])[data-label-valid], button:is(.disabled,[disabled]) { background-color:var(--surface-container-low); color:var(--surface-variant-dim); fill:var(--surface-variant-dim); border:1px solid var(--surface-variant-dim); }
form:is(:invalid, [data-has-changed=false]) > button:is(.submit,[type=submit]), button:is(.disabled,[disabled]) { background-color:var(--surface-container-low); color:var(--secondary); fill:var(--secondary-bright); border:1px solid var(--secondary-bright); }
form:invalid > button:is(.submit,[type=submit])[data-label-invalid]::after { content:attr(data-label-invalid); }
form:invalid > button:is(.submit,[type=submit]):not([data-label-invalid])[data-label-valid]::after { content:attr(data-label-valid); }
form:invalid > button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child):first-child { opacity:1; }

form:valid > button:is(.submit,[type=submit])[data-label-valid]::after { content:attr(data-label-valid); }
form:valid > button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child):last-child { opacity:1; }

form[data-has-changed=false] > button:is(.submit,[type=submit]) { pointer-events:none; }
form[data-has-changed] > button:is(.submit,[type=submit])[data-label-valid]::after { content:attr(data-label-valid); }
form[data-has-changed] > button:is(.submit,[type=submit])[data-label-updated]::after { content:attr(data-label-updated); }


/* ----->>>        input's wrapper        <<<----- */
.user-input { contain:layout; position:relative; height:56px; width:100%; max-width:calc(min(360px, 100vw) - 32px); padding:0; margin:0; user-select:none; }
.user-input { will-change:background,color; transition:box-shadow 350ms var(--easing-emphasized-decelerate), color 200ms var(--easing-legacy), background-color 250ms var(--easing-legacy), border 250ms var(--easing-legacy); }
form:not([aria-disabled]) .user-input[aria-busy=false] :is(input,[contenteditable]), form:not([aria-disabled]) input[aria-busy=false] { box-shadow:inset 0 0 8px 30px rgba(var(--secondary-container-rgb),.38); transition:box-shadow 550ms var(--easing-emphasized-decelerate) 3000ms, color 400ms var(--easing-legacy) 3150ms; }
form:not([aria-disabled]) fieldset.user-input:has( > .user-input[aria-busy=false]) > :is(input,[contenteditable]) { box-shadow:inset 0 0 0 0 rgba(var(--secondary-container-rgb),0)!important; transition:color 400ms var(--easing-legacy) 3150ms, box-shadow 10ms var(--easing-emphasized-decelerate); }
form:not([aria-disabled]) fieldset.user-input:has( > .user-input[aria-busy=false]) > label { color:var(--primary)!important; }
form:not([aria-disabled]) fieldset.user-input:has( > .user-input[aria-busy=false]) { border:1px solid var(--primary); box-shadow:inset 0 0 8px 30px rgba(var(--secondary-container-rgb),.38); transition:box-shadow 550ms var(--easing-emphasized-decelerate) 3000ms; }

:is([role=form],form[aria-disabled]) .user-input[aria-busy=false] :is(input,[contenteditable]), :is([role=form],form[aria-disabled]) input[aria-busy=false] { box-shadow:inset 0 0 8px 30px rgba(var(--secondary-container-rgb),0); transition:box-shadow 550ms var(--easing-emphasized-decelerate) 3000ms, color 400ms var(--easing-legacy) 3150ms; }
:is([role=form],form:not([aria-disabled])) .user-input[aria-busy=true] :is(input,[contenteditable]), :is([role=form],form:not([aria-disabled])) input[aria-busy=true] { color:var(--primary)!important; box-shadow:inset 0 0 8px 30px rgba(var(--secondary-container-rgb),1)!important; }
.user-input:is(:focus,:focus-within,:active), .user-input:has( > input[aria-selected]) { z-index:2; }

.user-input[role=group] { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; }
.user-input[role=group]::before { content:''; box-sizing:content-box; z-index:0; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100%; max-width:100%; height:100%; max-height:calc(100% - 4px); border:1px solid var(--outline); border-radius:4px; background-color:transparent; outline-style:none; }
.user-input[role=group]::before { transition:box-shadow 350ms var(--easing-emphasized-decelerate), color 150ms var(--easing-legacy), background-color 250ms var(--easing-legacy) 100ms, border 150ms var(--easing-legacy); }
.user-input[role=group]:has(input:not(:placeholder-shown))::before { border:1px solid var(--primary); }
.user-input[role=group]:has([contenteditable]:not(:empty))::before { border:1px solid var(--primary); }
.user-input[role=group]:is(:focus,:focus-within,:active)::before { border:2px solid var(--primary); }
.user-input[role=group] :is(input,[contenteditable]) { border:0 hidden!important; background-color:transparent!important; }


/* ----->>>            inputs            <<<----- */
.user-input > :is(input,[contenteditable]) { box-sizing:content-box; z-index:1; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; padding:0 16px; width:100%; max-width:calc(100% - 32px - 4px); height:100%; max-height:calc(100% - 4px); border:1px solid var(--outline); border-radius:4px; background-color:transparent; color:var(--on-surface); outline-style:none; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:52px!important; text-align:left; }
.user-input > :is(input,[contenteditable]) { transition:box-shadow 350ms var(--easing-emphasized-decelerate), color 150ms var(--easing-legacy), background-color 250ms var(--easing-legacy) 100ms, border 150ms var(--easing-legacy); }
.user-input:is(:focus,:focus-within,:active) > :is(input:not([role=combobox]),[aria-selected],[contenteditable]) { border:2px solid var(--primary); }
.user-input > input:is(:required:valid,:not(:placeholder-shown)) { appearance:none; z-index:1; border-color:var(--primary); font:var(--bodyL); letter-spacing:var(--bodyL-spacing); color:inherit; border-radius:4px; }
.user-input > input:is(:-webkit-autofill,:-webkit-autofill:focus,:-webkit-autofill:hover,:-internal-autofill-selected,:-internal-autofill-previewed) { -webkit-text-fill-color:var(--on-surface); box-shadow:inset 0 0 10px 500px var(--surface-bright)!important; }

/* ----->>>            label             <<<----- */
.user-input > label { z-index:0; position:absolute; top:0; bottom:0; left:12px; height:52px; width:fit-content; max-width:calc(100% - 12px * 2); padding-inline:4px; margin:auto 0; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:52px; color:var(--on-surface-variant); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; will-change:transform,color; transition:transform 200ms var(--easing-emphasized), color 150ms linear; }
.user-input > input[role=combobox] + label { max-width:calc(100% - 12px - 40px); }
.user-input:not(:focus,:focus-within,:active) > input:required:placeholder-shown:not(:focus,:active,[aria-selected]) + label::after { content:'*'; color:var(--error); font:var(--bodyL);padding-inline-start:4px; }
.user-input > input:is(:required:valid,:not(:placeholder-shown),:-webkit-autofill,:-internal-autofill-selected,:not([role=combobox]):focus,:not([role=combobox]):active,[aria-selected]) + label, .user-input > [contenteditable]:not(:empty) + label, 
.user-input:is(:focus,:focus-within,:active) > :is(input:not([role=combobox]),[aria-selected],[contenteditable]) + label { z-index:2; line-height:1!important; height:15px; bottom:unset; padding-inline:3px; border-radius:0 0 2px 2px; background:linear-gradient(to top, rgba(var(--surface-rgb),.38), rgba(var(--surface-rgb),1) 48%); overflow:visible; transform:translateY(-.4em); color:var(--primary); font:var(--bodyS); letter-spacing:var(--bodyS-spacing); }

.user-input > input::placeholder { opacity:0; color:transparent; }
.user-input > .helperText { position:absolute; top:54px; right:8px; margin-block:4px 0; font:var(--bodyS); letter-spacing:var(--bodyS-spacing); color:var(--on-surface-variant); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.user-input > input ~ .trailing.icon { opacity:0; transform:scale(.8); width:40px; height:40px; position:absolute; top:0; bottom:0; margin-block:auto; right:8px; padding:8px; fill:rgba(var(--on-surface-variant-rgb),.92); transform-origin:center; transition:opacity 150ms var(--easing-emphasized) 100ms, transform 150ms var(--easing-emphasized) 100ms, margin 150ms var(--easing-emphasized); }
.user-input:is(:focus,:focus-within,:active) > input ~ .trailing.icon { margin-inline-end:-1px; }
.user-input > input:placeholder-shown ~ .trailing.icon { opacity:1; transform:scale(1); }

/* ========================----->>>        SELECT COMPONENT        <<<-----=================================================================================== *\
\* =========================================================================================================================================================== */
.user-input > [role=combobox] ~ [data-svg*=expand] { z-index:0; width:40px; height:40px; position:absolute; top:0; bottom:0; margin-block:auto; right:8px; padding:8px; fill:var(--on-surface-variant); transition:transform 150ms var(--easing-emphasized) 100ms, margin 150ms var(--easing-emphasized); }
.user-input:is(:focus,:focus-within,:active) > [role=combobox] ~ [data-svg*=expand] { margin-inline-end:-1px; }
.user-input > [role=combobox] ~ [role=listbox] { overflow-y:scroll; overflow-x:clip; z-index:0; visibility:collapse; position:absolute; top:56px; width:100%; max-height:calc(48px * 5); margin-inline:0; padding:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:4px; background-color:var(--surface-bright); font:var(--bodyL); letter-spacing:var(--bodyL-spacing); will-change:box-shadow; transition:box-shadow 200ms var(--easing-emphasized), visibility 5ms linear 350ms, z-index 50ms linear 150ms; }
.user-input > [role=combobox] ~ [role=listbox] > label:is([role=radio],[role=checkbox],[role=option]) { flex:none; opacity:0; height:0; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:24px; will-change:opacity,height; transition:opacity 150ms var(--easing-emphasized), height 200ms var(--easing-emphasized); }
.user-input > [role=combobox] ~ [role=listbox] > label[role=radio] { padding-inline:22px 12px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
.user-input > [role=combobox] ~ [role=listbox] > label[role=option] { display:flex; order:1; padding-inline:22px 12px; height:40px; line-height:40px; }
.user-input > [role=combobox] ~ [role=listbox] > label[role=option]:focus { background-color:var(--surface-container-high); }
.user-input > [role=combobox] ~ [role=listbox] > label[role=option][aria-selected=true]  { order:0; background-color:var(--surface-container-high); }

.user-input > [role=combobox][aria-selected] ~ [data-svg*=expand] { transform:rotate(180deg); transition:transform 150ms var(--easing-emphasized); }
.user-input > [role=combobox][aria-selected] ~ [role=listbox] { z-index:2; background-color:var(--surface-bright); visibility:visible; box-shadow:0 3px 5px 0 rgba(0,0,0,.3), 0 3px 6px 1px rgba(0,0,0,.15), 0 36px 8px 24px rgba(var(--surface-rgb),.38), 0 64px 8px 48px rgba(var(--surface-rgb),.38); transition:box-shadow 200ms var(--easing-emphasized), z-index 50ms linear; }
.user-input > [role=combobox][aria-selected] ~ [role=listbox] > label:is([role=radio],[role=checkbox],[role=option]) { opacity:1; height:48px; will-change:opacity,height; transition:opacity 200ms var(--easing-emphasized), height 250ms var(--easing-emphasized); }
.user-input > [role=combobox][aria-selected] ~ [role=listbox] > [role=option]:first-child { margin-block-start:4px; }
.user-input > [role=combobox][aria-selected] ~ [role=listbox] > [role=option]:last-child { margin-block-end:4px; }

/* ========================----->>>         RADIO COMPONENT        <<<-----=================================================================================== *\
\* =========================================================================================================================================================== */
[role=group] { display:flex; width:100%; flex-flow:row wrap; justify-content:flex-start; align-items:center; }
input[role=radio] { position:relative; z-index:1; width:20px; height:20px; inline-size:20px; block-size:20px; padding:0; margin:14px; border:2px solid var(--on-surface-variant); border-radius:50%; background-color:transparent; box-sizing:border-box; will-change:border-color; transition:border-color 200ms linear; }
input[role=radio]::before { content:''; position:absolute; top:50%; left:50%; z-index:0; inline-size:40px; block-size:40px; background-color:var(--on-surface); opacity:0; border-radius:50%; transform:translate(-50%,-50%); will-change:opacity, background-color; transition:background-color 200ms linear, opacity 200ms var(--easing-emphasized); } 
input[role=radio]:active::before { opacity:.12; } 
input[role=radio]::after { content:''; display:block; width:16px; height:16px; background-color:var(--primary-container); border-radius:50%; box-sizing:border-box; opacity:0; transform:scale(0); will-change:opacity, transform; transition:transform 200ms var(--easing-emphasized), opacity 200ms var(--easing-emphasized) 50ms; } 
input[role=radio]:checked::before { background-color:var(--primary-container); } 
input[role=radio]:checked { border-color:var(--primary); } 
input[role=radio]:checked::after { opacity:1; transform:scale(calc(10/16)); } 


/* =======================----->>>         SWITCH COMPONENT        <<<-----================================================================================= *\
\* =========================================================================================================================================================== */
/*input[role=switch]/*Track*/ /*{ appearance:none; position:relative; width:52px; height:32px; inline-size:52px; block-size:32px; padding:0; margin:8px 14px; background-color:var(--surface-variant); border:2px solid var(--outline); border-radius:16px; will-change:background-color,border-color; transition:background-color 200ms linear, border-color 200ms linear; }
input[role=switch]::before /*Thumb*/ /*{ content:''; position:absolute; display:block; width:16px; height:16px; inline-size:16px; block-size:16px; margin:6px; padding:0; transform-origin:center; border-radius:50%; background-color:var(--outline); will-change:background-color,transform; transition:background-color 200ms linear, transform 200ms var(--easing-emphasized); }
input[role=switch]:checked { background-color:var(--primary60); border-color:var(--primary); }
input[role=switch]:checked::before { background-color:var(--on-primary); transform:scale(1.5) translateX(10px); }
input[role=switch]::after { opacity:0; content:''; position:absolute; top:8.2px; right:8.2px; display:block; width:10.5px; height:6px; transform:rotate(-45deg); border-left:3px solid var(--primary60); border-bottom:3px solid var(--primary60); border-radius:0 0 0 2px; transform-origin:center center; transition:opacity 50ms var(--easing-emphasized); }
input[role=switch]:checked::before { background-color:var(--on-primary); transform:scale(1.5) translateX(13px); }
input[role=switch]::after input[role=switch]::after { opacity:0; content:''; position:absolute;  top:8px; left:27px; display:block; width:10.63px; height:6px; transform:rotate(-45deg); border-left:3px solid var(--primary60); border-bottom:3px solid var(--primary60); border-radius:0 0 0 2px;  transform-origin:center; transition:opacity 50ms var(--easing-emphasized); }
input[role=switch]:checked::after { opacity:1; transition:opacity 75ms var(--easing-emphasized) 125ms; }*/

input[role=switch]/*Track*/ { appearance:none; position:relative; width:52px; height:32px; inline-size:52px; block-size:32px; padding:0; margin:8px 14px; background-color:var(--surface-variant); border:2px solid var(--outline); border-radius:16px; }
input[role=switch]::before /*Thumb*/ { content:''; position:absolute; inset:0; display:block; width:16px; height:16px; margin-inline:6px auto; margin-block:auto; padding:0; transform-origin:center; border-radius:50%; background-color:var(--outline); will-change:background-color,transform; transition:background-color 250ms var(--easing-legacy), height 300ms var(--easing-legacy), transform 300ms var(--easing-legacy), width 300ms var(--easing-legacy); }
input[role=switch]:checked { background-color:var(--primary60); border-color:var(--primary); }
input[role=switch]:checked::before { background-color:var(--on-primary); width:24px; height:24px; transform:translateX(16px); }
input[role=switch]::after { opacity:0; box-sizing:border-box; content:''; position:absolute; inset:0; margin-block:auto; display:block; width:14px; height:8.6px; transform:translate(7.4px, -1px) rotate(-45deg); border-color:var(--outline); border-style:solid; border-width:0px; border-radius:0 0 0 2px; transform-origin:center; transition:opacity 125ms var(--easing-legacy), transform 300ms var(--easing-legacy), border 125ms var(--easing-legacy); }
input[role=switch]:checked::after { opacity:1; border-color:var(--primary60); border-width:0px 0px 3px 3px; transform:translate(27.5px, -1px) rotate(-45deg); transition:opacity 250ms var(--easing-legacy) 75ms, transform 300ms var(--easing-legacy), border 200ms var(--easing-legacy); }

/* =======================----->>>         CHECKBOX COMPONENT        <<<-----================================================================================= *\
\* =========================================================================================================================================================== */
input[role=checkbox] { flex:none; position:relative; z-index:1; width:18px; height:18px; inline-size:18px; block-size:18px; padding:0; margin:11px; border:2px solid var(--on-surface); border-radius:2px; background-color:transparent; box-sizing:border-box; will-change:border-color, background-color; transition:border-color 200ms linear, background-color 200ms linear; }
input[role=checkbox]::before { content:''; position:absolute; top:50%; left:50%; z-index:0; inline-size:40px; block-size:40px; background-color:var(--on-surface); opacity:0; border-radius:50%; transform:translate(-50%,-50%); will-change:opacity, background-color; transition:background-color 200ms linear, opacity 200ms var(--easing-emphasized); } 
input[role=checkbox]:active::before { opacity:.12; } 
input[role=checkbox]::after { content:''; position:absolute; top:55%; left:10%; width:11px; height:6px; background-color:transparent; border-color:var(--on-primary); border-width:0 0 2px 2px; border-style:solid; box-sizing:border-box; opacity:0; transform:scale(0) rotate(0deg); transform-origin:top left; will-change:opacity, transform; transition:transform 200ms var(--easing-emphasized), opacity 200ms var(--easing-emphasized); } 
input[role=checkbox]:checked::before { background-color:var(--primary-container); } 
input[role=checkbox]:checked { background-color:var(--primary-container); border-color:var(--primary); } 
input[role=checkbox]:checked::after { opacity:1; transform:scale(1) rotate(-45deg); } 
div[role=checkbox] { flex:none; position:relative; z-index:1; width:18px; height:18px; inline-size:18px; block-size:18px; padding:0; margin:15px; border:2px solid var(--on-surface); border-radius:2px; background-color:transparent; box-sizing:border-box; will-change:border-color, background-color; transition:border-color 200ms linear, background-color 200ms linear; }

/* =======================----->>>         FIELDSET COMPONENT        <<<-----================================================================================= *\
\* =========================================================================================================================================================== */
fieldset[role=group] { position:relative; left:0; width:calc(100% + 16px); padding:28px 8px 0 8px; margin-block:24px 0; border-top:1px solid var(--outline); display:flex; flex-flow:column nowrap; justify-content:space-evenly; align-items:stretch; gap:24px; }
fieldset[role=group] > legend { position:absolute; top:-5px; font:var(--titleM); letter-spacing:var(--titleM-spacing); line-height:4px; padding-block:0 2px; padding-inline:4px; background-color:var(--surface-bright); color:var(--outline); }
fieldset[role=group] > legend > span { font:var(--labelM); line-height:inherit; font-style:italic; padding-inline:2px; }

fieldset[role=group] > .user-input { width:unset; }

fieldset.user-input { display:flex; max-height:52px; border:1px solid var(--outline); border-radius:4px; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
fieldset.user-input > .user-input { height:52px; max-height:52px; margin:1px; }
fieldset.user-input > .user-input > input { border:0 none!important; background-color:transparent!important; }
fieldset.user-input > .user-input > input ~ label { color:var(--on-surface-variant)!important; }
fieldset.user-input:is(:focus,:focus-within) { border:2px solid var(--primary); }
fieldset.user-input:is(:focus,:focus-within) > .user-input { margin:0; transition:margin 250ms var(--easing-legacy); }
fieldset.user-input:is(:focus,:focus-within) > .user-input > input ~ label { color:var(--primary)!important; }

fieldset.expandable { position:relative; width:100%; max-width:328px; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; transition:margin 200ms var(--easing-emphasized) 150ms; }
fieldset.expandable > legend { position:absolute; top:0; left:12px; padding-inline:4px; font:var(--labelL); letter-spacing:var(--labelL-spacing); color:var(--primary); background:linear-gradient(to top, rgba(var(--surface-rgb),.38), rgba(var(--surface-rgb),1) 48%); line-height:1; height:15px; transform:translateY(-.6em); }
fieldset.expandable > legend { opacity:0; visibility:hidden; transition:opacity 150ms var(--easing-emphasized) 150ms, visibility 5ms var(--easing-emphasized) 350ms; }
fieldset.expandable > .user-input { opacity:1; visibility:visible; height:56px; transition:opacity 150ms var(--easing-emphasized) 200ms, height 200ms var(--easing-emphasized) 150ms, border 200ms var(--easing-emphasized) 150ms; }
fieldset.expandable > :is(article, aside) > .user-input { overflow:hidden; opacity:0; height:0; margin-block:0 0; transition:opacity 150ms var(--easing-emphasized), height 150ms var(--easing-emphasized) 50ms, border 150ms var(--easing-emphasized) 50ms, margin 150ms var(--easing-emphasized) 50ms; }
fieldset.expandable[aria-expanded] { border-width:1px 0 0 0!important; border-top:1px solid var(--primary)!important; margin-block-start:8px; }
fieldset.expandable[aria-expanded] > legend { opacity:1; visibility:visible; transition:opacity 150ms var(--easing-emphasized) 100ms; }
fieldset.expandable[aria-expanded] > .user-input { opacity:0; visibility:collapse; height:0; transition:opacity 100ms var(--easing-emphasized) 150ms, visibility 5ms var(--easing-emphasized) 250ms, height 150ms var(--easing-emphasized) 150ms, border 150ms var(--easing-emphasized) 150ms; }
fieldset.expandable[aria-expanded] > :is(article, aside) > .user-input { overflow:visible; opacity:1; height:56px; margin-block:24px 0; transition:opacity 150ms var(--easing-emphasized) 150ms, height 200ms var(--easing-emphasized) 150ms, border 200ms var(--easing-emphasized) 150ms, margin 200ms var(--easing-emphasized) 150ms; }
fieldset.expandable[aria-expanded] > :is(article, aside) > .user-input:first-child { margin-block:24px 0; }
fieldset.expandable[aria-expanded] > :is(article, aside) > .user-input:first-child > input ~ label { max-width:calc(100% - 12px - 40px); }
fieldset.expandable[aria-expanded] > :is(article, aside) > .user-input:first-child > input ~ [data-svg*=close] { z-index:1; position:absolute; top:0; bottom:0; right:8px; width:40px; height:40px; margin:auto 0; padding:8px; fill:var(--on-surface-variant); }

/* ----->>>        input's property        <<<----- */
::placeholder { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
:not(.user-input):is(:disabled,[aria-disabled=true]) { pointer-events:none!important; cursor:default!important; color:rgba(var(--on-surface-rgb),.38)!important; fill:rgba(var(--on-surface-rgb),.38)!important; border-color:rgba(var(--on-surface-rgb),.12)!important; box-shadow:none!important; background-color:var(--surface-container)!important; }
.user-input:is(:disabled,[aria-disabled=true]) > :is(input, label, [data-svg]) { pointer-events:none!important; color:rgba(var(--on-surface-rgb),.38)!important; fill:rgba(var(--on-surface-rgb),.38)!important; border-color:rgba(var(--on-surface-rgb),.12)!important; box-shadow:none!important; }
.user-input:is(:disabled,[aria-disabled=true]) > input { background-color:var(--surface-container)!important; }
.user-input:is(.error, .alert, [aria-invalid=true]) > * { color:var(--error)!important; border-color:var(--error)!important; fill:var(--error)!important; }
.user-input > input:is(.error,.alert,[aria-invalid]) { color:var(--error); border:1px solid var(--error); fill:var(--error); }
.user-input > input:is(.error,.alert,[aria-invalid]) ~ :is(label,[data-svg*=expand],.trailing.icon) { color:var(--error);  fill:var(--error); }
.user-input > input:is(.error,.alert,[aria-invalid]).icon { background-color:var(--error-container)!important; }

/* ----->>>        like a form or readonly form        <<<----- */
:is([role=form],form[aria-disabled]) .user-input:not([aria-disabled=false]) { pointer-events:none; }
:is([role=form],form[aria-disabled]) .user-input:not([aria-disabled=false]) > input { pointer-events:none; user-select:none; color:rgba(var(--on-surface-variant-rgb),.38); fill:rgba(var(--on-surface-variant-rgb),.38); border-color:var(--outline-variant); background-color:var(--surface-container); }
:is([role=form],form[aria-disabled]) .user-input > input:placeholder-shown ~ .trailing.icon { opacity:.24; }
:is([role=form],form[aria-disabled]) .user-input:not([aria-disabled=false]) > input + label { z-index:1; color:rgba(var(--on-surface-variant-rgb),.38); font-style:oblique; }
:is([role=form],form[aria-disabled]) .user-input:not([aria-disabled=false]) > input + label::after { content:''!important; }
:is([role=form],form[aria-disabled]) .user-input:not([aria-disabled=false]) > input:is(:required:valid,:not(:placeholder-shown)) { color:var(--secondary-bright); fill:var(--secondary-bright); border-color:var(--secondary-bright); }
:is([role=form],form[aria-disabled]) .user-input:not([aria-disabled=false]) > input:is(:required:valid,:not(:placeholder-shown)) + label { color:var(--secondary-bright); font-style:normal; }
:is([role=form],form[aria-disabled]) button.FAB:not([aria-disabled=false]) { pointer-events:none; color:rgba(var(--on-surface-variant-rgb),.38); fill:rgba(var(--on-surface-variant-rgb),.32); border-color:var(--outline-variant); background-color:var(--surface-container); }
:is([role=form],form[aria-disabled]) > button:is([type=submit],#save):not([aria-disabled=false]) { display:none; }

:is([role=form],form[aria-disabled]) .user-input[role=group]::before { background-color:var(--surface-container); border-color:var(--secondary-bright)!important; }
:is([role=form],form:not([aria-disabled])) .user-input[role=group]:has( > .user-input[aria-busy=true])::before { box-shadow:inset 0 0 8px 30px rgba(var(--secondary-container-rgb),1)!important; }
:is([role=form],form:not([aria-disabled])) .user-input[role=group]:has( > .user-input[aria-busy=false])::before { box-shadow:inset 0 0 8px 30px rgba(var(--secondary-container-rgb),0)!important; transition:box-shadow 550ms var(--easing-emphasized-decelerate) 3000ms, color 400ms var(--easing-legacy) 3150ms; }


:is([role=form]) .user-input > input ~ .helperText { display:none; }
:is([role=form]) .user-input > [role=combobox] ~ [data-svg*=expand] { display:none; }

:is(form[aria-disabled]) .user-input:not([aria-disabled=false]) > input ~ .helperText { color:rgba(var(--on-surface-variant-rgb),.32); }
:is(form[aria-disabled]) .user-input:not([aria-disabled=false]) > [role=combobox] ~ [data-svg*=expand] { fill:rgba(var(--on-surface-variant-rgb),.32); }

.user-group-input { width:100%; height:52px; margin:0; padding-inline:4px 0; border:1px solid var(--primary); border-radius:4px; }
.user-group-input:is(:focus,:focus-within) { border:2px solid var(--primary); }
.user-group-input > label { display:flex; width:calc(100% - 48px); height:50px; margin-block:auto; padding:0; font:var(--bodyL); letter-spacing:0; line-height:20px; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
.user-group-input > label > div { flex:1; text-align:center; }