/* Utility helpers for Blazorponents. */
.bp-portal-host {
  position: relative;
}

.bp-portal-layer {
  position: absolute;
  inset: 0;
  z-index: var(--bp-portal-layer-z, 10);
  pointer-events: none;
}

.bp-portal-layer > * {
  pointer-events: auto;
}

.bp-line-clamp-active {
  display: -webkit-box;
  -webkit-line-clamp: var(--bp-line-clamp, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bp-overflow-text {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.bp-overflow-text-content {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bp-overflow-text-active .bp-overflow-text-content {
  display: -webkit-box;
  -webkit-line-clamp: var(--bp-overflow-text-lines, 1);
  line-clamp: var(--bp-overflow-text-lines, 1);
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(
    var(--bp-overflow-text-lines, 1) * var(--bp-overflow-text-line-height, 1lh)
  );
}

.bp-overflow-text-collapsed .bp-overflow-text-content {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.bp-overflow-text[data-reveal-enabled="true"]:focus-visible,
.bp-overflow-text-hover-card-trigger:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
  border-radius: var(--bp-radius-md, 0.5rem);
}

.bp-overflow-text-hover-card,
.bp-overflow-text-hover-card-trigger {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.bp-overflow-text-tooltip-panel {
  white-space: normal;
  max-width: min(22rem, calc(100vw - 1.5rem));
  border-radius: 0.75rem;
}

.bp-overflow-text-hover-card-panel {
  white-space: normal;
}

.bp-focus-trap:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-copy-to-clipboard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-copy-to-clipboard-icon {
  display: inline-flex;
  align-items: center;
}

.bp-copy-to-clipboard:hover {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-copy-to-clipboard[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-copy-to-clipboard[data-state="copied"] {
  border-color: var(--bp-success);
  color: var(--bp-success);
}

.bp-copy-to-clipboard[data-state="failed"] {
  border-color: var(--bp-danger);
  color: var(--bp-danger);
}

.bp-clipboard-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bp-clipboard-tooltip-bubble {
  position: absolute;
  z-index: 5;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--bp-surface-inverse);
  color: var(--bp-inverse);
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: var(--bp-shadow-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bp-clipboard-tooltip[data-placement="top"] .bp-clipboard-tooltip-bubble {
  bottom: calc(100% + 0.35rem);
  left: 50%;
  transform: translate(-50%, 0.25rem);
}

.bp-clipboard-tooltip[data-placement="bottom"] .bp-clipboard-tooltip-bubble {
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translate(-50%, -0.25rem);
}

.bp-clipboard-tooltip[data-placement="left"] .bp-clipboard-tooltip-bubble {
  right: calc(100% + 0.35rem);
  top: 50%;
  transform: translate(0.25rem, -50%);
}

.bp-clipboard-tooltip[data-placement="right"] .bp-clipboard-tooltip-bubble {
  left: calc(100% + 0.35rem);
  top: 50%;
  transform: translate(-0.25rem, -50%);
}

.bp-clipboard-tooltip[data-hover="true"]:hover .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-focus="true"]:focus-within .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-feedback="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-visible="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-open="true"] .bp-clipboard-tooltip-bubble {
  opacity: 1;
}

.bp-clipboard-tooltip[data-placement="top"][data-hover="true"]:hover .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="top"][data-focus="true"]:focus-within .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="top"][data-feedback="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="top"][data-visible="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="top"][data-open="true"] .bp-clipboard-tooltip-bubble {
  transform: translate(-50%, 0);
}

.bp-clipboard-tooltip[data-placement="bottom"][data-hover="true"]:hover .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="bottom"][data-focus="true"]:focus-within .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="bottom"][data-feedback="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="bottom"][data-visible="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="bottom"][data-open="true"] .bp-clipboard-tooltip-bubble {
  transform: translate(-50%, 0);
}

.bp-clipboard-tooltip[data-placement="left"][data-hover="true"]:hover .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="left"][data-focus="true"]:focus-within .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="left"][data-feedback="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="left"][data-visible="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="left"][data-open="true"] .bp-clipboard-tooltip-bubble {
  transform: translate(0, -50%);
}

.bp-clipboard-tooltip[data-placement="right"][data-hover="true"]:hover .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="right"][data-focus="true"]:focus-within .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="right"][data-feedback="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="right"][data-visible="true"] .bp-clipboard-tooltip-bubble,
.bp-clipboard-tooltip[data-placement="right"][data-open="true"] .bp-clipboard-tooltip-bubble {
  transform: translate(0, -50%);
}

.bp-debounced-input {
  width: 100%;
}

.bp-draggable {
  cursor: grab;
}

.bp-draggable:active {
  cursor: grabbing;
}

.bp-draggable-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  font-weight: 700;
  color: var(--bp-subtle);
  cursor: grab;
}

.bp-draggable-handle:active {
  cursor: grabbing;
}

.bp-draggable[data-drag-enabled="false"] .bp-draggable-handle {
  cursor: not-allowed;
}

