/* @settings

name: Cupertino
id: cupertino
settings:
    -
        id: macos-header
        title: On macOS
        type: heading
        level: 1
    -
        id: sidedock-glass-off
        title: Disable Liquid Glass sidebar
        type: class-toggle
    -
        id: sidedock-glass-tint-off
        title: Disable sidebar tinting
        type: class-toggle
    -
        id: windows-header
        title: On Windows
        type: heading
        level: 1
    -
        id: windows-mode-off
        title: Disable Windows mode
        description: Turn off Fluent styling on Windows.
        type: class-toggle
    -
        id: android-header
        title: On Android
        type: heading
        level: 1
    -
        id: material-off
        title: Disable Android mode
        description: Turn off Material styling on Android.
        type: class-toggle
    -
        id: general-header
        title: General
        type: heading
        level: 1
    -
        id: cupertino-desc
        description: Most of the settings are for **turning off** Cupertino customizations. You don't need to change anything if you want to keep all default Cupertino optimizations.
        type: info-text
        markdown: true
    -
        id: active-line-off
        title: Disable active editing line highlight
        type: class-toggle
    -
        id: tabs-autosize-off
        title: Disable auto sizing tabs
        type: class-toggle
    -
        id: block-width-off
        title: Disable block width
        type: class-toggle
    -
        id: center-tabs-off
        title: Disable centered tabs
        type: class-toggle
    -
        id: hide-frontmatter-off
        title: Disable compact properties
        type: class-toggle
    -
        id: clean-link-off
        title: Disable clean link style
        type: class-toggle
    -
        id: full-width-off
        title: Disable full width elements
        type: class-toggle
    -
        id: empty-state-off
        title: Disable new tab styling
        type: class-toggle
    -
        id: desktop-header
        title: Desktop
        type: heading
        level: 1
    -
        id: accented-frame-opacity
        title: Accented window
        description: Higher value might impact contrast.
        type: variable-number-slider
        default: 0
        min: 0
        max: 100
        step: 5
    -
        id: hover-sidedock-off
        title: Disable hover sidebar
        description: Might cause crashes on some systems.
        type: class-toggle
    -
        id: compact-actions-off
        title: Disable compact panel actions
        type: class-toggle
    -
        id: hide-status-off
        title: Disable compact status bar
        type: class-toggle
    -
        id: image-zoom-off
        title: Disable image zoom
        type: class-toggle
*/

