:host {
  --border-right: var(--cell-border-width) solid var(--border-color);
  --border-left: 0;
  --min-width: var(--bp-size-900);
  --min-height: var(--bp-size-900);
  --font-size: var(--bp-text-size-200);
  --justify-content: var(--cell-justify-content, start);
  --padding-block: var(--bp-size-400);
  --padding-inline: var(--bp-size-500);
  --color: var(--bp-text-color-500);
  display: block;
  height: 100%;
  outline: 0 !important;
  position: sticky;
}

:host(:state(alignment-start)) {
  --justify-content: start;
}

:host(:state(alignment-center)) {
  --justify-content: center;
}

:host(:state(alignment-end)) {
  --justify-content: end;
}

slot {
  background: color-mix(in oklab, var(--background), black var(--bp-interaction-offset, 0%));
  justify-content: var(--justify-content);
  border-left: var(--border-left);
  box-shadow: var(--box-shadow);
  border-right: var(--border-right);
  min-width: var(--min-width);
  min-height: var(--min-height);
  font-size: var(--font-size);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  color: var(--color);
  text-align: left;
  display: flex;
  gap: var(--bp-space-sm);
  line-height: 1em;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

:host(:state(highlight)) slot::after {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--bp-interaction-highlight-background);
  content: '';
  pointer-events: none;
}

:host {
  --highlight-border: var(--border-width) solid var(--bp-status-accent-background-100);
}

:host(:state(highlight-block-start)) slot::after {
  border-block-start: var(--highlight-border);
}

:host(:state(highlight-block-end)) slot::after {
  border-block-end: var(--highlight-border);
}

:host(:state(highlight-inline-start)) slot::after {
  border-inline-start: var(--highlight-border);
}

:host(:state(highlight-inline-end)) slot::after {
  border-inline-end: var(--highlight-border);
}
