.root {
}

.root :global(.pages-hierarchy-table) {
  --pages-tree-shade-rgb: 0 0 0;
  --pages-tree-shade-1: rgb(var(--pages-tree-shade-rgb) / 0.03);
  --pages-tree-shade-2: rgb(var(--pages-tree-shade-rgb) / 0.06);
  --pages-tree-shade-3: rgb(var(--pages-tree-shade-rgb) / 0.08);
  --pages-tree-shade-4: rgb(var(--pages-tree-shade-rgb) / 0.1);
  --pages-tree-shade-5: rgb(var(--pages-tree-shade-rgb) / 0.14);
  --pages-tree-shade-6: rgb(var(--pages-tree-shade-rgb) / 0.16);
  overflow: visible;
  position: relative;
}

.root :global(.pages-hierarchy-insert-row td) {
  block-size: 0;
  border: 0;
  line-height: 0;
  overflow: visible;
  padding: 0;
}

.root :global(.pages-hierarchy-insert-row__target) {
  block-size: 0;
  overflow: visible;
  position: relative;
}

.root :global(.pages-hierarchy-insert-row__target::after) {
  background: transparent;
  block-size: 2px;
  border-radius: 999px;
  content: '';
  inset-block-start: -1px;
  inset-inline: 0.75rem;
  position: absolute;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
  background: rgb(74 84 98 / 0.64);
  box-shadow: 0 0 0 1px rgb(74 84 98 / 0.16);
}

.root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
  background: rgb(190 90 70 / 0.42);
  box-shadow: 0 0 0 1px rgb(190 90 70 / 0.12);
}

.root :global(.pages-hierarchy-table .table) {
  margin-bottom: 0;
  overflow-y: hidden;
}

.root :global(.pages-hierarchy-table .table tbody tr) {
  background: transparent;
  transition: background-color 0.16s ease;
}

.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd)),
.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even)) {
  background: transparent;
}

.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:last-child),
.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:last-child) {
  border-radius: 0;
}

.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort']),
.root :global(.pages-hierarchy-table .table td.cell-_pageTreeOrderSort) {
  inline-size: 2rem;
  max-inline-size: 2rem;
  min-inline-size: 0;
  padding-inline: 0.2rem;
  text-align: center;
  width: 2rem;
}

.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header) {
  justify-content: center;
}

.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button svg) {
  display: none;
}

.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button::before) {
  background-color: currentColor;
  block-size: 12px;
  content: '';
  display: block;
  inline-size: 12px;
  mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.root :global(.pages-hierarchy-order-sort-spacer) {
  display: block;
  inline-size: 1rem;
}

.root :global(.pages-hierarchy-table td[data-page-tree-title-cell='true'] .pages-hierarchy-cell) {
  margin-inline-start: -2rem;
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])) {
  background: var(--pages-tree-shade-1);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])) {
  background: var(--pages-tree-shade-2);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])) {
  background: var(--pages-tree-shade-3);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])) {
  background: var(--pages-tree-shade-4);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])) {
  background: var(--pages-tree-shade-5);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
  background: var(--pages-tree-shade-6);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
  border-radius: var(--style-radius-s);
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:first-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:first-child) {
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
}

.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:last-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:last-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:last-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:last-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:last-child),
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:last-child) {
  border-bottom-right-radius: inherit;
  border-top-right-radius: inherit;
}

.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
  box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
}

.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
  box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.24);
}

.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']) {
  box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.38);
}

.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']) {
  box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.18);
}

.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
  box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table) {
  --pages-tree-shade-rgb: 255 255 255;
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
  background: rgb(232 236 241 / 0.72);
  box-shadow: 0 0 0 1px rgb(232 236 241 / 0.22);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
  background: rgb(255 134 117 / 0.42);
  box-shadow: 0 0 0 1px rgb(255 134 117 / 0.12);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
  box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
  box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.22);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
  box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']:not([data-is-drag-source='true'])) {
  box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.42);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']:not([data-is-drag-source='true'])) {
  box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.24);
}

.root :global(.pages-hierarchy-cell) {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  padding-inline-start: calc(var(--pages-tree-depth, 0) * 1.75rem);
}

.root :global(.pages-hierarchy-cell__drag-handle),
.root :global(.pages-hierarchy-cell__drag-spacer),
.root :global(.pages-hierarchy-cell__toggle),
.root :global(.pages-hierarchy-cell__spacer) {
  align-items: center;
  block-size: 1.5rem;
  display: inline-flex;
  flex: 0 0 1.5rem;
  inline-size: 1.5rem;
  justify-content: center;
}

