body:is(.layout-cupertino, .layout-macos):not(.is-mobile),
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-mobile {
  --inline-title-margin-bottom: 0.5em;
  --p-spacing: 1rem;
  --line-height-normal: 1.6;

  --clickable-icon-radius: 100vh;

  --icon-opacity: 1;
  --icon-color: rgb(var(--mono-rgb-100));
  --text-normal: rgb(var(--mono-rgb-100));
  --nav-item-color: rgb(var(--mono-rgb-100));

  // Editor panel
  .markdown-reading-view,
  .markdown-source-view {
    font-feature-settings: "ss01" 1, "ss07" 1, "cv07" 1;
  }
  .mod-root .workspace-leaf-content[data-mode="source"] .view-header .view-actions button:nth-last-child(2) {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
  }

  // Find & replace fix
  .document-search-container {
    padding: 8px;

    .document-search,
    .document-replace {
      max-width: 100%;
      padding: 0;
    }
    .document-search-buttons,
    .document-replace-buttons {
      flex-grow: 0;
    }
  }

  // Style Settings fix
  .style-settings-heading {
    border-bottom: none;
  }
}

// Editor panel: Edge fade
body:is(.layout-cupertino, .layout-macos):not(.is-mobile),
body:is(.layout-cupertino, .layout-macos):not(.mobile-stable).is-tablet {
  .workspace-leaf-content[data-type="markdown"] .view-header {
    position: absolute;
    inset: 0 0 auto;
    background-color: transparent;
  }
  .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(--background-primary);
    height: 100%;
    pointer-events: none;
    content: "";
  }

  .view-header + div:not(.view-content) {
    top: calc(var(--safe-area-inset-top, 0) + var(--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: var(--header-height);
  }
  .view-header + .view-content .markdown-source-view > div:first-child:not(.cm-editor) {
    padding-top: var(--header-height);
    z-index: 0;
  }
  .view-header + .view-content .cm-editor:first-child > .cm-scroller {
    padding-top: calc(var(--header-height) + var(--file-margins-top));
  }
}

body:is(.layout-cupertino, .layout-macos):not(.is-mobile) {
  --radius-s: calc(8px * var(--radius-modifier));
  --radius-m: calc(12px * var(--radius-modifier));
  --radius-l: calc(20px * var(--radius-modifier));
  --radius-xl: calc(28px * var(--radius-modifier));

  --file-margins-top: 32px;

  * {
    -electron-corner-smoothing: 60%;
  }

  &:is(.tabs-floating, .tabs-floating-center) {
    --tab-action-width: 40px;
  }

  .workspace-split .clickable-icon {
    min-width: 40px;
  }
  .clickable-icon:not([aria-disabled="true"]):hover,
  .clickable-icon.has-active-menu,
  .modal-close-button:hover {
    box-shadow: var(--shadow-xs);
    background-color: var(--background-primary);
  }

  .sidebar-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // Side panels
  &.stacked-nav-off .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container-inner {
    margin-left: 0;
  }
  &.stacked-nav-off .mod-sidedock .workspace-tab-header-container,
  &:not(.stacked-nav-off) .mod-sidedock .workspace-tabs:not(.mod-top-left-space) .workspace-tab-header-container {
    .workspace-tab-header-container-inner {
      -webkit-app-region: no-drag;
      gap: 0px;
      transition: var(--anim-duration-moderate);
      border-radius: var(--clickable-icon-radius);
      padding: 0;
      outline: 2px solid transparent;
      background-clip: content-box;
      height: auto;
    }

    .workspace-tab-header-container-inner:hover {
      background-color: var(--background-modifier-hover);
      outline-color: var(--background-modifier-hover);
    }
    .workspace-tab-header-container-inner:hover .workspace-tab-header.is-active {
      background-color: var(--background-primary);
      box-shadow: var(--shadow-xs);
    }

    .workspace-tab-header {
      border-radius: var(--clickable-icon-radius);
    }
    .workspace-tab-header-inner {
      padding: 8px;
    }
    .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
      background-color: var(--background-modifier-hover);
    }
    .sidebar-toggle-button,
    .workspace-tab-header-inner {
      border-radius: var(--clickable-icon-radius);
      width: 40px;
      height: fit-content;
    }
  }

  .mod-sidedock.mod-left-split .sidebar-toggle-button {
    order: -1;
  }

  &:not(.compact-actions-off) {
    .mod-sidedock .workspace-leaf-content > .nav-header,
    .mod-sidedock .workspace-leaf-content > .view-content > .nav-header {
      .nav-buttons-container {
        border-radius: var(--clickable-icon-radius);
        background-color: var(--background-modifier-hover);
        padding: 2px;
        gap: 0;
        align-self: center;

        .nav-action-button {
          position: relative;
          padding: 8px;
          border-radius: var(--clickable-icon-radius);
        }
        .nav-action-button:hover:not([aria-disabled="true"]) {
          background-color: var(--background-modifier-hover);
          box-shadow: none;
        }
        .nav-action-button.is-active,
        .nav-action-button.is-active:hover {
          background-color: var(--background-modifier-hover);
          color: var(--icon-color);
          box-shadow: var(--shadow-xs);
        }
      }
    }
  }
  .mod-sidedock .workspace-tab-container,
  .mod-sidedock .workspace-leaf,
  .mod-sidedock .workspace-leaf-content {
    contain: size !important;
    overflow: visible;
  }

  // Hover sidedock
  &.hover-sidedock {
    .mod-sidedock.is-sidedock-collapsed:not([style*="overflow: hidden;"]) {
      backdrop-filter: var(--blur-m);
      box-shadow: var(--shadow-xs);
      border-radius: var(--radius-m);
      background-color: var(--modal-background);
      border: var(--border-width) solid var(--background-modifier-border);
      z-index: var(--layer-popover);

      &.mod-left-split {
        margin: 8px 0 8px 8px;
      }
      &.mod-right-split {
        margin: 8px 8px 8px 0;
      }

      &::before {
        content: none;
      }
    }
  }
}

body.layout-cupertino:not(.is-phone) {
  // Editor panel
  &.theme-light .mod-root .workspace-tab-container {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 24px 48px, rgba(0, 0, 0, 0.02) 0px 4px 16px;
  }
  &.theme-dark .mod-root .workspace-tab-container {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 24px 48px, rgba(0, 0, 0, 0.12) 0px 4px 16px;
  }

  .mod-root {
    z-index: 5;

    .workspace-tabs,
    .workspace-tab-container {
      overflow: visible;
    }
    .workspace-tab-container {
      outline: var(--tab-outline-width) solid var(--tab-outline-color);
    }
  }
}

body.layout-cupertino:not(.is-mobile) {
  .workspace:not(.is-left-sidedock-open):not(.is-right-sidedock-open) {
    .mod-root {
      background-color: var(--background-primary);
      padding-bottom: 0;
    }
    .mod-root .workspace-tab-container {
      box-shadow: none;
      outline-color: transparent;
    }
  }
  .workspace.is-left-sidedock-open:not(.is-right-sidedock-open) .mod-root .workspace-tab-container {
    margin-right: 8px;
  }
  &:not(.show-ribbon) .workspace:not(.is-left-sidedock-open).is-right-sidedock-open .mod-root .workspace-tab-container {
    margin-left: 8px;
  }

  // Status bar
  &:not(.status-bar-full) .mod-root {
    padding-bottom: 8px;
  }
}
