body.is-mobile {
  --radius-s: calc(8px * var(--radius-modifier));
  --radius-m: calc(16px * var(--radius-modifier));
  --radius-l: calc(24px * var(--radius-modifier));
  --radius-xl: calc(32px * var(--radius-modifier));
  --mobile-sidebar-width: 100%;
  --view-header-height: var(--header-height);

  --file-margins-block: 8px;
  --file-margins-inline: 24px;

  --mobile-sidebar-background: var(--background-secondary);

  --tab-switcher-menubar-background: var(--background-secondary);
  --tab-switcher-preview-radius: var(--radius-m);

  --icon-opacity-hover: var(--icon-opacity);

  --input-border-width-focus: 0;

  &.theme-dark {
    --color-base-00: #1e1e1e;
    --color-base-10: #242424;
    --color-base-20: #262626;
    --search-result-background: var(--background-primary);
  }

  // Side panels
  .workspace-drawer-inner {
    background-color: transparent;
  }
  .workspace-drawer .nav-header {
    border-bottom: none;
  }

  // Editor panels
  .workspace .mod-root .workspace-tab-header-container .clickable-icon,
  .view-header .clickable-icon,
  .workspace-drawer-header-icon {
    border-radius: 100vh;
    padding: 10px;
    position: relative;
    margin-left: 0;
  }
}

body.is-phone {
  --mobile-sidebar-radius: 0;

  // Side panels
  .workspace-drawer-inner {
    overflow: visible;
  }
  .workspace-drawer-header {
    z-index: 1;
  }

  // Editor panel
  .mod-root {
    transition: var(--anim-duration-moderate) var(--anim-motion-baseline);

    .view-header-title-container {
      opacity: 1;
    }

    .view-actions {
      padding: 0;
    }
  }

  // Mode Switcher
  .mod-root .view-header {
    z-index: 3;
  }
  &:not(.mode-switcher-off) .mod-root .workspace-leaf-content .view-actions button:nth-last-child(2) {
    position: fixed;
    right: 16px;
    bottom: 16px;
    margin-bottom: 0;
    border-radius: 100%;
    padding: 16px;
    width: auto;
    height: auto;
    background-color: var(--background-secondary);
    border: var(--border-width) solid var(--background-modifier-border);
  }

  // Navbar
  .mobile-navbar {
    border-top: var(--border-width) solid var(--background-modifier-border);
    transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
    padding-inline: max(var(--safe-area-inset-right), 24px);
  }

  // Tab switcher
  .mobile-tab-switcher-menubar {
    border-top: none;
  }

  // Bottom bar
  .mobile-navbar-tabs-action {
    font-family: "Inter";
  }
}

body.is-tablet {
  --titlebar-background: var(--background-secondary) !important;
  --titlebar-background-focused: var(--background-secondary) !important;

  .workspace-tab-header {
    padding-bottom: 0 !important;
  }

  .workspace-tab-header,
  .workspace-tab-header-new-tab,
  .workspace-tab-header-tab-list,
  .sidebar-toggle-button,
  .view-header-left,
  .view-actions {
    padding: 4px 0;
  }

  .workspace {
    background-color: var(--mobile-sidebar-background);
  }

  .workspace-drawer.is-pinned,
  .workspace-split.mod-root {
    background-color: transparent;
  }

  .workspace-drawer-active-tab-container {
    background-color: transparent;
  }
  .workspace-drawer.mod-left {
    max-width: var(--mobile-left-sidebar-width, 500px);
  }
  .workspace-drawer.mod-right {
    max-width: var(--mobile-right-sidebar-width, 500px);
  }
  .workspace-drawer.is-pinned.mod-left {
    width: var(--mobile-left-sidebar-width-pinned, 320px);
  }
  .workspace-drawer.is-pinned.mod-right {
    width: var(--mobile-right-sidebar-width-pinned, 320px);
  }
}
