/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTION FOUNDATION
   Shared press, selected, and current-item states across input modalities.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {}


:where(
  .header-action-btn,
  .dropdown-item,
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .sp-list-row,
  .outline-action-btn,
  .find-opt-check,
  .microsoft-cloud-list-row,
  .citation-list-item,
  .hcp-swatch,
  .hcp-remove,
  .find-nav-btn,
  .files-manage-action,
  .note-edit-btn,
  .sidebar-drag-handle,
  .citation-ref,
  .ProseMirror a[href]
) {
  --control-selected-bg: var(--interactive-selected-bg);
  --control-selected-border: var(--interactive-selected-border);
  --control-selected-fg: var(--interactive-selected-fg);
  --control-current-bg: var(--interactive-current-bg);
  --control-current-border: var(--interactive-current-border);
}

:where(
  .header-action-btn,
  .dropdown-item,
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .sp-list-row,
  .outline-action-btn,
  .find-opt-check,
  .microsoft-cloud-list-row,
  .citation-list-item,
  .hcp-remove,
  .find-nav-btn,
  .files-manage-action,
  .note-edit-btn,
  .sidebar-drag-handle,
  .citation-ref,
  .ProseMirror a[href]
).is-pressing:not(.is-active):not([aria-pressed='true']):not([aria-selected='true']),
.hcp-swatch.is-pressing:not(.is-active) {
  background: var(--interactive-press-bg);
  color: var(--interactive-press-fg);
  border-color: color-mix(in srgb, var(--interactive-press-bg) 40%, var(--border));
}

.btn--primary.is-pressing {
  filter: brightness(.94);
  transform: scale(var(--interactive-press-scale));
}

.btn--secondary.is-pressing,
.btn--ghost.is-pressing,
.ui-close.is-pressing,
.ui-action-btn.is-pressing:not(.ui-action-btn--primary),
.ui-choice-btn.is-pressing:not(.is-active),
.ui-chip.is-pressing:not(.is-active),
.ui-option-btn.is-pressing:not(.is-active),
.sp-subnav-btn.is-pressing:not(.is-active),
.sp-entity-btn.is-pressing:not(.is-active),
.sp-list-row.is-pressing:not(.is-active),
.find-opt-check.is-pressing:not(:has(input:checked)),
button.microsoft-cloud-list-row.is-pressing,
.outline-action-btn.is-pressing:not(:disabled),
.citation-list-item.is-pressing,
.find-nav-btn.is-pressing:not(.find-nav-btn--primary),
.files-manage-action.is-pressing:not(.files-manage-action--primary):not(.files-manage-action--danger),
.note-edit-btn.is-pressing {
  background: var(--interactive-press-bg);
  color: var(--interactive-press-fg);
}

.btn--danger.is-pressing,
.files-manage-action--danger.is-pressing,
.dropdown-item.is-destructive.is-pressing,
.hcp-remove.is-pressing {
  background: var(--danger-fill-strong);
  color: var(--danger-text);
}

.header-action-btn.is-pressing:not(.is-active) {
  background: var(--interactive-press-bg);
  color: var(--interactive-press-fg);
  transform: scale(var(--interactive-press-scale));
}

.sidebar-drag-handle.is-pressing::before,
.sidebar-drag-handle.is-dragging::before {
  background: var(--accent);
}

.citation-ref.is-pressing,
.ProseMirror a[href].is-pressing {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .18) 82%, transparent);
  text-decoration-thickness: 2px;
}

.dropdown-item.is-active,
.dropdown-item[aria-pressed='true'] {
  background: var(--control-selected-bg);
  color: var(--control-selected-fg);
  font-weight: 600;
}

.ui-choice-btn.is-active,
.ui-choice-btn[aria-pressed='true'],
.ui-choice-btn[aria-selected='true'],
.ui-chip.is-active,
.ui-chip[aria-pressed='true'],
.ui-option-btn.is-active,
.ui-option-btn[aria-pressed='true'],
.ui-option-btn[aria-selected='true'],
.sp-choice-group .ui-choice-btn.is-active,
.sp-choice-group .ui-choice-btn[aria-selected='true'],
.sp-subnav-btn.is-active,
.sp-subnav-btn[aria-selected='true'] {
  background: var(--control-selected-bg);
  color: var(--control-selected-fg);
  border-color: var(--control-selected-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control-selected-border) 68%, transparent);
}

.ui-option-btn.is-active .ui-option-meta,
.ui-option-btn[aria-selected='true'] .ui-option-meta,
.ui-option-btn[aria-pressed='true'] .ui-option-meta {
  color: color-mix(in srgb, var(--control-selected-fg) 68%, transparent);
}

.header-action-btn.is-active,
.header-action-btn[aria-pressed='true'] {
  background: var(--control-selected-bg);
  color: var(--control-selected-fg);
  border-color: var(--control-selected-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control-selected-border) 70%, transparent);
}

.sp-list-row.is-active,
.sp-list-row[aria-selected='true'],
.files-doc-card.is-active,
.navigate-result-btn.is-active,
.workspace-team-card.is-active,
.outline-row.is-active .outline-entry {
  background: var(--control-current-bg);
  border-color: var(--control-current-border);
}

.files-doc-card.is-active .sp-entity-btn-title,
.navigate-result-btn.is-active .navigate-result-index,
.navigate-result-btn.is-active .find-result-match {
  color: var(--control-selected-fg);
}

.navigate-result-btn.is-active .find-result-match {
  background: color-mix(in srgb, var(--control-selected-bg) 82%, transparent);
}

.find-opt-check:has(input:checked),
.find-nav-btn--primary,
.files-manage-action--primary,
.sp-action-btn--primary,
.ui-action-btn--primary {
  --control-selected-bg: var(--accent);
  --control-selected-border: transparent;
  --control-selected-fg: var(--text-on-accent);
}

.sidebar-drag-handle {
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
  appearance: none;
}

.sidebar-drag-handle::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
}

.sidebar-drag-handle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sidebar-drag-handle.is-dragging::before {
  background: var(--accent);
}

@media (max-width: 1024px) {
  .sidebar-drag-handle {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 28px;
    padding-top: 10px;
    cursor: grab;
    touch-action: none;
  }

  .sidebar-drag-handle.is-dragging {
    cursor: grabbing;
  }
}


html.sidebar-drag-active,
html.sidebar-drag-active body {
  user-select: none;
}