@position-try --tooltip-top{position-area:top center}little-layout-field-control{--layout-box-size: var(--little-layout-box-size, 22px);--layout-boxes-gap: .25rem;--layout-box-border-radius: .3rem}little-layout-field-control .container{overflow:auto;-webkit-overflow-scrolling:touch}little-layout-field-control .field{display:grid;grid-template-columns:min-content minmax(0,1fr);gap:.3rem;align-items:center}little-layout-field-control .layout-boxes{display:flex;flex-direction:column;gap:var(--layout-boxes-gap)}little-layout-field-control .layout-tooltip{display:none;margin-block:var(--layout-boxes-gap);padding:7px;min-width:15ch;max-width:60ch;background-color:var(--gray-150);border:1px solid var(--medium-dark-text-color);border-radius:var(--layout-box-border-radius);text-box:trim-both cap alphabetic;text-wrap:balance;color:var(--medium-dark-text-color);z-index:1}little-layout-field-control:has(:is(.clear-button,.layout-boxes):hover) .layout-tooltip{display:inline-block;position:absolute}@supports (position-anchor: --tooltip-anchor){little-layout-field-control:has(:is(.clear-button,.layout-boxes):hover) .layout-boxes{anchor-name:--tooltip-anchor}little-layout-field-control:has(:is(.clear-button,.layout-boxes):hover) .layout-tooltip{position:fixed;position-anchor:--tooltip-anchor;position-area:bottom center;position-try-fallbacks:--tooltip-top}}little-layout-field-control .layout-boxes-row{display:flex;gap:var(--layout-boxes-gap)}little-layout-field-control .layout-box{display:block;padding:2px;width:var(--layout-box-size);-webkit-appearance:none;-moz-appearance:none;appearance:none;aspect-ratio:1 / 1;background-color:var(--background-color, var(--gray-150));border:1px solid var(--medium-dark-text-color);border-radius:var(--border-radius, 0);color:var(--color)}little-layout-field-control .layout-box.layout-box--editable{cursor:pointer}little-layout-field-control .layout-box.layout-box--editable:is(:hover,:focus){--background-color: var(--primary-color);--color: white;border-color:var(--primary-color);outline:var(--layout-boxes-gap) solid color-mix(in srgb,var(--primary-color),transparent 90%)}little-layout-field-control .layout-box.layout-box--rounded-tl{border-top-left-radius:var(--layout-box-border-radius)}little-layout-field-control .layout-box.layout-box--rounded-bl{border-bottom-left-radius:var(--layout-box-border-radius)}little-layout-field-control .layout-box.layout-box--rounded-tr{border-top-right-radius:var(--layout-box-border-radius)}little-layout-field-control .layout-box.layout-box--rounded-br{border-bottom-right-radius:var(--layout-box-border-radius)}little-layout-field-control .layout-box.layout-box--selected{--background-color: var(--medium-dark-text-color);--color: rgb(255 255 255 / .8)}little-layout-field-control .layout-box.layout-box--editable.layout-box--selected:is(:hover,:focus){--background-color: color-mix(in srgb, var(--primary-color) 90%, var(--medium-dark-text-color) 30%);--color: color-mix(in srgb, white 90%, var(--medium-dark-text-color) 30%)}little-layout-field-control .layout-box>svg{width:100%;height:auto}little-layout-field-control .clear-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;align-self:stretch;width:22px;background:transparent;border:none;cursor:pointer}little-layout-field-control .clear-button:before{margin-top:-3px}#settings:has(little-layout-field-settings){container-type:inline-size;container-name:settings}little-layout-field-settings{display:grid;grid-template-columns:var(--grid-template-columns, 1fr);gap:var(--xl);max-width:100%}@container settings (width > 900px){little-layout-field-settings{--grid-template-columns: max-content 1fr;grid-template-rows:auto auto 1fr;gap:0 var(--xl)}little-layout-field-settings .little-layout-settings__default-value-label{grid-column:2 / -1;grid-row:1 / 2}little-layout-field-settings .little-layout-settings__fields{grid-column:1 / 2;grid-row:1 / 4}little-layout-field-settings little-layout-field-control{grid-column:2 / 3;grid-row:2 / 3}little-layout-field-settings .little-layout-settings__icons{margin-top:var(--xl);padding-top:var(--xl);grid-column:2 / 3;grid-row:3 / 4;border-top:1px solid var(--hairline-color)}}
