@layer components {
  .spreadsheet-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    position: relative;
  }

  /* The toolbar and formula bar hosts stack on top of the wrap, sharing its borders. Each
     collapses when the spreadsheet library leaves it empty. */
  .spreadsheet-toolbar,
  .spreadsheet-formula-bar-outer {
    border: 1px solid var(--color-border);
    border-block-end: none;
    overflow: hidden;

    &:empty { display: none; }
  }
  .spreadsheet-toolbar {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-block-end: -1px;

    &:not(:empty) + .spreadsheet-formula-bar-outer:not(:empty) { margin-block-end: -1px; }
  }

  .spreadsheet-formula-bar {
    align-items: center;
    background: var(--color-surface);
    block-size: 28px;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    gap: 6px;
    padding: 0 8px;
  }
  .spreadsheet-formula-bar__label {
    color: var(--color-text-secondary);
    font-style: italic;
    user-select: none;
  }
  /* input.spreadsheet-formula-bar__input, not the bare class: core's input[type="text"] outranked
     it, so the field was a 44px padded form control clipped by the 28px bar. */
  input.spreadsheet-formula-bar__input {
    background: transparent;
    block-size: 22px;
    border: none;
    box-shadow: none;
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    min-block-size: 0;
    outline: none;
    padding: 0;
  }

  .spreadsheet-canvas {
    --spreadsheet-canvas-resize: vertical;

    block-size: 400px;
    display: block;
    inline-size: 100%;
    min-block-size: 200px;
    overflow: hidden;
    resize: var(--spreadsheet-canvas-resize);

    &.spreadsheet-canvas--readonly { --spreadsheet-canvas-resize: none; }
  }
}