.bp-draggable[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.bp-droppable {
  position: relative;
}

.bp-droppable-active {
  outline: 2px dashed var(--bp-accent);
  outline-offset: 2px;
}

.bp-error-boundary {
  border: 1px solid var(--bp-outline-muted);
  border-radius: 0.75rem;
  background: var(--bp-surface);
  padding: 1rem;
}

.bp-error-boundary-body {
  display: grid;
  gap: 0.5rem;
}

.bp-error-boundary-title {
  font-weight: 600;
}

.bp-error-boundary-description {
  margin: 0;
  color: var(--bp-muted);
}

.bp-error-boundary-exception {
  margin: 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--bp-surface-muted);
  color: var(--bp-ink);
  font-size: 0.8rem;
  overflow: auto;
}

.bp-error-boundary-retry {
  align-self: start;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  cursor: pointer;
}

.bp-error-boundary-retry:hover {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-keyboard-shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-shortcut-gap, 0.5rem);
  color: var(--bp-muted);
}

.bp-keyboard-shortcut-hint[data-orientation="vertical"] {
  flex-direction: column;
  align-items: flex-start;
}

.bp-keyboard-shortcut-hint[data-disabled="true"] {
  opacity: 0.6;
}

.bp-shortcut-label {
  font-weight: 600;
}

.bp-shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-shortcut-key-gap, 0.25rem);
}

.bp-keyboard-shortcut-hint[data-orientation="vertical"] .bp-shortcut-keys {
  flex-direction: column;
  align-items: flex-start;
}

.bp-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface-strong);
  color: var(--bp-ink);
  font-size: 0.75rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.bp-shortcut-separator {
  color: var(--bp-subtle);
  font-size: 0.75rem;
}

.bp-shortcut-empty {
  font-size: 0.85rem;
  color: var(--bp-subtle);
}

.bp-lazy-load-placeholder {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--bp-outline-muted);
  background: var(--bp-surface-muted);
  color: var(--bp-subtle);
}

.bp-loading-overlay {
  position: var(--bp-loading-overlay-position, relative);
}

.bp-loading-overlay-no-scroll {
  overflow: hidden;
}

body.bp-loading-overlay-lock {
  overflow: hidden;
}

.bp-loading-overlay-body {
  transition: filter 0.2s ease;
}

.bp-loading-overlay-blur .bp-loading-overlay-body {
  filter: blur(2px);
}

.bp-loading-overlay-scrim {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: var(--bp-loading-overlay-z-index, 1);
}

.bp-loading-overlay-pass-through {
  pointer-events: none;
}

.bp-loading-overlay-dim .bp-loading-overlay-scrim {
  background: var(--bp-backdrop);
}

.bp-loading-overlay-indicator {
  padding: 0.5rem 0.85rem;
  border-radius: 0.75rem;
  background: var(--bp-surface);
  color: var(--bp-ink);
  box-shadow: var(--bp-shadow-1);
}

.bp-resize-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface-muted);
  color: var(--bp-subtle);
  user-select: none;
}

.bp-resize-handle-horizontal {
  width: var(--bp-resize-handle-size, 0.5rem);
  height: 100%;
  cursor: var(--bp-resize-handle-cursor, col-resize);
}

.bp-resize-handle-vertical {
  width: 100%;
  height: var(--bp-resize-handle-size, 0.5rem);
  cursor: var(--bp-resize-handle-cursor, row-resize);
}

.bp-resize-handle-both {
  width: var(--bp-resize-handle-size, 0.75rem);
  height: var(--bp-resize-handle-size, 0.75rem);
  cursor: var(--bp-resize-handle-cursor, nwse-resize);
}

.bp-resize-handle-grip {
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--bp-outline-strong);
}

.bp-resize-handle[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-scroll-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bp-scroll-to-top:hover {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-scroll-to-top[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

.bp-sortable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.bp-sortable-item {
  border: 1px solid var(--bp-outline-muted);
  border-radius: 0.75rem;
  background: var(--bp-surface);
}

.bp-sortable-item.bp-sortable-dragging {
  opacity: 0.6;
}

.bp-sortable-item.bp-sortable-drop-target {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 1px var(--bp-accent) inset;
}

.bp-sortable-dropzone,
.bp-sortable-draggable {
  display: block;
}

.bp-sortable-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.bp-sortable-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  color: var(--bp-subtle);
  font-weight: 700;
  cursor: grab;
}

.bp-sortable-content {
  flex: 1;
}

.bp-sortable-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.bp-sortable-action {
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  font-size: 0.75rem;
  cursor: pointer;
}

.bp-sortable-action[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-sortable-drop-indicator {
  height: 0.2rem;
  margin: 0.35rem 0.75rem 0;
  border-radius: 999px;
  background: var(--bp-accent);
}

.bp-sortable-empty {
  color: var(--bp-subtle);
  padding: 0.5rem;
}