/*
 * SWT Units/Measure fallback styles
 * Provides minimal UI when plugin CSS is missing.
 * Uses contract selectors only, with limited internal hooks for layout.
 */

:where(.swt-block--units, [data-swt-block="units"]),
:where(.swt-block--measure, [data-swt-block="measure"]),
:where(.swt-block--install-allowance, [data-swt-block="install-allowance"]){
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

:where(.swt-block--measure, [data-swt-block="measure"]){
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
}

:where(.swt-block--units, [data-swt-block="units"]){
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px 16px;
}

:where(.swt-block--measure, [data-swt-block="measure"]) :where(input[type="number"], input[type="text"], select),
:where(.swt-block--units, [data-swt-block="units"]) :where(input[type="number"], input[type="text"], select){
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  font: inherit;
  background: #fff;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

:where(.swt-block--measure, [data-swt-block="measure"]) .swt-measure__control,
:where(.swt-block--measure, [data-swt-block="measure"]) .swt-measure__stepper{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

:where(.swt-block--measure, [data-swt-block="measure"]) .swt-measure__suffix,
:where(.swt-block--measure, [data-swt-block="measure"]) .swt-measure__unit{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-left: 6px;
}

:where(.swt-block--measure, [data-swt-block="measure"]) .swt-measure__stepper-btn,
:where(.swt-block--units, [data-swt-block="units"]) button{
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #f7f7f7;
  color: inherit;
  cursor: pointer;
}