/* -- 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:none; outline:none; font:inherit; font-size:100%; font-weight:inherit; vertical-align:baseline; } form[aria-disabled] > .user-input { user-select:none; pointer-events:none; z-index:0; outline-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; } form[aria-disabled] > .user-input > * { user-select:none; pointer-events:none; z-index:0; outline-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; } form[data-user-profile="admin"]:has(input#profile[data-value="admin"]) > button { user-select:none; pointer-events:none; z-index:0; outline-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; } form[data-user-profile="admin"]:has(input#profile[data-value="admin"]) .user-input { user-select:none; pointer-events:none; z-index:0; outline-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; } form[data-user-profile="admin"]:has(input#profile[data-value="admin"]) .user-input > * { user-select:none; pointer-events:none; z-index:0; outline-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; } form[data-user-profile="admin"]:has(input#profile[data-value="admin"]) + #form-btn { user-select:none; pointer-events:none; z-index:0; opacity:0; } .user-input:has(> input:not([type=hidden]):read-only), .user-input[aria-disabled] { user-select:none; pointer-events:none; z-index:0; outline-color:var(--on-container-12)!important; } .user-input > input:not([type=hidden]):read-only, .user-input[aria-disabled] input { user-select:none; pointer-events:none; z-index:0; color:var(--on-container-38)!important; } .user-input > input:not([type=hidden]):read-only ~ label, .user-input[aria-disabled] input ~ label { user-select:none; pointer-events:none; z-index:0; color:var(--on-container-38)!important; } .user-input > input:not([type=hidden]):read-only ~ label ~ [data-svg], .user-input[aria-disabled] input ~ label ~ [data-svg], .user-input[aria-disabled] > [data-svg] { fill:var(--on-container-38)!important; } input[role="combobox"] { caret-color:transparent; } input[type=date] { user-select:none; pointer-events:none; } input[type=date]::-webkit-datetime-edit { appearance:none; -webkit-appearance:none; margin-inline:0; padding-inline:0; } input[type=date]::-webkit-calendar-picker-indicator { display:none; appearance:none; -webkit-appearance:none; } input[type=time]::-webkit-datetime-edit { appearance:none; -webkit-appearance:none; flex:none; min-width:100%; } input[type=time]::-webkit-calendar-picker-indicator { display:none; appearance:none; -webkit-appearance:none; } input[type=time]::-webkit-datetime-edit-hour-field { padding:0 2px 0 2px; } input[type=time]::-webkit-datetime-edit-minute-field { padding:0 2px 0 2px; } form, [role=form] { flex:1; width:auto; padding-block:6px 24px; background-color:inherit; color:var(--on-container); font:var(--bodyL); letter-spacing:var(--bodyL-spacing); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; /*margin:0 auto;*/ row-gap:24px; } form:has( > section[role=group]) { flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; margin:0 auto; gap:0; } form > section[role=group] { width:100%; /*min-height:100%;*/ } form > section[role=group]:not([aria-current=step]) { contain:layout; z-index:0; opacity:0; pointer-events:none; min-width:0; max-width:0; max-height:100%; margin-inline:0; padding-inline:0; } form > section[role=group]:has(input:invalid) > #form-btn > button:last-child { background-color:var(--on-container-12); color:var(--on-container-38); fill:var(--on-container-38); pointer-events:none; } :is(form,[role=form]) :is(div,fieldset,section) { position:relative; background-color:inherit; color:inherit; } form button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child) { opacity:0; } /*form:invalid button:is(.submit,[type=submit]), form:invalid ~ section > button:is(.submit,[type=submit]), button:is(.disabled,[disabled],[aria-disabled]) { filter:saturate(.32) opacity(0.36); pointer-events:none; }*/ 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; } input:invalid:not(:placeholder-shown) { color:var(--error)!important; outline-color:var(--error)!important; fill:var(--error)!important; } 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 :is(fieldset,[role=group]) { contain:layout; position:relative; flex:none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; margin-inline:0; gap:24px; } form :is(fieldset,[role=group]).inline { flex-flow:row wrap; justify-content:space-between; gap:12px; } form :is(fieldset,[role=group]).inline > .user-input { flex:1; } form :is(fieldset,[role=group],[role=form],.user-input) > [data-svg]:not(.icon,button):last-child { position:absolute; inset:16px auto auto -40px; fill:var(--on-body); background-color:transparent!important; } form > fieldset { padding-block:24px; margin-block:16px 0; border-block:1.5px solid var(--on-container-38); } form > fieldset > legend { position:absolute; inset:-14px auto auto -16px; padding-inline:0 6px; color:var(--on-container-80); background-color:var(--container-bg); font:var(--titleM); } form .divider { contain:content; min-height:1px; max-height:1px; flex:none; margin-block:4px; width:80%; margin-inline:10%; align-self:center; background-color:var(--on-container-38); } form #form-btn { position:relative; contain:content; flex:none; height:72px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:16px; } form + #form-btn { position:relative; contain:content; flex:none; padding-inline:0 24px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:16px; } /* ----->>> input's wrapper <<<----- */ form > :first-child { margin-block:8px 0; } form > .user-input { flex:none; } .user-input { contain:layout; position:relative; height:56px; width:100%; max-width:calc(var(--display-width) - 32px); padding:0; margin:0; outline:1px solid var(--on-container-38); outline-offset:-1px; background-color:inherit; border-radius:4px; } .user-input:is(:focus,:focus-within,:active), .user-input:has( > input:focus-visible) { outline:2px solid var(--on-body-80); outline-offset:-2px; } .user-input { will-change:background,color; transition:height 350ms var(--easing-emphasized), min-height 350ms var(--easing-emphasized), max-height 350ms var(--easing-emphasized), margin 350ms var(--easing-emphasized), box-shadow 350ms var(--easing-legacy), color 200ms var(--easing-legacy), background-color 250ms var(--easing-legacy), border 250ms var(--easing-legacy); } .user-input:is(:focus,:focus-within,:active), [role=group]:has(input[aria-selected]), .user-input:has(input[aria-selected]), fieldset:has(input[aria-selected]) { z-index:3; } .user-input[aria-expanded=false] { contain:content; min-height:0!important; height:0!important; max-height:0!important; margin-block:-20px 0; } .user-input[role=group] { padding-inline:16px; background-color:transparent; /*color:var(--on-container-80);*/ color:inherit; border-radius:4px; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch; gap:36px; } .user-input[role=group] > .user-input { outline:none; } .user-input[role=group] > .user-input > input { flex:none; padding-inline:4px 0!important; } .user-input[role=group] > .user-input > input ~ label { background-color:var(--container-bg)!important; margin-inline:0; } /* ----->>> placeholder <<<----- */ .user-input > input::placeholder { opacity:0; color:transparent; } /* ----->>> input <<<----- */ .user-input > :is(input,[contenteditable]) { box-sizing:content-box; z-index:1; position:absolute; inset:0; display:block; margin:2px; padding-inline:16px; background-color:transparent; color:var(--on-container-80); border-radius:4px; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:52px; text-align:left; } .user-input > :is(input,[contenteditable],textarea) { transition:box-shadow 200ms var(--easing-legacy), background-color 200ms var(--easing-legacy), color 150ms var(--easing-legacy) 50ms, outline 150ms var(--easing-legacy) 50ms; } .user-input > input:is(:required:valid,:not(:placeholder-shown)) { appearance:none; z-index:1; outline-color:var(--on-body-80); color:inherit; } .user-input > input:is(:-webkit-autofill,:-webkit-autofill:focus,:-webkit-autofill:hover,:-internal-autofill-selected,:-internal-autofill-previewed) { -webkit-text-fill-color:var(--on-container-80); box-shadow:inset 0 0 10px 500px var(--container-bg)!important; height:52px; margin:2px; } /* ----->>> input w/ suffix <<<----- */ .user-input[data-suffix]::after { content:attr(data-suffix); z-index:0; position:absolute; inset:0 12px 0 auto; opacity:1; margin-block:auto; width:fit-content; height:52px; color:var(--on-container); font:var(--bodyL); letter-spacing:normal; line-height:52px; transition:opacity 150ms var(--easing-emphasized); } .user-input[data-suffix]:has(input:not(:focus):placeholder-shown)::after {opacity:0; } .user-input[data-suffix] > :is(input,[contenteditable]) { padding-inline:16px 32px; } /* ----->>> input w/ trailing icon <<<----- */ search.user-input > input:not([type=hidden]) { padding-inline:16px 36px!important; } .user-input > input:not([type=hidden]) ~ .icon:is(.trailing,.clear) { opacity:0; transform:scale(.8); width:40px; height:40px; position:absolute; inset:8px 8px auto auto; padding:8px; fill:var(--on-container-80); transform-origin:center; transition:opacity 300ms var(--easing-emphasized) 100ms, transform 300ms var(--easing-emphasized) 100ms; } /*.user-input:is(:focus,:focus-within,:active) > input ~ .trailing.icon { margin-inline-end:-1px; }*/ .user-input > input:not([type=hidden]):placeholder-shown ~ .trailing.icon { opacity:1; transform:scale(1); } .user-input > input:not([type=hidden]):not(:placeholder-shown) ~ .trailing.icon + .clear.icon { opacity:1; transform:scale(1); z-index:2; } /* ----->>> input w/ helperText <<<----- */ .user-input > .helperText { position:absolute; top:54px; right:8px; margin-block:4px 0; font:var(--bodyS); letter-spacing:var(--bodyS-spacing); color:var(--on-container); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } /* ----->>> input ~ button <<<----- */ .user-input:has( > button:last-child) > :is(input,[contenteditable],textarea) { inset:0 48px 0 0; } .user-input > button:last-child { position:absolute; opacity:.76; inset:4px -8px 4px auto; } .user-input:has( > button:last-child) + .user-input > :is(input,[contenteditable],textarea) { inset:0 48px 0 0; } /*.user-input:has( > button:last-child) + .user-input + .user-input > :is(input,[contenteditable],textarea) { inset:0 48px 0 0; }*/ /* ----->>> input ~ label <<<----- */ .user-input > label { z-index:0; contain:content; position:absolute; inset:0; pointer-events:none; height:24px; width:fit-content; max-width:calc(100% - 12px); padding-inline:3px; margin-block:auto; margin-inline:12px; color:var(--on-container-80); white-space:nowrap; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); will-change:transform,color; transition:line-height 250ms var(--easing-emphasized), color 150ms linear; } .user-input > input[role=combobox] ~ label { margin-inline:12px 60px; } .user-input:not(:focus,:focus-within,:active) > input:is(:required,[aria-required=true]):placeholder-shown:not(:focus,:active,[aria-selected]) ~ label::after { content:'*'; position:relative; top:-5px; left:2px; color:var(--error); font:var(--labelM); } .user-input:not(:focus,:focus-within,:active) > input[optional]:placeholder-shown:not(:focus,:active,[aria-selected]) ~ label::after { content:' (facultatif)'; font:var(--bodyS); letter-spacing:var(--bodyS-spacing); font-style:italic; } .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; contain:layout; height:4px; max-width:unset; margin-block:-1px auto; background-color:inherit; color:var(--on-body); font:var(--bodyS); font-weight:400; letter-spacing:var(--bodyS-spacing); line-height:3px; } search.user-input:has(.chips-list:not(:empty)) > label::after { display:none; } /* ----->>> input disabled <<<----- */ [role=complementary] > [data-type='project-step'].create form .user-input:has(#status) { pointer-events:none; z-index:0; color:var(--on-container-38); fill:var(--on-container-38); outline-color:var(--on-container-22); background-color:var(--on-container-4)!important; } /*[role=complementary] > [data-type='datasheet'].create form .user-input:has(#exclusivity_end) { pointer-events:none; z-index:0; color:var(--on-container-38); fill:var(--on-container-38); outline-color:var(--on-container-22); background-color:var(--on-container-4)!important; }*/ .user-input:is(:disabled,[aria-disabled]:not([aria-disabled=false])), .user-input:has(input:is(:disabled,[aria-disabled]:not([aria-disabled=false]))) { pointer-events:none; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; outline-color:var(--on-container-22)!important; background-color:var(--on-container-4)!important; } .user-input:is(:disabled,[aria-disabled]:not([aria-disabled=false])) > label, .user-input:has(input:is(:disabled,[aria-disabled]:not([aria-disabled=false]))) > label { color:var(--on-container-38)!important; } /* ----->>> textarea <<<----- */ .user-input:has( > textarea) { height:280px; } .user-input > textarea { box-sizing:content-box; z-index:1; position:absolute; inset:0; margin:0; padding-inline:16px; height:100%; background-color:transparent; color:var(--on-container-80); border-radius:4px; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:28px; text-align:left; } /* ========================----->>> RADIO COMPONENT <<<-----=================================================================================== *\ \* =========================================================================================================================================================== */ :is([role=radio],[role=checkbox],[role=option]) { flex:none; opacity:0; height:0; font:var(--labelL); letter-spacing:var(--labelL-spacing); line-height:24px; will-change:opacity,height; transition:opacity 150ms var(--easing-emphasized), height 200ms var(--easing-emphasized); } label[role=radio] { padding-inline:4px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } 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); } input[role=radio] { opacity:1; position:relative; z-index:1; width:18px; height:18px; inline-size:18px; block-size:18px; padding:0; margin:14px; outline:1.5px solid var(--on-body); 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(--body-bg-48); 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:18px; height:18px; background-color:var(--on-body-80); 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(--on-body-80); } input[role=radio]:checked { outline-color:var(--on-body); } input[role=radio]:checked::after { opacity:1; transform:scale(.6); } /* =======================----->>> SWITCH COMPONENT <<<-----================================================================================= *\ \* =========================================================================================================================================================== */ .user-input:has( > label[role=switch]) { border-bottom:1px solid var(--on-container-12); border-radius:0; } 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(--container-bg); outline-offset:-1px; outline:1px solid var(--on-container-38); border-radius:16px; } input[role=switch]:checked { background-color:var(--primary-container); outline-offset:-2px; outline:2px solid var(--primary-container-variant); } input[role=switch]::before /*Thumb*/ { content:''; position:absolute; inset:0; display:block; width:16px; height:16px; margin-block:auto; margin-inline:auto 32px; padding:0; transform-origin:center; border-radius:50%; background-color:var(--on-container-12); will-change:background-color,transform; transition:background-color 150ms var(--easing-legacy), outline 150ms var(--easing-legacy), transform 200ms var(--easing-legacy), margin 200ms var(--easing-legacy); } input[role=switch]:checked::before { background-color:var(--on-primary); transform:scale(1.5); margin-inline:auto 8px; transition:background-color 250ms var(--easing-legacy), outline 250ms var(--easing-legacy), transform 300ms var(--easing-legacy), margin 300ms var(--easing-legacy); } input[role=switch]::after { box-sizing:border-box; content:''; position:absolute; inset:0; margin-block:11px auto; margin-inline:auto 33px; display:block; width:14px; height:8px; transform:rotate(-45deg); border-style:solid; border-color:transparent; border-width:0 0 2px 2px; border-radius:0 0 0 2px; transform-origin:center; transition:margin 200ms var(--easing-legacy), border 75ms var(--easing-legacy); } input[role=switch]:checked::after { border-width:0 0 3px 3px; border-color:var(--primary-container-variant); margin-inline:auto 9px; transition:margin 300ms var(--easing-legacy), border 250ms var(--easing-legacy); } label[role=switch] { flex:none; width:100%; max-width:calc(100% - 8px); height:100%; margin:auto 0; padding-inline:12px 4px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:24px; } label > span { margin-inline:4px auto; font:var(--labelM); letter-spacing:var(--labelM-spacing); color:var(--on-container-48); } label[role=switch] > input[role=switch] { margin:auto 0; } /* =======================----->>> CHECKBOX COMPONENT <<<-----================================================================================= *\ \* =========================================================================================================================================================== */ input[type=checkbox] { flex:none; position:relative; z-index:1; width:18px; height:18px; inline-size:18px; block-size:18px; padding:0; margin:3px; outline:1.5px solid var(--on-container-80); outline-offset:-.5px; 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[type=checkbox]::before { content:''; position:absolute; top:50%; left:50%; z-index:0; inline-size:40px; block-size:40px; background-color:var(--on-container-80); 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[type=checkbox]:active::before { opacity:.12; } input[type=checkbox]::after { content:''; position:absolute; top:55%; left:15%; 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[type=checkbox]:checked::before { background-color:var(--primary-container); } input[type=checkbox]:checked { background-color:var(--primary-container); outline-color:var(--primary-container-variant); } input[type=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:11px; outline:1.5px solid var(--on-container-80); 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; }*/ /* ========================----->>> SELECT COMPONENT <<<-----=================================================================================== *\ \* =========================================================================================================================================================== */ .user-input:not(search) > [role=combobox] { z-index:0; pointer-events:none; user-select:none; cursor:pointer; } .user-input > input ~ label + :is([data-svg*=drop-down],[data-svg*=add]) { position:absolute; z-index:1; width:40px; height:40px; inset:0 8px 0 auto; margin-block:auto; padding:8px; fill:var(--on-container-80); transition:transform 150ms var(--easing-legacy) 100ms, margin 150ms var(--easing-emphasized); } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] { contain:content; overflow-y:hidden; overflow-x:clip; z-index:0; visibility:collapse; position:absolute; top:56px; left:1px; width:calc(100% - 2px); height:0; margin-inline:0; padding:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:4px; background-color:inherit; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); will-change:box-shadow; transition:height 250ms var(--easing-emphasized), box-shadow 200ms var(--easing-emphasized), visibility 5ms linear 350ms; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > :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); } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > :is([role=option],[role=checkbox])[aria-label]::after { content:attr(aria-label); flex:1; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > :is([role=radio])[aria-label]::before { content:attr(aria-label); } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > :is([role=radio],[role=checkbox]) { padding-inline:16px 4px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [data-svg]:is([role=radio],[role=checkbox]) { justify-content:flex-start; align-items:center; column-gap:12px; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [data-svg]:is([role=radio],[role=checkbox]) > input { order:3; margin-inline:auto 16px; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option] { flex:none; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; order:1; padding-inline:16px 12px; height:40px; line-height:1.1; row-gap:8px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option][data-svg] { column-gap:16px; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option][data-subtitle]:not([data-subtitle='(null)'])::after { content:attr(data-subtitle); margin-inline:auto 16px; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option] > svg { position:static; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option]:focus { background-color:var(--on-container-16); } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option]:hover { background-color:var(--on-container-8); } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option][aria-selected] { order:0; background-color:var(--on-container-8); } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox] > [role=option].disabled:not([aria-selected]) { order:10; display:none; } /*:is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has(:is([role=option]:not(.disabled),[role=option].disabled[aria-selected]):nth-child(2)) { height:calc(2 * 48px + 16px)!important; }*/ /*:is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(2)) { height:calc(2 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(3)) { height:calc(3 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(4)) { height:calc(4 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(5)) { height:calc(5 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(6)) { height:calc(6 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(7)) { height:calc(7 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(8)) { height:calc(8 * 48px + 16px)!important; } :is(search, .user-input) > :is([role=searchbox],[role=combobox]) ~ [role=listbox]:has([role=option]:nth-child(9)) { height:calc(9 * 48px + 16px)!important; }*/ .user-input > :is([role=searchbox],[role=combobox])[aria-selected] ~ label + [data-svg*=drop-down] { transform:rotate(180deg); transition:transform 75ms var(--easing-legacy); } :is(search, .user-input) > :is([role=searchbox],[role=combobox])[aria-selected] ~ [role=listbox] { z-index:3; visibility:visible; /*height:calc(48px * var(--num-lines) + 16px);*/ min-height:fit-content; height:auto; padding-block:8px; box-shadow:var(--shadow-1); transition:height 400ms var(--easing-legacy), box-shadow 350ms var(--easing-emphasized); } :is(search, .user-input) > :is([role=searchbox],[role=combobox])[aria-selected] ~ [role=listbox]:empty { height:0; padding-block:0; box-shadow:none; } :is(search, .user-input) > :is([role=searchbox],[role=combobox])[aria-selected] ~ [role=listbox] > :is([role=radio],[role=checkbox],[role=option]) { opacity:1; min-height:48px; padding-block:4px; overflow:hidden; will-change:opacity,height; transition:opacity 200ms var(--easing-emphasized), height 250ms var(--easing-emphasized); } :is(search, .user-input) > :is([role=searchbox],[role=combobox])[aria-selected] ~ [role=listbox] > [role=option]:first-child { margin-block-start:4px; } :is(search, .user-input) > :is([role=searchbox],[role=combobox])[aria-selected] ~ [role=listbox] > [role=option]:last-child { margin-block-end:4px; } search.user-input:has(.chips-list:not(:empty)) { min-height:56px; /*max-height:fit-content;*/ height:auto; padding:1px; } search.user-input > .chips-list { position:relative; contain:content; z-index:2; margin-block:14px 10px; margin-inline:12px 44px; display:flex; flex-flow:row wrap; justify-content:flex-start; column-gap:8px; row-gap:8px; } search.user-input > .chips-list:empty { opacity:0; z-index:0; margin-block:0; } /*search.user-input:has(.chips-list:not(:empty)):is(:active,:focus,:focus-within) > [role=searchbox], search.user-input:has(.chips-list:not(:empty)) > [role=searchbox]:focus { position:relative; width:calc(100% - 56px); }*/ search.user-input:has(.chips-list:not(:empty)):focus > [role=searchbox], search.user-input:has(.chips-list:not(:empty)) > [role=searchbox]:focus { position:relative; width:calc(100% - 56px); max-height:51px; border-radius:4px 4px 0 0; border-bottom:1.5px solid var(--on-body-80); } /*search.user-input:has(.chips-list:not(:empty)):is(:active,:focus,:focus-within) > [role=searchbox]::after, search.user-input:has(.chips-list:not(:empty)) > [role=searchbox]:focus::after { content:""; position:absolute; inset:auto 0 1px 0; display:block; height:0; border-bottom:2px solid var(--on-body-80); }*/ search.user-input:has(.chips-list:not(:empty)) > label { z-index:2; contain:layout; height:4px; max-width:unset; margin-block:-1px auto; background-color:inherit; color:var(--on-body); font:var(--bodyS); font-weight:400; letter-spacing:var(--bodyS-spacing); line-height:3px; } /*search:has(.chips-list:not(:empty)) > input[role=searchbox] ~ .icon:is(.trailing,.clear) { margin-block:8px auto; }*/ /*search:has(.chips-list:not(:empty)) > label::after { display:none; }*/ /* ----->>> input's property <<<----- */ ::placeholder { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .user-input:is(.error, .alert, [aria-invalid=true][aria-errormessage]) { color:var(--error)!important; outline-color:var(--error)!important; fill:var(--error)!important; } .user-input:is(.error, .alert, [aria-invalid=true][aria-errormessage]) > * { color:var(--error)!important; outline-color:var(--error)!important; fill:var(--error)!important; } .user-input > input:is(.error,.alert,[aria-invalid][aria-errormessage]) { color:var(--error); outline-color:var(--error); fill:var(--error); } .user-input > input:is(.error,.alert,[aria-invalid][aria-errormessage]) ~ :is(label,[data-svg*=expand],.trailing.icon) { color:var(--error); fill:var(--error); } .user-input:is(.error, .alert, [aria-invalid=true][aria-errormessage])::after { content:attr(aria-errormessage); position:absolute; inset:auto 0 -16px 0; color:var(--error); font:var(--labelL); }