.side-dock-settings,
.side-dock-actions {
  gap: 4px;
}

.nav-header {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
}

.nav-files-container > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tree-item-self {
  align-items: center;
  margin-bottom: 0;
}
.search-results-info .dropdown {
  box-shadow: none !important;
  background-color: transparent;
}
.search-results-children .tree-item-inner {
  color: var(--color-base-100);
}

body:not(.is-mobile) {
  .workspace-drop-overlay,
  .workspace-ribbon {
    z-index: 11;
  }

  .workspace .workspace-ribbon,
  .workspace .mod-sidedock > .workspace-leaf-resize-handle {
    border: none;
  }

  .workspace-ribbon.mod-left:before {
    display: none;
  }

  &.show-ribbon .workspace-split.mod-sidedock.mod-left-split .workspace-leaf-content > div:is(.node-insert-event, .view-content, .nav-header) {
    padding-left: 0px;
  }
  .workspace-split.mod-sidedock .workspace-leaf-content > div:is(.node-insert-event, .view-content, .nav-header) {
    padding: 0 12px;

    > div:not(.nav-buttons-container) {
      padding: 0;
    }
  }
  .workspace-split.mod-sidedock .workspace-leaf-content > .nav-header {
    padding-bottom: 8px;
  }

  .search-row {
    margin: 4px var(--side-padding);
  }

  .search-input-container {
    margin: 8px auto;
    width: 100%;
  }

  .mod-sidedock .workspace-tab-container,
  .mod-sidedock .workspace-leaf,
  .mod-sidedock .workspace-leaf-content {
    contain: size !important;
    overflow: visible;
  }
  .workspace-sidedock-vault-profile {
    padding: var(--side-padding);

    .workspace-drawer-vault-switcher {
      height: 100%;
    }
  }
  .workspace-drawer-vault-actions .clickable-icon:first-child {
    display: none;
  }

  /* Panel actions style */
  .nav-buttons-container {
    border-radius: 100vh;
    background-color: var(--background-primary);
    padding: 2px;
    box-shadow: var(--shadow-xs);
    width: fit-content;
    gap: 0;
  }
  .nav-action-button.clickable-icon {
    position: relative;
    padding: 0;
    width: 40px;
  }
  .nav-action-button.is-active,
  .nav-action-button.is-active:hover {
    background-color: var(--interactive-normal);
    color: var(--icon-color);
  }

  /* Hide indent line */
  .tree-item-children {
    margin-bottom: 0;
    border-inline-start: none;
  }

  .workspace-ribbon .side-dock-ribbon-action {
    height: 32px;
  }
}

body.is-mobile {
  &.theme-light .workspace-drawer {
    background-color: var(--background-secondary);
  }
  &.theme-dark .workspace-drawer {
    background-color: var(--background-primary);
  }

  .workspace-drawer-backdrop {
    background-color: transparent;
  }

  .workspace-drawer {
    border-radius: 0;

    .workspace-drawer-inner {
      background-color: transparent;
      gap: 16px;
    }

    .workspace-drawer-header {
      padding: 0 var(--side-padding) 0 calc(var(--side-padding) + 4px);
    }
    .workspace-drawer-header-left {
      gap: 4px;
    }
    .workspace-drawer-header-info {
      color: var(--text-faint);
      margin: 0;
    }

    .workspace-drawer-tab-container {
      overflow: visible;
    }
    .workspace-drawer-active-tab-container {
      background-color: transparent;
      gap: 8px;
    }
    .workspace-drawer-active-tab-header {
      height: var(--input-height);
      margin: 0 var(--side-padding);
      background-color: var(--background-primary);
      padding: 0;
      width: fit-content;

      select {
        width: 100%;
      }
    }
    .workspace-drawer-active-tab-title {
      margin-left: var(--side-padding);
    }
    .workspace-drawer-active-tab-chevron {
      margin-right: 4px;
    }

    .view-content {
      padding: 0 var(--side-padding) 96px;
      overflow: auto;
    }
    &.is-pinned .view-content > div:not(.nav-header):not(:empty) {
      background-color: var(--background-secondary);
    }
    .view-content > div:not(.nav-header):not(:empty) {
      border-radius: var(--input-radius);
      background-color: var(--interactive-normal);

      &:not(.node-insert-event) {
        padding: 8px var(--side-padding);
      }
    }

    .search-row {
      margin: 4px var(--side-padding);
    }
    .search-result-file-title {
      color: var(--color-base-100);
    }
    .search-result-file-matches {
      margin: 0;
      box-shadow: none;
      border: var(--border-width) solid var(--background-modifier-border);
    }
    .search-result-file-match {
      padding: var(--nav-item-padding);
    }
  }

  .nav-files-container {
    padding: 0 var(--side-padding) 8px !important;

    & > div {
      gap: 0;
      margin-bottom: 6rem;
      border-radius: var(--input-radius);
      background-color: var(--interactive-normal);

      > .tree-item {
        &:nth-child(2) > .tree-item-self {
          border-top-right-radius: var(--input-radius);
          border-top-left-radius: var(--input-radius);
        }
        &:last-child > .tree-item-self {
          border-bottom-right-radius: var(--input-radius);
          border-bottom-left-radius: var(--input-radius);
        }
      }
    }
    .tree-item {
      position: relative;
      border-radius: 0;
    }
    .tree-item:not(:last-child)::before {
      position: absolute;
      inset: 0 var(--side-padding);
      border-bottom: var(--border-width) solid var(--background-modifier-border);
      content: "";
    }
    .tree-item-self {
      border-radius: 0;
      padding-inline-end: var(--side-padding);
    }
    .tree-item-self:focus-within {
      color: var(--nav-item-color);
    }
    .tree-item-children {
      position: relative;
      margin-bottom: 0;
      border-inline-start: none;
    }
    .tree-item-children::before {
      position: absolute;
      inset: 0 var(--side-padding) 0 8px;
      border-top: var(--border-width) solid var(--background-modifier-border);
      content: "";
    }
    .tree-item-icon.collapse-icon {
      right: var(--side-padding);
      margin-inline-start: unset;
    }
  }

  .empty-state {
    background-color: transparent !important;
  }
}

body.is-phone .workspace-drawer-header-left {
  margin-top: 16px;
}

body.is-tablet {
  &.theme-light .workspace-drawer {
    outline: var(--border-width) solid white;
  }
  &.theme-dark .workspace-drawer {
    outline: var(--border-width) solid var(--background-modifier-border);
    background-color: var(--background-primary-alt);
  }

  .workspace-drawer {
    padding-top: 16px;
    margin: calc(var(--safe-area-inset-top) + 8px) 0 var(--safe-area-inset-bottom);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    height: -webkit-fill-available;

    &.is-pinned {
      background-color: var(--background-primary);

      .workspace-drawer-active-tab-header,
      .nav-files-container > div {
        background-color: var(--background-secondary);
      }
    }

    &.mod-left {
      margin-left: 8px;
    }
    &.mod-right {
      margin-left: 8px;
    }
  }

  .workspace-drawer-ribbon {
    left: 8px;
  }

  .side-dock-actions {
    padding: 0;
  }
}
