@property st-global(--wds-input-value-font-size-small);
@property st-global(--wds-input-value-font-line-height-small);
@property st-global(--wds-font-size-body-small);
@property st-global(--wds-font-line-height-body-small);
@property st-global(--wds-color-background-elevation-base);

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  /* WSR TimeInput small renders text at `--wds-font-size-body-tiny` (12px /
     16px) in the BM/odeditor theme, but `TimeView` (View + overlay) uses WDS
     `Text size="small"` (14px / 18px). The size mismatch makes the time
     "shrink-jump" when the mask flips off after the WSR input syncs. Pin the
     input value font to body-small so both renderings match exactly. */
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
  --wds-input-value-font-line-height-small: var(
    --wds-font-line-height-body-small
  );
}

.overlay {
  /* Inset by 2px so the cell's editing focus ring
     (inset box-shadow on EditableCell) stays visible. */
  position: absolute;
  inset: 2px;
  pointer-events: none;
  background: var(--wds-color-background-elevation-base, #fff);
}