body {
  --anim-duration-superfast: 80ms;
  --anim-duration-fast: 160ms;
  --anim-duration-moderate: 320ms;
  --anim-duration-slow: 640ms;
  --anim-motion-cupertino: cubic-bezier(0.32, 0.72, 0, 1.1);
  --anim-motion-cupertino-calm: cubic-bezier(0.32, 0.72, 0, 1);
  --background-modifier-border: var(--divider-color);
  --background-modifier-border-focus: hsla(var(--interactive-accent-hsl), 0.5);
  --background-modifier-message: var(--background-secondary);
  --background-modifier-hover: rgba(var(--mono-rgb-100), 0.05);
  --bold-modifier: 300;
  --blockquote-background-color: var(--background-primary-alt);
  --blockquote-border-color: var(--text-faint);
  --blockquote-border-thickness: 2px;
  --blockquote-color: var(--text-muted);
  --blur-s: blur(4px) saturate(1.5) brightness(1.025);
  --blur-m: blur(8px) saturate(1.5) brightness(1.025);
  --blur-l: blur(16px) saturate(1.5) brightness(1.025);
  --caret-color: var(--text-accent);
  --callout-border-width: var(--border-width);
  --callout-padding: 16px;
  --callout-radius: var(--radius-s);
  --checkbox-border-color: var(--color-base-35);
  --code-border-width: var(--border-width);
  --code-white-space: pre-wrap;
  --code-size: var(--font-smaller);
  --code-background: var(--background-primary-alt);
  --code-normal: var(--text-muted);
  --code-comment: var(--text-faint);
  --code-function: var(--color-orange);
  --code-important: var(--color-orange);
  --code-keyword: var(--color-red);
  --code-property: var(--color-blue);
  --code-punctuation: var(--text-muted);
  --code-string: var(--color-cyan);
  --code-tag: var(--color-red);
  --code-value: var(--color-purple);
  --divider-color-hover: var(--text-faint);
  --dropdown-background-size: var(--icon-s);
  --dropdown-padding: 4px 16px 4px 8px;
  --embed-background: var(--background-secondary);
  --embed-border-start: none;
  --embed-block-shadow-hover: none;
  --embed-padding: 16px;
  --font-text-theme: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --font-interface-theme: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --file-header-border: none;
  --highlight-mix-blend-mode: none !important;
  --hr-color: var(--background-modifier-hover);
  --icon-color: var(--text-normal);
  --icon-color-hover: var(--text-normal);
  --icon-opacity: 1;
  --input-height: 24px;
  --input-radius: var(--radius-s);
  --interactive-hover: var(--interactive-normal) !important;
  --line-height-normal: 1.6;
  --metadata-gap: 0;
  --metadata-padding: 0;
  --metadata-input-height: var(--input-height) !important;
  --metadata-property-radius: var(--radius-m) !important;
  --metadata-property-radius-hover: var(--metadata-property-radius);
  --metadata-property-radius-focus: var(--metadata-property-radius);
  --modal-border-color: var(--divider-color);
  --modal-border-width: 0;
  --nav-item-color: var(--color-base-100);
  --nav-item-padding: 8px 8px 8px 24px;
  --nav-item-background-hover: transparent;
  --prompt-border-color: var(--divider-color);
  --clickable-icon-radius: 100vh;
  --radius-l: 20px;
  --radius-m: 12px;
  --radius-s: 8px;
  --radius-xl: 28px;
  --radius-window: 6px;
  --ribbon-background-collapsed: transparent;
  --ribbon-background: transparent;
  --ribbon-padding: 4px 8px;
  --ribbon-width: 56px;
  --search-icon-size: var(--icon-s);
  --shadow-editor: rgba(0, 0, 0, 0.04) 0px 2px 8px -2px, rgba(0, 0, 0, 0.04) 0px 2px 4px -2px;
  --slider-thumb-border-width: 0;
  --slider-thumb-height: 18px;
  --slider-thumb-width: 28px;
  --slider-thumb-radius: var(--toggle-thumb-radius);
  --slider-track-height: 6px;
  --slider-track-background: var(--background-modifier-border-hover);
  --tab-stacked-header-width: 48px;
  --tab-background-active: var(--background-primary-alt);
  --tab-container-background: transparent;
  --tab-divider-color: transparent;
  --tab-outline-width: 0;
  --tab-radius-active: var(--radius-s);
  --tab-radius: var(--radius-s);
  --table-border-width: var(--border-width);
  --table-column-first-border-width: 0;
  --table-column-last-border-width: 0;
  --table-header-border-width: 0;
  --table-header-weight: var(--font-weight);
  --table-row-last-border-width: 0;
  --table-text-size: var(--font-small);
  --tag-padding-y: 0.35em;
  --tag-size: var(--font-smallest);
  --tag-weight: var(--font-medium);
  --text-selection: var(--background-modifier-hover);
  --titlebar-background-focused: transparent;
  --titlebar-background: transparent;
  --toggle-border-width: 1.5px;
  --toggle-s-border-width: var(--toggle-border-width);
  --toggle-s-thumb-height: var(--toggle-thumb-height);
  --toggle-s-thumb-width: var(--toggle-thumb-width);
  --toggle-s-width: var(--toggle-width);
  --toggle-thumb-height: 13px;
  --toggle-thumb-width: 21px;
  --toggle-width: 36px;
  --view-header-height: var(--header-height) !important;
  // --workspace-background-translucent: rgb(from var(--background-primary) r g b / 75%);
  --workspace-background-translucent: var(--background-secondary);

  --side-padding: 20px;
  @media (max-width: 402px) {
    --side-padding: 16px;
  }

  &.theme-light {
    --background-modifier-cover: rgba(170, 170, 170, 0.6);
    --background-modifier-border-hover: var(--color-base-25);
    --color-base-80: #494949;
    --color-base-90: #363636;
    --color-red-rgb: 255, 59, 48;
    --color-red: #ff3b30;
    --color-orange-rgb: 255, 149, 0;
    --color-orange: #ff9500;
    --color-yellow-rgb: 255, 204, 0;
    --color-yellow: #ffcc00;
    --color-green-rgb: 40, 205, 65;
    --color-green: #28cd41;
    --color-cyan-rgb: 85, 190, 240;
    --color-cyan: #55bef0;
    --color-blue-rgb: 0, 122, 255;
    --color-blue: #007aff;
    --color-purple-rgb: 175, 82, 222;
    --color-purple: #af52de;
    --color-pink-rgb: 255, 45, 85;
    --color-pink: #ff2d55;
    --divider-color: rgba(31, 34, 37, 0.09) !important;
    --menu-background: rgb(from var(--background-secondary) r g b / 75%) !important;
    --modal-background: rgb(from var(--background-primary) r g b / 90%) !important;
    --interactive-normal: var(--color-base-25);
    --input-shadow: inset 0 -0.15px 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 1.5px 0 rgba(0, 0, 0, 0.03), 0 0.3px 0.5px 0 rgba(0, 0, 0, 0.1) !important;

    --code-normal: #383a42;
    --code-comment: #b6b9c5;
    --code-function: #b76b02;
    --code-important: #b76b02;
    --code-keyword: #e45749;
    --code-property: #62afef;
    --code-punctuation: #383a42;
    --code-string: #0d97b3;
    --code-tag: #e45749;
    --code-value: #a626a4;

    --shadow-base: inset 1px 1px 2px rgba(255, 255, 255, 0.5), inset -1px -1px 2px rgba(255, 255, 255, 0.5), inset 0 4px 16px rgba(255, 255, 255, 0.025);
    --shadow-border: 0 0 1px 0 rgba(0, 0, 0, 0.4);

    --shadow-xs: var(--shadow-base), inset 0 -8px 48px rgba(0, 0, 0, 0.02), 0 1px 8px rgba(0, 0, 0, 0.025), 0 4px 48px rgba(0, 0, 0, 0.095);
    --shadow-s: var(--shadow-base), inset 0 0 1px 1px white, var(--shadow-border), 0 8px 15px 0 rgba(0, 0, 0, 0.2);
    --shadow-l: var(--shadow-border), inset 0 0 1px 1px white, 0 18px 60px 0 rgba(0, 0, 0, 0.3);
  }

  &.theme-dark {
    --background-modifier-cover: rgba(0, 0, 0, 0.6);
    --color-base-80: #c0c0c0;
    --color-base-90: #cdcdcd;
    --color-red-rgb: 255, 69, 58;
    --color-red: #ff453a;
    --color-orange-rgb: 255, 159, 10;
    --color-orange: #ff9f0a;
    --color-yellow-rgb: 255, 214, 10;
    --color-yellow: #ffd60a;
    --color-green-rgb: 50, 215, 75;
    --color-green: #32d74b;
    --color-cyan-rgb: 90, 200, 245;
    --color-cyan: #5ac8f5;
    --color-blue-rgb: 10, 132, 255;
    --color-blue: #0a84ff;
    --color-purple-rgb: 191, 90, 242;
    --color-purple: #bf5af2;
    --color-pink-rgb: 255, 55, 95;
    --color-pink: #ff375f;
    --divider-color: rgba(244, 244, 244, 0.12) !important;
    --modal-background: rgb(from var(--background-primary) r g b / 75%) !important;
    --modal-background: rgb(from var(--background-primary) r g b / 90%) !important;
    --interactive-normal: var(--color-base-40);
    --input-shadow: inset 0 0.5px 0px 0px rgba(255, 255, 255, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1) !important;

    --code-normal: #abb2bf;
    --code-comment: #5c6370;
    --code-function: #d19a66;
    --code-important: #d19a66;
    --code-keyword: #e16d76;
    --code-property: #62afef;
    --code-punctuation: #abb2bf;
    --code-string: #58b6c2;
    --code-tag: #e16d76;
    --code-value: #c678de;

    --shadow-base: inset 1px 1.5px 1px -1px rgba(255, 255, 255, 0.2), inset -1px -1.5px 1px -1px rgba(255, 255, 255, 0.15), inset 0 4px 16px rgba(255, 255, 255, 0.025);
    --shadow-border: 0 0 1px 0 rgba(255, 255, 255, 0.3);

    --shadow-xs: inset 0 8px 64px rgba(255, 255, 255, 0.125), var(--shadow-base);
    --shadow-s: var(--shadow-border), 0 0 1px rgba(255, 255, 255, 0.5), 0 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 15px 0 rgba(0, 0, 0, 0.2);
    --shadow-l: var(--shadow-border), 0 0 1px rgba(255, 255, 255, 0.5), 0 0 1px 0 rgba(0, 0, 0, 0.7), 0 18px 60px 0 rgba(0, 0, 0, 0.3);
  }

  &.is-fullscreen {
    --frame-left-space: 0px;

    .show-ribbon {
      --ribbon-width: 64px;
    }
  }

  &:not(.is-mobile) {
    --header-height: 56px;
  }

  &:not(.is-mobile):not(.is-focused) {
    --workspace-background-translucent: var(--background-secondary);

    .workspace-ribbon,
    .mod-sidedock > div,
    .mod-root .workspace-tab-header-container {
      opacity: 0.5;
    }
  }

  &.is-popout-window {
    --workspace-background-translucent: var(--background-secondary);
  }
}

