:host {
  --bp-layer: 0;
  --min-height: var(--column-height, var(--bp-interaction-touch-target));
  --min-width: fit-content;
  --justify-content: start;
  --padding-block: var(--bp-size-400);
  --padding-inline: var(--bp-size-500);
  --font-size: var(--bp-text-size-200);
  --color: var(--bp-text-color-500);
  top: 0;
  z-index: 998;
  position: sticky;
  min-height: var(--min-height);
  min-width: var(--min-width);
  display: flex;
  align-items: center;
  outline: 0 !important;
}

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

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

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

[part='internal'] {
  background: var(--background);
  min-height: var(--min-height);
  justify-content: var(--justify-content);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  font-size: var(--font-size);
  color: var(--color);
  border-bottom: var(--border-width) solid var(--border-color);
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  line-height: 1em;
  margin: 0;
  display: flex;
  gap: var(--bp-size-sm);
  align-items: center;
  height: 100%;
  width: 100%;
  position: sticky !important;
}

:host([position='fixed']),
:host([position='sticky']) {
  z-index: 999;
}

[part='internal']::after {
  background: var(--border-color);
  width: var(--border-width);
  right: 0;
  height: 50%;
  position: absolute;
  content: '';
  display: none;
}

[focused] + [part='internal']::after {
  background: var(--bp-interaction-accent-background);
  height: 100vh;
  right: 0;
}

.border {
  position: absolute;
  right: 0;
  top: var(--bp-size-400);
  bottom: var(--bp-size-400);
  width: var(--border-width);
  background: var(--border-color);
}

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

::slotted(bp-button-handle) {
  --width: var(--bp-size-700);
  --height: var(--bp-size-700);
}

.line {
  top: var(--min-height);
  background: var(--bp-interaction-accent-background);
  width: var(--border-width);
  bottom: 0;
  right: 0;
  height: 100vh;
  position: absolute;
  display: none;
}

:host([bp-crane*='target']) .line {
  right: initial;
  left: 0;
  display: block;
}

:host(:state(resizing)) .line {
  display: block;
}

:host(:state(hover)) {
  --interaction-offset: var(--bp-interaction-hover-offset);
}

::slotted(bp-button-sort) {
  position: absolute;
  right: 8px;
  --icon-height: 14px;
  outline: none !important;
  --bp-interaction-outline-webkit: none !important;
  --bp-interaction-outline-offset: none !important;
}

::slotted(bp-button-resize) {
  position: absolute;
  right: 0;
  --height: 32px;
  --background: var(--border-color);
  --width: var(--border-width);
}

:host(:state(ch-last)) .border,
:host(:state(ch-last)) ::slotted(bp-button-resize) {
  display: none;
}

::slotted([bp-layout~='inline:end']) {
  margin-left: auto !important;
}
