/* Search */

.tocSearch {
  margin-bottom: var(--layout-spacing);
  display: grid;
  grid-template-areas: "label label"
                       "input button";
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}

.tocSearchLabel {
  grid-area: label;
  margin-bottom: calc(var(--layout-spacing) / 2);
}

.tocSearchInput {
  grid-area: input;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: var(--layout-radius);
  border: 2px solid var(--theme-subdue);
  padding: calc(var(--icon-size, 24px) * (1/4)) calc(var(--layout-spacing) / 2);
}

.tocSearchInput::-webkit-search-cancel-button,
.tocSearchInput::-webkit-search-decoration {
  -webkit-appearance: none;
}

.tocSearchInput[data-focus-visible] {
  outline: 2px solid var(--theme-focus);
}

.tocSearchIcon,
.tocClearButton {
  grid-area: button;
  margin-inline-start: calc(var(--icon-size, 24px) * -1.25);
  height: 100%;
  display: flex;
  align-items: center;
}

.tocSearchIcon svg {
  fill: var(--theme-subdue);
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}

.tocClearButton svg {
  fill: var(--theme-text);
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}

.tocSearchIcon[hidden],
.tocClearButton[data-disabled]  {
  display: none;
}

.tocTree {
  background: var(--theme-background);
  color: var(--theme-text);
  outline: none;
  width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

/* React Aria is providing a --tree-item-level as items are not nested */
.tocTreeItem {
  display: flex;
  padding: calc(var(--layout-spacing) / 2);
  padding-inline-start: calc(((var(--tree-item-level) - 1) * var(--layout-spacing)) + (var(--layout-spacing) / 2));
  border-radius: var(--layout-radius);
  border: 2px solid transparent;
  box-sizing: border-box;
}

.tocTree:has(.tocTreeItemButton) .tocTreeItem {
  padding-inline-start: calc((var(--tree-item-level) * var(--layout-spacing)) + (var(--layout-spacing) / 2));
}

.tocTree .tocTreeItem:has(.tocTreeItemButton) {
  padding-inline-start: calc(((var(--tree-item-level) - 1) * var(--layout-spacing)));
}

.tocTreeItemText {
  display: flex;
  flex: 1 1 auto;
}

.tocTreeItemTextTitle {
  text-wrap: balance;
}

.tocTreeItemTextPosition {
  margin-inline-start: auto;
  padding-inline-start: calc(var(--layout-spacing) / 2);
  color: var(--theme-subdue);
  font-variant-numeric: lining-nums tabular-nums;
}

.tocTreeItemButton {
  align-self: flex-start;
  width: calc(var(--icon-size, 24px) * 5/6);
  height: calc(var(--icon-size, 24px) * 5/6);
  margin-inline-end: calc(var(--layout-spacing) / 2);
  flex-shrink: 0;
}

.tocTreeItem[data-href] {
  cursor: pointer;
}

/* [data-hover] is only updated on tree items that can be expanded ATM… */
.tocTreeItem:hover {
  background-color: var(--theme-hover);
}

.tocTreeItem[data-focus-visible] {
  outline: 2px solid var(--theme-focus);
}

.tocTreeItem[data-disabled] {
  color: var(--theme-disable);
}

.tocTreeItem[data-selected] {
  border: 2px solid var(--theme-subdue);
}

.tocTreeItemButton svg {
  flex: none;
  rotate: 0deg;
  transition: rotate 200ms;
  width: 100%;
  height: 100%;
  fill: var(--theme-text);
}

.tocTreeItem[data-expanded] .tocTreeItemButton svg {
  rotate: 90deg;
}

.empty {
  max-width: 25ch;
  text-align: start;
  text-wrap: balance;
}