body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  --nav-item-padding: calc(16px * var(--density-modifier)) var(--side-padding);

  --system-status-background: rgb(var(--mono-rgb-0));
  --mobile-sidebar-background: rgb(var(--mono-rgb-0));
  --titlebar-background: transparent;
  --titlebar-background-focused: transparent;
  --background-modifier-form-field: var(--interactive-normal) !important;

  &.theme-light {
    --mobile-sidebar-background: var(--background-secondary);
    --interactive-normal: var(--background-primary);
  }
  &.theme-dark {
    --mobile-sidebar-background: black;
    --interactive-normal: var(--background-secondary);
  }

  .app-container {
    background-color: var(--system-status-background);
  }

  // Liquid Glass
  &.is-phone .prompt-input,
  &.is-phone .prompt-input-container .search-input-clear-button,
  &.is-phone .mod-root .view-header > div > .view-action,
  &.is-phone .mobile-navbar .mobile-navbar-actions,
  &.is-phone .mobile-toolbar-options-list,
  &.is-phone .workspace-drawer-header-icon,
  .workspace-drawer .nav-header .nav-buttons-container,
  .modal-setting-back-button,
  .modal-close-button {
    backdrop-filter: var(--blur-s);
    box-shadow: var(--shadow-xs);
    border: none;
    background-color: transparent;
    color: var(--text-normal);
    transition: var(--anim-duration-moderate);

    @starting-style {
      opacity: 0;
      filter: var(--blur-s);
    }
  }

  // Editor panel
  .markdown-reading-view,
  .markdown-source-view {
    transition: transform var(--anim-duration-slow) var(--anim-motion-baseline);
  }
  .workspace-leaf-content[data-mode="source"] .markdown-reading-view {
    transform: scale(0.99);
  }
  .workspace-leaf-content[data-mode="preview"] .markdown-source-view {
    transform: scale(0.99);
  }

  // Side panels
  .workspace-drawer .workspace-drawer-header,
  .workspace-drawer .workspace-leaf-content > .view-content,
  .workspace-drawer .workspace-leaf-content > .node-insert-event {
    padding-inline: var(--safe-area-inset-side);
  }

  .workspace-drawer .workspace-drawer-header-left {
    margin-left: 8px;
  }

  .workspace-drawer .workspace-drawer-active-tab-header {
    margin: 0 var(--safe-area-inset-side) 8px;
    border-radius: 100vh;
    background-color: var(--background-primary);
    padding-right: 8px;
    padding-left: 16px;
    width: fit-content;
  }

  .workspace-leaf-content:not([data-type="empty"]) .mod-left-split-toggle,
  .modal-setting-back-button-icon {
    svg.svg-icon {
      --icon-size: var(--icon-l);
      background-color: currentColor;
      content: "";
      -webkit-mask-position: 25% 50%;
      -webkit-mask-size: 80% 80%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='21' fill='none' viewBox='0 0 12 21'%3e%3cpath fill='white' d='M0 10.372c0 .397.141.732.459 1.046l9.137 8.934c.256.266.575.395.953.395a1.35 1.35 0 0 0 1.372-1.354c0-.382-.163-.718-.422-.983l-8.24-8.04 8.24-8.036c.261-.266.422-.61.422-.98A1.349 1.349 0 0 0 10.549 0c-.38 0-.697.129-.953.385L.459 9.327A1.397 1.397 0 0 0 0 10.372Z'/%3e%3c/svg%3e");
    }
  }

  // File explorer
  .nav-files-container > div {
    border-radius: var(--radius-m);
    background-color: var(--background-primary);

    > .tree-item:nth-child(2) > .tree-item-self {
      border-top-left-radius: var(--radius-m);
      border-top-right-radius: var(--radius-m);
    }
    > .tree-item:last-child > .tree-item-self {
      border-bottom-left-radius: var(--radius-m);
      border-bottom-right-radius: var(--radius-m);
    }

    .tree-item {
      position: relative;
    }
    .tree-item .tree-item-self {
      padding-inline-end: var(--side-padding);
      margin-bottom: 0;
      border-radius: 0;
    }
    .tree-item .tree-item-self .tree-item-icon {
      position: relative;
      order: 1;
      margin-inline-start: unset;
    }
    .tree-item .tree-item-inner {
      flex: 1;
    }

    .tree-item:not(.nav-files-container > div > div:nth-child(2)):not(:last-child:only-child):before {
      position: absolute;
      inset: calc(-1 * (var(--border-width) / 2)) var(--side-padding) auto;
      background: var(--background-modifier-border);
      height: var(--border-width);
      content: "";
    }
  }

  // HDR element
  &.is-ios.theme-light {
    &.is-phone .prompt-input-container::after,
    &.is-phone .prompt-input-container .search-input-clear-button::before,
    &.is-tablet .menu::after,
    &.is-tablet .workspace-drawer:not(.is-pinned)::after,
    .mod-root .view-header > div > .view-action::after,
    .workspace-drawer-header-icon::after,
    .workspace-drawer .nav-buttons-container::after,
    .mobile-navbar-actions::after,
    .mobile-toolbar-options-list::after,
    .modal-setting-back-button::after,
    .modal-close-button::after,
    .notice::after {
      position: absolute;
      z-index: 1;
      backdrop-filter: brightness(1.5);
      mask: linear-gradient(white, white) padding-box, linear-gradient(white, white) border-box;
      mask-composite: exclude, add;
      filter: blur(1px);
      inset: 0;
      border: 1px solid transparent;
      border-radius: inherit;
      background: linear-gradient(to bottom left, white, transparent, white) border-box no-repeat;
      pointer-events: none;
      content: "";
    }

    &.is-phone .prompt-input-container::after {
      height: auto;
      border-radius: 100vh;
      margin-right: 56px;
    }
  }

  // Bases: Cards padding fix
  .bases-cards-item {
    padding: var(--side-padding);
  }
  .bases-cards-line,
  .bases-cards-label {
    padding: 0;
  }
}

body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-phone {
  --system-status-background: rgb(var(--mono-rgb-0));

  // Editor panel
  .mod-root {
    .view-header-left,
    .view-actions {
      flex: 0;
      gap: 8px;
    }

    .view-header {
      padding-inline: var(--safe-area-inset-side);
    }
    .view-header-title-container {
      margin-left: 4px;
      flex-direction: column;
      align-items: flex-start;
    }
    .view-header-title-parent {
      font-size: var(--font-ui-smaller);
    }
    .view-header-title {
      font-weight: var(--font-medium);
    }
    .view-header-breadcrumb {
      padding: 0;
    }
    .view-header-breadcrumb-separator {
      padding: 0 4px;

      &:last-child {
        display: none;
      }
    }

    .view-content {
      background-color: var(--system-status-background);
    }
  }

  // Pull action
  &:not(.accented-interface) .pull-action.mod-activated {
    background-color: var(--text-normal);
  }
  .pull-action:not(.mod-activated) {
    background-color: var(--modal-background);
  }
  .pull-action {
    backdrop-filter: var(--blur-s);
    box-shadow: var(--shadow-xs);
    width: fit-content;
    font-weight: var(--font-bold);
  }
}

body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-tablet {
  --border-width: 0.5pt;
  --nav-item-weight-active: normal;

  .workspace-drawer.is-pinned {
    z-index: 4;
  }
}
