body.layout-macos:not(.is-mobile) {
  --nav-collapse-icon-color: rgb(var(--mono-rgb-100));

  &.theme-light {
    --shadow-sidedock: 0 0 16px rgba(0, 0, 0, 0.05), 0 4px 32px rgba(0, 0, 0, 0.05), -32px 0px 0 32px var(--background-primary);
  }
  &.theme-dark {
    --shadow-sidedock: 0 4px 24px rgba(0, 0, 0, 0.25), -32px 0px 0 32px var(--background-primary);
  }

  &.is-translucent .mod-root {
    background-color: var(--background-primary) !important;
  }
  &:not(.is-translucent) .app-container {
    background-color: var(--background-primary);
    .mod-root {
      background-color: transparent;
    }
  }

  &.is-frameless:not(.is-hidden-frameless) {
    .titlebar {
      background-color: var(--background-primary);
    }
    .mod-sidedock.mod-right-split > .workspace-leaf-resize-handle {
      top: 0;
    }
  }

  &:not(.is-focused) {
    --workspace-background-translucent: var(--background-secondary);

    .workspace-ribbon,
    .mod-sidedock > div,
    .mod-root .workspace-tab-header-container {
      opacity: 0.5;
    }
    .mod-sidedock {
      background-color: var(--color-base-20) !important;
      box-shadow: none !important;
    }
  }

  // Menu
  .menu:hover,
  .suggestion-container:hover {
    .menu-item.selected:not(.is-label):not(.is-disabled) {
      background-color: var(--interactive-accent);
      color: var(--text-on-accent);

      .menu-item-icon {
        color: var(--text-on-accent);
      }
    }
  }

  // Ribbon fix
  &.show-ribbon:not(.mod-macos) {
    --ribbon-padding: 8px 0 0 16px;
  }

  &.show-ribbon .mod-sidedock.mod-left-split {
    margin-left: calc(-1 * var(--ribbon-width) + 8px);
    padding-left: calc(var(--ribbon-width) - 8px);
  }

  // Side panels
  &.is-fullscreen .mod-sidedock.mod-left-split {
    border-radius: var(--radius-m);
  }
  &:not(.is-translucent) .mod-sidedock.mod-left-split {
    box-shadow: var(--shadow-sidedock);
  }
  &:not(.is-translucent) .mod-sidedock {
    background-color: color-mix(in srgb, var(--background-primary) 98%, var(--interactive-accent));
  }
  &.theme-light .mod-sidedock.mod-left-split {
    outline: var(--border-width) solid white;
  }
  &.theme-dark .mod-sidedock.mod-left-split {
    outline: var(--border-width) solid var(--background-modifier-border);
  }
  .mod-sidedock.mod-left-split {
    z-index: var(--layer-sidedock);
    border-radius: var(--radius-m);
    display: flex;
    margin: 8px 0 8px 8px;
    height: -webkit-fill-available;
    overflow: hidden;
  }
  &.stacked-nav-off .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container,
  .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container .sidebar-toggle-button {
    min-height: calc(var(--header-height) - 8px);
    max-height: calc(var(--header-height) - 8px);
  }

  .mod-sidedock.mod-right-split > .workspace-leaf-resize-handle {
    border-color: var(--divider-color);
  }
  // Style Settings: Active file fix
  &.nav-item-subtle {
    --nav-item-color: rgb(var(--mono-rgb-100));
    --nav-item-color-active: var(--text-accent);

    &.theme-dark {
      --nav-item-background-active: rgba(0, 0, 0, 0.5);
    }
  }
}

body.layout-macos.is-tablet {
  &.theme-light {
    --shadow-sidedock: 0 0 16px rgba(0, 0, 0, 0.05), 0 4px 32px rgba(0, 0, 0, 0.05), -100vh 0px 0 100vh var(--system-status-background);
  }
  &.theme-dark {
    --shadow-sidedock: 0 4px 24px rgba(0, 0, 0, 0.25), -32px 0px 0 32px var(--system-status-background);
  }
  .workspace {
    background-color: var(--system-status-background);
  }

  // Editor panel
  --tab-background-active: var(--system-status-background);

  .mod-root .view-header::before,
  .mod-root .view-content {
    background-color: var(--system-status-background) !important;
  }

  // Side panels
  .workspace-drawer:not(.is-pinned) {
    box-shadow: var(--shadow-s);
  }
  .workspace-drawer.is-pinned {
    &.mod-left {
      box-shadow: var(--shadow-sidedock);
      margin: calc(var(--safe-area-inset-top) + 8px) 0 8px 8px;
      border-radius: var(--radius-l);
      padding-top: 16px;
      background-color: color-mix(in srgb, var(--background-primary) 98%, var(--interactive-accent));
    }
    &.mod-root {
      background-color: transparent;
    }
  }
}