.root :global(.pages-hierarchy-cell__drag-handle),
.root :global(.pages-hierarchy-cell__toggle) {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--style-radius-s, 4px);
  color: var(--theme-text-dim);
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.root :global(.pages-hierarchy-cell__drag-handle) {
  cursor: grab;
  margin-inline-end: 3px;
  touch-action: none;
}

.root :global(.pages-hierarchy-cell__drag-handle:disabled) {
  cursor: default;
  opacity: 0.45;
}

.root :global(.pages-hierarchy-cell__drag-handle--active) {
  color: var(--theme-text);
}

.root :global(.pages-hierarchy-cell__drag-handle:active:not(:disabled)),
.root :global(.pages-hierarchy-cell__drag-handle--active:not(:disabled)) {
  cursor: grabbing;
}

.root :global(.pages-hierarchy-cell__drag-handle svg) {
  block-size: 0.95rem;
  inline-size: 0.95rem;
}

.root :global(.pages-hierarchy-cell__drag-handle--parent svg) {
  block-size: 0.95rem;
  inline-size: 0.95rem;
}

.root :global(.pages-hierarchy-cell__drag-handle:hover:not(:disabled)),
.root :global(.pages-hierarchy-cell__drag-handle:focus-visible:not(:disabled)),
.root :global(.pages-hierarchy-cell__toggle:hover),
.root :global(.pages-hierarchy-cell__toggle:focus-visible) {
  background: rgb(0 0 0 / 0.05);
  color: var(--theme-text);
}

.root :global(.pages-hierarchy-cell__chevron) {
  block-size: 0.8rem;
  inline-size: 0.8rem;
  transition: transform 0.15s ease;
}

.root :global(.pages-hierarchy-cell__chevron--collapsed) {
  transform: rotate(-90deg);
}

.root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content) {
  align-items: baseline;
  display: inline-flex;
  gap: 0.3rem;
}

.root :global(.pages-hierarchy-cell__home-icon) {
  block-size: 0.84em;
  color: currentColor;
  flex: 0 0 0.84em;
  inline-size: 0.84em;
}

.root :global(.pages-hierarchy-cell__content) {
  flex: 1 1 auto;
  min-width: 0;
}

.root :global(.pages-hierarchy-empty-cell) {
  color: var(--theme-text-dim);
}

.root :global(.pages-hierarchy-drag-overlay) {
  align-items: center;
  background: var(--theme-elevation-0);
  border: 1px solid var(--theme-elevation-200);
  border-radius: var(--style-radius-s, 4px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);
  color: var(--theme-text);
  display: inline-flex;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.95rem;
  font-weight: 500;
  inline-size: max-content;
  margin-inline-start: 2rem;
  padding: 0.65rem 0.85rem;
  pointer-events: none;
  transform: translateY(calc(0.75rem - 50%));
  white-space: nowrap;
}

.root :global(.pages-hierarchy-status-badge) {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  min-height: 1.55rem;
  padding: 0.32rem 0.72rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.root :global(.pages-hierarchy-status-badge--published) {
  background: var(--theme-success-150);
  color: var(--theme-success-800);
}

.root :global(.pages-hierarchy-status-badge--changed) {
  background: var(--theme-warning-150);
  color: var(--theme-warning-800);
}

.root :global(.pages-hierarchy-status-badge--draft) {
  background: var(--theme-elevation-150);
  color: var(--theme-elevation-800);
}

.root :global(.pages-hierarchy-status-badge--unknown) {
  background: var(--theme-elevation-100);
  color: var(--theme-text-dim);
}

.root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
  background: color-mix(in srgb, var(--page-tree-badge-base) 24%, white);
  color: color-mix(in srgb, var(--page-tree-badge-base) 78%, black);
}

.root :global(.pages-hierarchy-status-badge--published[data-custom-color='true']),
.root :global(.pages-hierarchy-status-badge--changed[data-custom-color='true']),
.root :global(.pages-hierarchy-status-badge--draft[data-custom-color='true']) {
  background: var(--page-tree-badge-base);
  color: color-mix(in srgb, var(--page-tree-badge-base) 35%, black);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
  background: color-mix(in srgb, var(--page-tree-badge-base) 32%, black);
  color: color-mix(in srgb, var(--page-tree-badge-base) 64%, white);
}

:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--published[data-custom-color='true']),
:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--changed[data-custom-color='true']),
:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--draft[data-custom-color='true']) {
  background: color-mix(in srgb, var(--page-tree-badge-base) 28%, black);
  background: oklch(from var(--page-tree-badge-base) calc(l * 0.35) calc(c * 1.45) h);
  color: var(--page-tree-badge-base);
}
