body:not(.mobile-stable).is-mobile {
  --radius-s: calc(16px * var(--radius-modifier));
  --radius-m: calc(24px * var(--radius-modifier));
  --radius-l: calc(32px * var(--radius-modifier));
  --radius-xl: calc(40px * var(--radius-modifier));

  --tab-radius: var(--radius-s);
  --tab-curve: var(--tab-radius);

  --safe-area-inset-side: 16px;
  --safe-area-inset-bottom-override: 28px;
  --safe-area-inset-bottom-keyboard: 12px;

  &:is(html[style*="--keyboard-height"]:not([style*="--keyboard-height: 0px"]) body.is-phone:not(.mod-toolbar-open)) {
    --safe-area-inset-bottom-override: var(--safe-area-inset-bottom-keyboard);

    &:not(.mode-switcher-off) .mod-root .workspace-leaf-content .view-actions button:nth-last-child(2),
    .mod-root .workspace-leaf-content[data-type="markdown"] .view-content::before {
      opacity: 0;
    }
  }

  &.mod-toolbar-open {
    --safe-area-inset-bottom-override: var(--safe-area-inset-bottom-keyboard);
  }

  .app-container {
    max-height: calc(100vh - var(--keyboard-height)) !important;
    transition: var(--anim-duration-moderate);
  }

  // Icon color
  &.is-phone .mod-root .view-header > div > .view-action,
  &.is-tablet .mod-root .view-header .view-action,
  .mobile-navbar .mobile-navbar-actions,
  .mobile-toolbar-options-list,
  .workspace-drawer-header-icon,
  .workspace-drawer .nav-header .nav-buttons-container,
  .modal-setting-back-button,
  .modal-close-button,
  .sidebar-toggle-button {
    color: var(--text-normal);
    --icon-color: var(--text-normal);
    --icon-color-hover: var(--icon-color);
  }

  // Side panels
  .workspace-drawer .workspace-drawer-header,
  .workspace-drawer .workspace-leaf-content > .view-content,
  .workspace-drawer .workspace-leaf-content > .node-insert-event {
    padding-top: 0;
  }
  .workspace-drawer .nav-header {
    display: flex;
    position: absolute;
    inset: auto 0 0;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
    border-bottom: none;
    background: transparent;
    padding-bottom: var(--safe-area-inset-bottom-override);
    width: 100%;
    align-items: center;
  }
  .workspace-drawer .nav-buttons-container {
    gap: 0;
    border: var(--border-width) solid var(--background-modifier-border);
    border-radius: 100vh;
    background: var(--background-secondary);
    padding: 4px;
    width: fit-content;
    height: 48px;
  }
  .workspace-drawer .nav-buttons-container .nav-action-button {
    border-radius: 100vh;
    padding: 12px;
    height: auto;

    &.is-active {
      opacity: 1;
      background-color: var(--interactive-accent);
      color: var(--text-on-accent);
    }
  }

  .workspace-drawer .workspace-leaf-content .node-insert-event {
    padding-inline: 20px;
    padding-bottom: calc(var(--safe-area-inset-bottom-override) + 64px);
  }
}