@media (prefers-color-scheme: light) {
  body.theme-dark {
    --workspace-background-translucent: var(--background-secondary);

    .app-container {
      background-color: var(--background-primary);
    }
  }
}
@media (prefers-color-scheme: dark) {
  body.theme-light {
    --workspace-background-translucent: var(--background-secondary);

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

.app-container {
  transition-delay: 0 !important;
}

body:not(.mod-windows:not(.windows-mode-off)):not(.is-android:not(.material-off)) * {
  -electron-corner-smoothing: 60%;
}

body:not(.is-popout-window),
body:not(.is-popout-window) .app-container {
  align-items: center;
}

body:not(.is-mobile) {
  background-color: var(--background-secondary);

  .workspace,
  .workspace-ribbon,
  .workspace-split.mod-root,
  .workspace-split,
  .workspace-tabs .workspace-leaf,
  .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
    background-color: transparent;
  }

  &:not(.is-translucent) .app-container {
    background-color: var(--background-secondary);
  }

  .app-container::before {
    position: fixed;
    inset: 0;
    background-color: hsla(var(--color-accent-hsl), calc(var(--accented-frame-opacity) * 0.005));
    content: "";
  }

  .titlebar {
    background-color: transparent;
    z-index: 1;
  }

  .titlebar .titlebar-button-container.mod-right {
    width: var(--frame-right-space);

    .titlebar-button {
      justify-content: center;
      flex: 1;

      path,
      rect,
      circle {
        visibility: hidden;
      }

      svg {
        -webkit-mask-size: 100% 100%;
        background-color: currentcolor;
        width: auto;
        height: 10px;
      }

      &.mod-minimize svg {
        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' fill='none' viewBox='0 0 12 2'%3e%3cpath fill='black' d='M.598 1.201A.604.604 0 0 1 0 .604.61.61 0 0 1 .598 0h10.804c.324 0 .598.281.598.604a.605.605 0 0 1-.598.597H.598Z'/%3e%3c/svg%3e");
      }
      &.mod-maximize svg {
        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3e%3cpath fill='black' d='M1.77 12C.825 12 0 11.175 0 10.23V1.77C0 .83.828 0 1.77 0h8.46C11.167 0 12 .833 12 1.77v8.46c0 .942-.83 1.77-1.77 1.77H1.77Zm8.431-1.201a.605.605 0 0 0 .598-.598V1.8a.606.606 0 0 0-.599-.6H1.8a.605.605 0 0 0-.6.6v8.4c0 .325.273.598.598.598H10.2Z'/%3e%3c/svg%3e");
      }
      &.mod-close svg {
        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3e%3cpath fill='black' d='m6 6.848-4.975 4.974a.618.618 0 0 1-.856.006.618.618 0 0 1 .006-.855L5.15 5.998.175 1.024c-.226-.227-.24-.628 0-.85a.606.606 0 0 1 .85 0l4.974 4.975L10.974.174a.606.606 0 0 1 .85 0 .606.606 0 0 1 0 .85L6.848 5.998l4.974 4.975a.606.606 0 0 1 0 .85c-.222.239-.623.225-.85 0L6 6.847Z'/%3e%3c/svg%3e");
      }
    }
  }

  .is-maximized .titlebar .titlebar-button-container.mod-right .titlebar-button.mod-maximize svg {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3e%3cpath fill='black' d='M10.799 3.557C10.799 2.27 9.67 1.2 8.396 1.2H2.502a1.808 1.808 0 0 1 1.7-1.2h4.194C10.352 0 12 1.641 12 3.598v4.2c0 .758-.484 1.45-1.201 1.7V3.557ZM1.769 12C.826 12 0 11.175 0 10.23V4.172c0-.941.828-1.77 1.77-1.77h6.058c.945 0 1.77.825 1.77 1.77v6.058c0 .942-.829 1.77-1.77 1.77H1.77Zm6.03-1.201a.61.61 0 0 0 .603-.598v-6a.607.607 0 0 0-.603-.603h-6A.61.61 0 0 0 1.2 4.2v6c0 .325.273.598.598.598h6Z'/%3e%3c/svg%3e");
  }
}

svg.svg-icon {
  fill: none !important ;
}
