:host {
  --bp-layer: 0;
  --min-height: var(--row-height);
  --border-top: 0;
  --border-bottom: 0;
  --box-shadow: none;
  content-visibility: var(--row-content-visibility, auto);
  contain-intrinsic-size: auto var(--min-height);
}

:host([selected]) ::slotted(bp-grid-cell) {
  --bp-interaction-offset: var(--bp-interaction-selected-offset);
}

slot {
  background: color-mix(in oklab, var(--background), black var(--bp-interaction-offset, 0%));
  grid-template-columns: var(--ch-grid);
  box-shadow: var(--box-shadow);
  min-height: var(--min-height);
  border-top: var(--border-top);
  border-bottom: var(--border-bottom);
  display: grid;
}

:host([position='fixed']),
:host([position='sticky']) {
  --border-bottom: 0;
  --box-shadow: 0 var(--border-width) var(--border-width) -1px var(--border-color);
  --row-content-visibility: visible;
  z-index: 99;
  position: sticky;
  top: calc(var(--min-height) + var(--bp-size-100));
}

:host([position='fixed']) ::slotted(bp-grid-cell),
:host([position='sticky']) ::slotted(bp-grid-cell) {
  --bp-interaction-offset: var(--bp-interaction-selected-offset);
}

:host([draggable='true']) {
  -webkit-user-drag: element;
  user-select: none;
}

:host([bp-draggable*='target']) {
  --box-shadow: inset 0 var(--bp-object-border-width-300) 0 calc(var(--bp-size-100) * -1)
    var(--bp-interaction-accent-background);
}