body:not(.mobile-stable).is-phone {
  // Bottom navbar & Toolbar
  --mobile-toolbar-height: 48px;
  --toolbar-option-width: 48px;

  &.mode-switcher-off {
    .mobile-navbar,
    .mobile-toolbar {
      padding-top: var(--safe-area-inset-bottom-override);
      padding-right: var(--safe-area-inset-bottom-override);
      max-width: 100%;
      width: 100%;
    }
  }

  .mobile-navbar,
  .mobile-toolbar {
    transition: var(--anim-duration-moderate) !important;
    position: absolute;
    top: auto;
    bottom: 0;
    border-top: none;
    background: transparent;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: var(--safe-area-inset-bottom-override);
    padding-left: var(--safe-area-inset-bottom-override);
    max-width: calc(100% - 8px - 48px - var(--safe-area-inset-bottom-override));
    overflow: visible;
  }

  .mobile-navbar-actions {
    --icon-size: var(--icon-l);
    border: var(--border-width) solid var(--background-modifier-border);
    border-radius: 100vh;
    background: var(--background-secondary);
    padding-inline: 8px;
    height: 48px;
  }
  .mobile-navbar-action {
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .mobile-navbar-action .clickable-icon {
    padding: 0;
    width: 48px;
    height: 48px;
  }
  &:not(.mode-switcher-off) .mod-root .workspace-leaf-content .view-actions button:nth-last-child(2) {
    transition: var(--anim-duration-moderate);
    right: var(--safe-area-inset-bottom-override);
    bottom: var(--safe-area-inset-bottom-override);
    padding: 12px;
  }

  .mobile-toolbar-spacer {
    display: none;
  }
  .mobile-toolbar {
    bottom: var(--keyboard-height);
  }
  .mobile-toolbar-options-container {
    gap: 8px;

    &.mod-fade::before,
    &.mod-fade::after {
      content: none;
    }
  }
  .mobile-toolbar-options-list {
    border-radius: 100vh;
    background-color: var(--background-secondary);
    border: var(--border-width) solid var(--background-modifier-border);
  }
  .mobile-toolbar-option {
    --icon-size: var(--icon-l);
    color: var(--text-normal);
  }

  // Editor panel
  .mod-root {
    padding-top: 0;

    .view-header-title-container {
      height: auto;
    }
    .view-header {
      background-color: transparent;
      padding-top: var(--safe-area-inset-top);
      height: calc(var(--safe-area-inset-top) + var(--view-header-height));
    }

    // Editor panel: Edge fade
    .workspace-leaf-content[data-type="markdown"] .view-header {
      position: absolute;
      inset: 0 0 auto;
    }
    .workspace-leaf-content[data-type="markdown"] .view-header::before {
      position: absolute;
      top: 0;
      inset-inline: 0;
      z-index: -1;
      mask: linear-gradient(to bottom, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.99) 18.4%, hsla(0, 0%, 0%, 0.963) 33.7%, hsla(0, 0%, 0%, 0.92) 46.4%, hsla(0, 0%, 0%, 0.864) 56.7%, hsla(0, 0%, 0%, 0.796) 64.8%, hsla(0, 0%, 0%, 0.72) 71.2%, hsla(0, 0%, 0%, 0.637) 76.1%, hsla(0, 0%, 0%, 0.55) 79.9%, hsla(0, 0%, 0%, 0.46) 82.8%, hsla(0, 0%, 0%, 0.37) 85.2%, hsla(0, 0%, 0%, 0.283) 87.3%, hsla(0, 0%, 0%, 0.2) 89.6%, hsla(0, 0%, 0%, 0.124) 92.3%, hsla(0, 0%, 0%, 0.056) 95.6%, hsla(0, 0%, 0%, 0) 100%);
      background-color: var(--system-status-background);
      height: calc(var(--safe-area-inset-top) + var(--view-header-height) + 32px);
      pointer-events: none;
      content: "";
    }
    .workspace-leaf-content[data-type="markdown"] .view-content::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      mask: linear-gradient(to top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.987) 14%, hsla(0, 0%, 0%, 0.951) 26.2%, hsla(0, 0%, 0%, 0.896) 36.8%, hsla(0, 0%, 0%, 0.825) 45.9%, hsla(0, 0%, 0%, 0.741) 53.7%, hsla(0, 0%, 0%, 0.648) 60.4%, hsla(0, 0%, 0%, 0.55) 66.2%, hsla(0, 0%, 0%, 0.45) 71.2%, hsla(0, 0%, 0%, 0.352) 75.6%, hsla(0, 0%, 0%, 0.259) 79.6%, hsla(0, 0%, 0%, 0.175) 83.4%, hsla(0, 0%, 0%, 0.104) 87.2%, hsla(0, 0%, 0%, 0.049) 91.1%, hsla(0, 0%, 0%, 0.013) 95.3%, hsla(0, 0%, 0%, 0) 100%);
      background-color: var(--system-status-background);
      height: calc(var(--safe-area-inset-bottom-override) + 64px);
      pointer-events: none;
      content: "";
      transition: var(--anim-duration-moderate);
    }

    .view-header + div:not(.view-content) {
      top: calc(var(--safe-area-inset-top) + var(--view-header-height)) !important;
      inset-inline: 0;
      background-color: transparent;
    }
    .view-header + .view-content .markdown-reading-view > div:first-child:not(.markdown-preview-view),
    .view-header + .view-content .markdown-reading-view > .markdown-preview-view:first-child .markdown-preview-sizer > div:first-child {
      margin-top: calc(var(--safe-area-inset-top) + var(--view-header-height) + 8px);
    }
    .view-header + .view-content .markdown-source-view > div:first-child:not(.cm-editor) {
      padding-top: calc(var(--safe-area-inset-top) + var(--view-header-height) + 16px);
      z-index: 0;
    }
    .view-header + .view-content .cm-editor:first-child > .cm-scroller {
      padding-top: calc(var(--safe-area-inset-top) + var(--view-header-height) + 16px);
      padding-bottom: calc(var(--safe-area-inset-bottom-override) + 64px);
    }
  }
}

body:not(.mobile-stable).is-tablet .workspace-drawer.is-pinned {
  height: auto;
}
