.form,.form-content{--focus-color:var(--color-black);--row-gap:1rem;--column-gap:.5rem;--col-width-auto:auto;--col-width-20:calc(20% - var(--column-gap)/5*4);--col-width-25:calc(25% - var(--column-gap)/4*3);--col-width-30:calc(30% - var(--column-gap)/10*7);--col-width-33:calc(33.333% - var(--column-gap)/3*2);--col-width-40:calc(40% - var(--column-gap)/5*3);--col-width-50:calc(50% - var(--column-gap)/2);--col-width-60:calc(60% - var(--column-gap)/5*2);--col-width-67:calc(66.666% - var(--column-gap)/3);--col-width-70:calc(70% - var(--column-gap)/10*3);--col-width-75:calc(75% - var(--column-gap)/4);--col-width-80:calc(80% - var(--column-gap)/5);-moz-column-gap:var(--column-gap);column-gap:var(--column-gap);container-type:inline-size;display:flex;flex-wrap:wrap;row-gap:var(--row-gap)}:is(.form,.form-content)>*{flex-basis:100%;flex-grow:1}@container (min-width: 280px){:is(.form,.form-content)>*{flex-basis:var(--col-width,100%)}}:is(.form,.form-content) .button{--col-width:var(--col-width,auto);flex-grow:0}.form[role=search]{--search-color:var(--focus-color);--column-gap:0rem;align-content:end;align-items:end;display:grid;flex-basis:240px;flex-grow:1}.form[role=search]:has(.button[type=submit]){grid-template-columns:1fr auto}.form[role=search] .form-field-wrapper{position:relative;width:100%}.form[role=search] .form-field-wrapper .input{border-end-end-radius:0;border-start-end-radius:0}.form[role=search] .search-input-wrapper{display:flex;position:relative}.form[role=search] input[type=search]{border-inline-end:0}.form[role=search] input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.form[role=search] .button[type=submit]{background-color:var(--search-color);border-color:var(--search-color);border-end-start-radius:0;border-inline-start:0;border-start-start-radius:0;bottom:0;color:var(--color-white);min-width:2rem;outline-offset:-1px;right:0;transition-duration:0s}.form[role=search] .button[type=submit] .iconify{transition-duration:0s}.form[role=search] .button[type=submit]:focus{background-color:var(--search-color);color:var(--color-white);outline-offset:1px}.form[role=search] .button[type=reset]{bottom:.25rem;outline-offset:-1px;position:absolute;right:.25rem;z-index:1}.form[role=search]:has(input[type=search]:focus) .button[type=submit]{background-color:var(--search-color);border-color:var(--search-color);color:var(--color-white);outline:2px solid var(--focus-color)}.form[role=search] .input-size--sm+.button[type=reset]{bottom:.25rem;right:.25rem}.form[role=search] .input-size--sm input[type=search]{padding-inline-end:1.75rem}.form[role=search] .input-size--md+.button[type=reset]{bottom:.375rem;right:.375rem}.form[role=search] .input-size--md input[type=search]{padding-inline-end:2rem}.form[role=search] .input-size--lg+.button[type=reset]{bottom:.25rem;right:.325rem}.form[role=search] .input-size--lg input[type=search]{padding-inline-end:2.5rem}
