body.is-mobile {
  --background-modifier-form-field: var(--interactive-normal) !important;
  --border-width: 0.3px;
  --divider-color: rgba(var(--mono-rgb-100), 0.1) !important;
  --divider-width: var(--border-width);
  --canvas-dot-pattern: var(--color-base-20);
  --checkbox-size: var(--icon-m);
  --icon-xs-stroke-width: 2px;
  --icon-s-stroke-width: 1.5px;
  --icon-m-stroke-width: 1.5px;
  --icon-l-stroke-width: 1.5px;
  --icon-xl-stroke-width: 1px;
  --input-height: 44px;
  --input-radius: var(--radius-m);
  --mobile-sidebar-width: 100%;
  --mobile-toolbar-height: auto;
  --modal-background: rgb(from var(--background-secondary) r g b / 75%) !important;
  --modal-radius: var(--radius-xl);
  --nav-item-background-active: var(--color-accent);
  --nav-item-background-selected: var(--color-accent);
  --nav-item-color-active: var(--text-on-accent);
  --nav-item-padding: 16px 20px;
  --header-height: var(--input-height);
  --radius-l: 32px;
  --radius-m: 24px;
  --radius-s: 16px;
  --radius-xl: 40px;
  --slider-thumb-height: 25px;
  --slider-thumb-y: -10px;
  --slider-thumb-width: 38px;
  --tab-switcher-background: transparent;
  --tab-switcher-menubar-background: var(--tab-switcher-background);
  --tab-switcher-preview-background-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  --tab-switcher-preview-radius: var(--radius-m);
  --toggle-border-width: 2px;
  --toggle-thumb-height: 25px;
  --toggle-thumb-width: 38px;
  --toggle-width: 68px;
  --toolbar-option-width: var(--mobile-toolbar-height);
  --modal-header-height: var(--view-header-height);
  --dropdown-padding: 4px 32px 4px 16px;

  padding: 0;

  &.theme-light {
    --interactive-normal: var(--background-primary);
    --shadow-border: 0 0 transparent;
  }
  &.theme-dark {
    --interactive-normal: var(--background-secondary);
  }

  &.is-ios {
    --font-ui-smaller: calc(var(--font-text-size) * 0.8 + 1px);
    --font-ui-small: calc(var(--font-text-size) * 0.937 + 1px);
    --font-ui-medium: calc(var(--font-text-size) + 1px);
    --font-ui-large: calc(var(--font-text-size) * 1.2 + 1px);

    .markdown-preview-view,
    .markdown-source-view {
      font-size: calc(var(--font-text-size) + 1px);
    }
  }
}

