.component-form-field-array{display:grid;gap:.5rem;grid-template:"_label _clear _add  " 2rem "_items _items _items" auto / 1fr auto auto;>label{--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);grid-area:_label;align-self:center}.component-form-field-array-items{syntax:"*";initial-value:0;syntax:"<percentage>";inherits:false;initial-value:100%;padding:calc(var(--spacing) * 2);border-width:1px;border-color:color-mix(in oklab,#8884 var(--un-border-opacity),transparent);border-radius:var(--radius-DEFAULT);gap:calc(var(--spacing) * 2);grid-area:_items;>small{syntax:"<percentage>";inherits:false;initial-value:100%;color:color-mix(in srgb,var(--colors-gray-500) var(--un-text-opacity),transparent);text-align:center;width:100%;display:block}@supports (color: color-mix(in lab,red,red)){>small{color:color-mix(in oklab,var(--colors-gray-500) var(--un-text-opacity),transparent)}}}.\-{:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-y-reverse)))}}.component-form-field-array-item{gap:calc(var(--spacing) * 2);display:grid;align-items:flex-start;>button._remove{syntax:"*";padding-inline:calc(var(--spacing) * 2.5);border-width:1px;border-color:color-mix(in oklab,#8884 var(--un-border-opacity),transparent)!important;border-radius:var(--radius-DEFAULT);opacity:50%;text-decoration:none!important;transition-property:all;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));--un-duration:.2s;transition-duration:.2s;--un-ease:var(--ease-out);transition-timing-function:var(--ease-out);grid-area:_remove;align-self:flex-end;syntax:"<percentage>";inherits:false;initial-value:100%}>button._remove:hover{color:color-mix(in srgb,var(--colors-red-DEFAULT) var(--un-text-opacity),transparent);background-color:color-mix(in srgb,var(--colors-red-DEFAULT) 10%,transparent);opacity:100%}@supports (color: color-mix(in lab,red,red)){>button._remove:hover{color:color-mix(in oklab,var(--colors-red-DEFAULT) var(--un-text-opacity),transparent);background-color:color-mix(in oklab,var(--colors-red-DEFAULT) 10%,transparent)}}}button._clear{syntax:"*";padding-inline:calc(var(--spacing) * 2.5);border-width:1px;border-color:color-mix(in oklab,#8884 var(--un-border-opacity),transparent)!important;border-radius:var(--radius-DEFAULT);opacity:50%;text-decoration:none!important;transition-property:all;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));--un-duration:.2s;transition-duration:.2s;--un-ease:var(--ease-out);transition-timing-function:var(--ease-out);grid-area:_clear;syntax:"<percentage>";inherits:false;initial-value:100%}button._clear:hover{color:color-mix(in srgb,var(--colors-red-DEFAULT) var(--un-text-opacity),transparent);background-color:color-mix(in srgb,var(--colors-red-DEFAULT) 10%,transparent);opacity:100%}@supports (color: color-mix(in lab,red,red)){button._clear:hover{color:color-mix(in oklab,var(--colors-red-DEFAULT) var(--un-text-opacity),transparent);background-color:color-mix(in oklab,var(--colors-red-DEFAULT) 10%,transparent)}}button._add{syntax:"*";padding-inline:calc(var(--spacing) * 2.5);border-width:1px;border-color:color-mix(in oklab,#8884 var(--un-border-opacity),transparent)!important;border-radius:var(--radius-DEFAULT);opacity:50%;text-decoration:none!important;transition-property:all;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));--un-duration:.2s;transition-duration:.2s;--un-ease:var(--ease-out);transition-timing-function:var(--ease-out);grid-area:_add;syntax:"<percentage>";inherits:false;initial-value:100%}button._add:hover{color:color-mix(in srgb,var(--colors-blue-DEFAULT) var(--un-text-opacity),transparent);background-color:color-mix(in srgb,var(--colors-blue-DEFAULT) 10%,transparent);opacity:100%}@supports (color: color-mix(in lab,red,red)){button._add:hover{color:color-mix(in oklab,var(--colors-blue-DEFAULT) var(--un-text-opacity),transparent);background-color:color-mix(in oklab,var(--colors-blue-DEFAULT) 10%,transparent)}}}