.layout-form-view__input-field {
  --boxel-field-label-width: minmax(4rem, 25%);
}

/* these styles rely on swatch styles */
.layout-form-view__selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--selection-item-width));
  grid-auto-rows: var(--selection-item-height);
  gap: var(--selection-gap);
  align-items: center;
  justify-items: center;
  max-width: calc((var(--selection-item-width) + var(--selection-gap)) * var(--selection-columns));
}

.layout-form-view__selection-item {
  box-shadow:
    0 0 1px var(--selection-item-inner-border-width) #fff,
    0 0 1px calc(var(--selection-item-inner-border-width) + var(--selection-item-outer-border-width)) #000;
  border-radius: 3px;
  transition: box-shadow 0.1s;
}

.layout-form-view__selection-item--checked {
  --selection-item-outer-border-width: 3px;
  --selection-item-inner-border-width: 3px;
}

.layout-form-view__selection--background {
  --selection-columns: 6;
  --selection-item-width: var(--background-swatch-width);
  --selection-item-height: var(--background-swatch-height);
  --selection-gap: var(--boxel-sp-xs);
}

.layout-form-view__selection--theme {
  --selection-columns: 4;
  --selection-item-width: var(--theme-swatch-width);
  --selection-item-height: var(--theme-swatch-height);
  --selection-gap: var(--boxel-sp);
}