body.is-phone {
  --menu-shadow: none;
  --modal-radius: var(--radius-xl) var(--radius-xl) 0 0;

  .workspace > .mod-root {
    padding-top: 0;
  }

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

html[style*="--keyboard-height"]:not([style*="--keyboard-height: 0px"]) body.is-phone {
  &:not(.mod-toolbar-open) .mod-root .workspace-leaf-content[data-type="markdown"] .view-actions button:nth-last-child(2) {
    opacity: 0;
    margin-bottom: var(--side-padding);
  }
  .mod-root .workspace-leaf-content:is([data-type="markdown"], [data-type="graph"], [data-type="canvas"]) .view-content::before {
    height: calc(var(--input-height) + 16px);
  }
}

body.is-tablet {
  --prompt-input-height: 56px;

  .mod-root {
    padding-top: var(--safe-area-inset-top);
  }
}

/********** Mode Switchcer **********/

body.is-phone {
  .mod-root .view-header {
    z-index: 3;
  }
  .mod-root .workspace-leaf-content[data-type="markdown"] .view-actions button:nth-last-child(2) {
    position: fixed;
    right: 28px;
    bottom: 0;
    backdrop-filter: var(--blur-s);
    margin-bottom: var(--safe-area-inset-bottom);
    border-radius: var(--clickable-icon-radius);
    padding: 12px;
    width: auto;
    height: auto;
    box-shadow: var(--shadow-xs) !important;
    transition: var(--anim-duration-moderate) var(--anim-motion-cupertino), opacity var(--anim-duration-moderate) !important;
  }
  &.mod-toolbar-open .mod-root .workspace-leaf-content[data-type="markdown"] .view-actions button:nth-last-child(2) {
    right: var(--side-padding);
    margin-bottom: var(--side-padding);
  }

  .mod-root .workspace-leaf-content[data-mode="source"] .view-actions button:nth-last-child(2) {
    background-color: var(--interactive-accent) !important;
    box-shadow: var(--shadow-xs) !important;
  }
}

/********** Top Bar **********/

body.is-mobile {
  .view-actions {
    padding: 0;
    height: var(--view-header-height);
    gap: 8px;
  }
  .view-action.clickable-icon,
  .workspace-drawer-header-icon {
    --icon-color: var(--text-normal);
    --icon-color-hover: var(--text-normal);
    --icon-color-active: var(--text-normal);
    --icon-color-focus: var(--text-normal);
    color: var(--text-normal);
    width: var(--view-header-height);
    height: var(--view-header-height);
    margin: 0;
    position: relative;
  }
  .view-header-title-container {
    height: var(--view-header-height);
    text-align: center;
    justify-content: center;
    font-weight: var(--font-bold);
  }

  .workspace .mod-root .workspace-leaf .view-header {
    height: fit-content;
  }

  svg.svg-icon.lucide-more-vertical {
    fill: currentColor;
  }
}

body.is-phone {
  &.theme-light .modal.mod-sidebar-layout .modal-header::before {
    background-color: var(--background-secondary);
  }

  .view-action,
  .workspace-drawer-header-icon,
  .modal-setting-back-button,
  .modal-close-button {
    --icon-color: var(--text-normal);
    box-shadow: var(--shadow-xs) !important;
    backdrop-filter: var(--blur-s);
  }

  .mod-root .workspace-leaf-content[data-type="markdown"] .view-header,
  .mod-root .workspace-leaf-content[data-type="graph"] .view-header,
  .mod-root .workspace-leaf-content[data-type="canvas"] .view-header,
  .modal.mod-sidebar-layout .modal-header {
    position: fixed;
    background-color: transparent;
    width: 100%;

    &::before {
      transition: var(--anim-duration-moderate) var(--anim-motion-cupertino);
      position: absolute;
      z-index: -1;
      content: "";
      inset: 0;
      background-color: var(--background-primary);
      pointer-events: none;
      height: calc(100% + 16px);
      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%);
    }
  }

  .mod-root .workspace-leaf-content:is([data-type="markdown"], [data-type="graph"], [data-type="canvas"]) .view-content::before {
    position: absolute;
    z-index: 2;
    content: "";
    inset: auto 0 0;
    background-color: var(--background-primary);
    pointer-events: none;
    height: calc(var(--safe-area-inset-bottom) + var(--input-height) + 16px);
    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%);
  }

  // Content pusher
  .view-content > .markdown-reading-view > div:first-child,
  .view-content > .markdown-source-view > .cm-editor > .cm-scroller,
  .view-content > .markdown-source-view .document-search-container {
    padding-top: calc(var(--safe-area-inset-top) + var(--view-header-height) + 8px) !important;
  }

  .markdown-source-view .document-search-container ~ .cm-editor .cm-scroller {
    padding: var(--file-margins) !important;
  }

  .mod-root {
    .view-header {
      padding: var(--safe-area-inset-top) var(--side-padding) 0;
    }

    .view-header-left,
    .view-actions {
      flex-grow: 0;
    }

    .view-header-title-parent .view-header-breadcrumb {
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-header-title-parent .view-header-breadcrumb-separator,
    .view-header-title-parent .view-header-breadcrumb {
      opacity: 0.5;
      padding: 0;
      color: var(--color-base-100);
    }

    .view-header-title-parent:not(:empty) {
      display: flex;
      align-items: center;
      gap: 4px;
      opacity: 1;
    }
    .view-header-breadcrumb:first-child {
      opacity: 1;
      color: var(--interactive-accent);
    }

    .document-search-container {
      --icon-size: var(--icon-l);
      padding-left: var(--side-padding);
      padding-right: var(--side-padding);
      z-index: 0;
    }
  }

  .workspace-leaf-content:not([data-type="empty"]) .mod-left-split-toggle,
  .modal-setting-back-button-icon {
    svg {
      display: none;
    }

    &::before {
      background-color: var(--icon-color);
      width: var(--icon-m);
      height: var(--icon-m);
      content: "";
      -webkit-mask-position: 50% 50%;
      -webkit-mask-size: 85% 85%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='13' height='17' fill='none' viewBox='0 0 13 17'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='white' d='M0 8.477a.88.88 0 0 0 .273.644l7.745 7.568a.84.84 0 0 0 .634.264c.508 0 .899-.38.899-.889a.917.917 0 0 0-.264-.634l-7.11-6.953 7.11-6.954A.936.936 0 0 0 9.551.89.876.876 0 0 0 8.652 0a.869.869 0 0 0-.634.254L.273 7.832A.864.864 0 0 0 0 8.477Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h12.393v16.963H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    }
  }
}

/********** Pull Action **********/

.pull-action {
  backdrop-filter: var(--blur-s);
  animation: fadeInDown var(--anim-duration-fast);
  box-shadow: var(--shadow-xs);
  background-color: var(--modal-background);
  padding: 12px 24px;
  width: fit-content;
  font-weight: var(--font-bold);
}

/********** Bottom Bar **********/

body.is-mobile {
  .mobile-navbar {
    transition: var(--anim-duration-moderate);
    max-width: calc(100% - 48px - 8px);
    background-color: transparent;
    pointer-events: none;
  }

  .mobile-navbar-actions,
  .workspace-drawer .nav-buttons-container,
  .mobile-toolbar-options-list {
    --icon-size: var(--icon-l);
    --icon-color: var(--text-normal);
    gap: 8px;
    box-shadow: var(--shadow-xs) !important;
    backdrop-filter: var(--blur-s);
    justify-content: flex-start;
    max-width: fit-content;
    border-radius: var(--clickable-icon-radius);
    padding: 0 8px;
    pointer-events: auto;
    overflow: hidden;
    transition: var(--anim-duration-moderate);

    .clickable-icon {
      width: 48px;
      height: 48px;
      padding: 0;
    }
  }
  .mobile-navbar-action,
  .nav-action-button {
    display: flex;
    justify-content: center;
    min-width: 0;
    position: relative;
  }

  .mobile-toolbar-option {
    --icon-size: var(--icon-l);
    --icon-stroke: var(--icon-l-stroke-width);

    padding: 12px;
  }
  .mobile-toolbar-options-container {
    gap: 8px;
  }
  .mobile-toolbar {
    transition: var(--anim-duration-moderate) var(--anim-motion-cupertino);
    background-color: transparent;
    overflow: visible;
    padding: 0 var(--side-padding) var(--side-padding) !important;
  }
  .mobile-toolbar-options-list {
    gap: 4px;
    width: calc(100% - 48px - 8px - 48px - 8px);
    overflow: scroll;
  }

  .mobile-navbar,
  .workspace-drawer .nav-header,
  .mobile-toolbar {
    position: fixed;
    right: 0;
    bottom: max(var(--keyboard-height), 0px);
    left: 0;
    z-index: var(--layer-status-bar);
    border: none;
    padding: 0 28px max(var(--safe-area-inset-bottom), 16px);
  }

  .nav-action-button {
    flex-grow: 0 !important;

    &.is-active {
      background-color: transparent !important;
      color: var(--color-accent) !important;
    }
  }
}

body.is-tablet .workspace-drawer .nav-header {
  padding: 16px;
}

/********** Image Viewer **********/

body.is-mobile {
  .mobile-image-viewer {
    backdrop-filter: var(--blur-l);
    animation: var(--anim-duration-fast) fadeInScale;
    background-color: var(--workspace-background-translucent);
  }
  .mobile-image-viewer img {
    border-radius: 0;
  }
}

/********** Tab Switcher **********/

body.is-phone {
  .mobile-navbar-tabs-action {
    border-width: var(--icon-l-stroke-width);
    border-radius: 30%;
    width: calc(var(--icon-size) - 2px);
    height: calc(var(--icon-size) - 2px);
    font-weight: var(--font-normal);
  }

  .mobile-tab-switcher {
    justify-content: flex-end;
    animation: none !important;
    width: unset;
    height: unset;

    &[style*="opacity: 1"] {
      transition-property: transform !important;
    }
  }

  .mobile-tab-switcher-scroll {
    padding-top: 0;
    height: unset;
    background: linear-gradient(transparent, var(--background-secondary) 25%) !important;
  }
  .mobile-tab-wrapper {
    z-index: 2;
  }
  .mobile-tab-switcher-menubar {
    background-color: var(--background-secondary);
    padding: 0 var(--side-padding) max(var(--safe-area-inset-bottom), 16px);
    border: none;
  }
  .mobile-tab-switcher-menu-button {
    z-index: 2;
    flex: 1;
    height: var(--input-height);
    border-radius: var(--clickable-icon-radius);
    box-shadow: var(--shadow-l);
    justify-content: center;
  }

  .mobile-tab-switcher-menu-spacer .clickable-icon {
    box-shadow: var(--shadow-l);
  }
  .mobile-tab-switcher-menu-spacer:first-child {
    z-index: 2;
  }
  .mobile-tab-switcher-menu-spacer:last-child .clickable-icon {
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);

    &::before {
      position: fixed;
      z-index: 1;
      inset: 0;
      content: "";
    }
  }

  .mobile-tab .mobile-tab-pin,
  .mobile-tab .close-button {
    width: 32px;
    height: 32px;
  }
}

/********** Find and Replace **********/

body.is-tablet {
  .document-search-container {
    position: fixed;
    bottom: 0;
    border: none;
    background-color: transparent;
    padding-bottom: max(var(--safe-area-inset-bottom), 16px);
    width: 100%;

    &::before {
      z-index: -2 !important;
      backdrop-filter: var(--blur-l);
    }
    &::before,
    &::after {
      position: absolute;
      z-index: -1;
      mask: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.013) 4.7%, hsla(0, 0%, 0%, 0.049) 8.9%, hsla(0, 0%, 0%, 0.104) 12.8%, hsla(0, 0%, 0%, 0.175) 16.6%, hsla(0, 0%, 0%, 0.259) 20.4%, hsla(0, 0%, 0%, 0.352) 24.4%, hsla(0, 0%, 0%, 0.45) 28.8%, hsla(0, 0%, 0%, 0.55) 33.8%, hsla(0, 0%, 0%, 0.648) 39.6%, hsla(0, 0%, 0%, 0.741) 46.3%, hsla(0, 0%, 0%, 0.825) 54.1%, hsla(0, 0%, 0%, 0.896) 63.2%, hsla(0, 0%, 0%, 0.951) 73.8%, hsla(0, 0%, 0%, 0.987) 86%, hsl(0, 0%, 0%) 100%);
      inset: -16px 0 0;
      pointer-events: none;
      content: "";
    }

    input {
      background-color: var(--background-modifier-hover);
    }

    .document-search-buttons {
      flex-grow: 0;
    }
  }
}

/********** HDR element **********/

body.is-mobile.is-ios.theme-light {
  &.is-phone .mod-left-split-toggle.clickable-icon::after,
  &.is-phone .mod-root .workspace-leaf-content .view-action::after,
  &.is-phone .workspace-drawer-header-icon.clickable-icon::after,
  &.is-phone .modal-setting-back-button::after,
  &.is-phone .modal-close-button::after,
  &.is-phone .prompt-input-container::after,
  &.is-phone .prompt-input-container .search-input-clear-button::before,
  &.is-phone .mobile-navbar-actions::after,
  &.is-phone .mobile-toolbar-options-list::after,
  &.is-tablet .workspace-drawer::after,
  &.is-tablet .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner::before,
  .workspace-drawer .nav-buttons-container::after {
    position: absolute;
    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: "";
    z-index: 1;
  }

  .prompt-input-container::after {
    margin-right: 56px;
    border-radius: var(--clickable-icon-radius);
  }

  .prompt-input-container::after,
  .search-input-clear-button::before {
    backdrop-filter: brightness(1.2);
  }
}
