/* 
  Gumroad Theme for Obsidian - V2
  Inspired by Gumroad's brutalist design
*/






















.suggester-additional-info,
.home-tab-suggestion-container {
  border-top-color: var(--gumroad-black);
}



.note-toolbar-ui {
    &[data-ntb-ui-type="suggester"] {
        & .ntb-suggester-header {
          border-bottom: var(--border-width) solid var(--gumroad-black);
        }
    }
  }

.callout[data-callout="note-toolbar"] {
  border: none !important;
}

.cm-embed-block:has(> div > .callout[data-callout="note-toolbar"]:not(.note-toolbar-launchpad)) {
  padding: 10px;
}

body .callout[data-callout="note-toolbar"][data-callout-metadata*="glass"]:not([data-callout-metadata*="card"]), body.is-mobile .callout[data-callout="note-toolbar"][data-callout-metadata*="mgls"]:not([data-callout-metadata*="card"]) {
    & ul {
        & a, & span.external-link {
            
            border-radius: 4px;
            box-shadow: none;
            transition: var(--ntb-anim-duration-moderate);

            padding: 0px;
        }
    }
}


body .callout[data-callout="note-toolbar"], body .workspace .callout[data-callout="note-toolbar"] {
  & .callout-content {
      & li {
          outline: var(--outline-width) solid var(--gumroad-black);

          &:hover {
              
              box-shadow: 0.25em 0.25em 0 var(--gumroad-black);
          }
      }
  }
}

.note-toolbar-setting-item-controls {
    & .setting-item {
      border-left: none;
      border-right: none;
     }
}

.note-toolbar-setting-button,

.note-toolbar-setting-view-cta.note-toolbar-setting-help-view-section .setting-item {
  border: none;
}

.modal:not(.mod-settings) .setting-item:not(.setting-item-heading):first-child {
  border: none;
}

 
.modal:not(.mod-settings) .setting-item:not(.setting-item-heading) {
  border-width: 0px;
}







.is-mobile {
  --touch-radius-xs: 4px;
  --interactive-normal: var(--background-secondary) !important;
  --nav-item-radius: 0px !important;

  
  --touch-radius-xl: 4px !important;
  --touch-radius-l: 4px !important;
  --touch-radius-s: 4px !important;
  --touch-radius-xxs: 4px !important;
  
  

  --input-radius: 4px !important;

  
  .prompt-input-container {
    border-radius: 4px;
  }

  --view-header-action-radius: 2px !important;

  
  
  .is-mobile.is-floating-nav.is-phone .view-header {
    background-color: var(--background-primary);

    
    
  }

  
  .workspace-drawer-tab-select .workspace-tab-header-inner {
    margin: 8px 0;
  }

  
  .workspace-drawer-tab-options:not(.has-swipe) .workspace-tab-header.is-active .workspace-tab-header-inner {
    border: var(--border-width) solid var(--gumroad-black);
  }

  .workspace-leaf-content {
    border-right: none !important;

  }

  .workspace-leaf .workspace-leaf-content {
    border-top: var(--border-width) solid var(--border-color) !important;
  }

  
  .view-header, .nav-header  {
    border-bottom: none !important;
  }

  
  .nn-pane-bottom-toolbar {
    padding: 8px 0 !important;
  }
  
  .nn-search-input {
    border-radius: 4px !important;
  }

  
  .workspace-leaf-content[data-type="sync"] {
    .view-content {
      padding-bottom: 0px !important;
    }
  }

}


.is-phone .mod-raised {
  
}


.is-mobile.is-floating-nav .workspace-drawer .workspace-leaf-content:after {
  background: none;
}

.is-mobile.is-floating-nav .mod-raised {
  backdrop-filter: none;
  border-radius: 4px;
}

.mobile-navbar-action .clickable-icon, .mobile-navbar-action button {
  border-radius: 0px;
}




.mobile-toolbar-options-container {
  background-color: transparent !important;

  
  .mobile-toolbar-options-list-container.mod-raised {
    background-color: transparent !important;
    border-radius: 4px;
  }
}


.is-phone:not(.is-floating-nav) .view-header {
  border-bottom: var(--border-width) solid var(--border-color);
}


.mobile-navbar {
  --navbar-radius: 4px;
}


.is-phone .prompt-input[type=text] {
  border-radius: 4px;
}


.is-mobile .metadata-content {
  transform: none;
  width: 100%;
}




body {
  
  --gumroad-pink: #ff90e8;
  --gumroad-yellow: #f1f333;
  --gumroad-yellow: #f7cc2a;
  --gumroad-black: #000000;
  --gumroad-white: #ffffff;
  --gumroad-gray: #f4f4f0;
  --gumroad-cyan: #23a094;
  --gumroad-blue: #96b4f1;
  --gumroad-green: #6ee05e;

  --gumroad-red: #d24129;

  --gumroad-purple: #c397eb;
  --gumroad-orange: #f57757;


  --transition-duration: .14s;

  --gumroad-accent: var(--color-accent);

  --gumroad-border-radius-s: 4px;
  --gumroad-border-radius-m: 8px;
  --gumroad-border-radius-l: 16px;
  
  --gumroad-border-radius: 0px;

  --bg1: var(--gumroad-white);
  --bg2: var(--gumroad-gray);
  --bg3: var(--gumroad-white);

  --tx1: var(--gumroad-black);
  --tx2: var(--gumroad-black);
  --tx3: #999;

  
  --text-muted: var(--tx1);

  --hl1: var(--gumroad-accent);

  
  --border-color: #555555;

  
  --border-width: 2px;
  --outline-width: 2px;

  
  --interactive-accent-hover: var(--gumroad-accent);

  --tab-outline-color: var(--border-color);
  --tab-outline-width: var(--border-width);

  
  --tab-radius: 0px;
  --window-gap: 10px;
  


  --header-height: 50px;
  --callout-title-weight: 400;

  
  --background-modifier-border: var(--gumroad-black);
  --background-modifier-border-focus: var(--gumroad-accent);

  --dropdown-background-hover: transparent;
  --input-shadow-hover: none;

  --background-primary-alt: var(--background-primary);

  
  --setting-items-border-color: var(--gumroad-black);
  --setting-items-border-width: var(--border-width);

  
  --setting-items-radius: 8px;

  
  
  
  
  
  --setting-items-divider-width: var(--border-width);

  

  --toggle-radius: var(--gumroad-border-radius-s);
  --toggle-thumb-radius: var(--gumroad-border-radius-s);

  --radius-s: 0px;


  --tag-radius: 0px;
  --tag-border-width: var(--border-width);

  --nav-item-weight-active: 700;
  
  
  --prompt-border-color: var(--gumroad-black);

  --checkbox-color: var(--gumroad-black);
  --checkbox-border-color: var(--gumroad-black);
  --checkbox-border-color-hover: var(--gumroad-black);

  
  --checkbox-marker-color: var(--gumroad-black) !important;

  --code-background: var(--background-secondary);

  --pill-radius: var(--gumroad-border-radius-s);

  
  
  
  

  
  --hr-color: var(--gumroad-black);

  --text-on-accent: var(--gumroad-black);
}

.theme-light {
  
  --background-primary: var(--bg1);
  --background-secondary: var(--bg2);
  --background-secondary-alt: var(--bg2);
  

  
  --text-normal: var(--tx1);

  
  
  --text-muted: var(--tx1);

  --text-faint: #999;

  
  --divider-color: var(--gumroad-black);
  --prompt-border: 2px solid var(--gumroad-black);
  --modal-border: 2px solid var(--gumroad-black);

  
  --input-radius: 0px;
  --input-radius: var(--gumroad-border-radius);
  --input-border-width: 1px;
}

.ultra-black .theme-dark {
  --bg1: #030303;
  --bg2: #191919;

  
  --bg2: #121212;
  --gumroad-black: #dadada;
  --gumroad-white: #000000;
  --gumroad-gray: #070707;

  
  
  
  
}

.theme-dark {
  
  
  --bg1: #242423; 
  --bg1: #1e1e1e; 

  
  
  
  --bg2: #0e1113;

  
  --gumroad-black: #dadada;
  --gumroad-black: #eeeeee;

  --gumroad-white: #121212;
  --gumroad-gray: #070709;

  --background-primary: var(--bg1);
  --background-secondary: var(--bg2);
  --background-secondary-alt: var(--bg2);

  --tx3: #999;
  

  
  --divider-color: var(--gumroad-black);
  --prompt-border: 2px solid var(--gumroad-white);
  --modal-border: 2px solid var(--gumroad-white);

}




h1, .markdown-source-view.mod-cm6 .cm-header-1 {
    color: var(--color-accent, var(--gumroad-pink));
}

body {
  --h1-color: var(--color-accent, var(--gumroad-pink));
  --h2-color: var(--gumroad-cyan);
  --h5-color: var(--gumroad-yellow);
  --h3-color: var(--gumroad-orange);
  --h4-color: var(--gumroad-purple);
}


@media (hover: hover) {
    .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):hover {
        box-shadow: none;
    }
}




.view-header,
.nav-header {
  border-bottom: var(--border-width) solid var(--border-color);
  box-shadow: none;

  
  
}






.workspace .mod-root .workspace-tab-header-inner::after {
  inset-inline-end: 0px;
  
  height: 20px;
}

.workspace .mod-root .workspace-tab-header {
  
}

.workspace-split.mod-root .workspace-tab-header:not(.is-active) {
    &:hover {
      
      .workspace-tab-header-inner {
        outline: var(--outline-width) solid var(--gumroad-black);

      }
      
    }
}


.workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header.is-active {
  margin-left: 6px !important;
  margin-right: 6px !important;
  border: 2px solid var(--gumroad-black);
  box-shadow: 3px 3px 0 var(--gumroad-black);
  

  &:active {
    box-shadow: 0px 0px 0 var(--gumroad-black);
    transform: translate(2px, 2px);
  }
}



.vertical-tab-header-group {
  border-bottom: var(--border-width) solid var(--gumroad-black);
  

  &:last-child {
    border-bottom: none;
  }
}

.vertical-tab-nav-item {
  border-radius: 0px;

  &:hover {
      outline: var(--outline-width) solid var(--gumroad-black);
  }
}


.vertical-tab-nav-item.tappable.is-active {
  
  border: var(--border-width) solid var(--gumroad-black);
  box-shadow: 3px 3px 0 var(--gumroad-black);

  margin-bottom: 4px;

  .vertical-tab-nav-item-icon {
    color: var(--gumroad-black);
  }

  
  &:active {
    box-shadow: 0px 0px 0 var(--gumroad-black);
    transform: translate(2px, 2px);
    
  }
  
  &:hover {
      
      outline: none;
      color: var(--gumroad-white);
      background-color: var(--gumroad-accent);
      
    .vertical-tab-nav-item-icon {
      color: var(--gumroad-white);
    }
  }

}



.community-item.tappable {

    &:hover {
      border-color: var(--gumroad-accent);
      border-width: var(--border-width);
      
    }

}

.community-item.tappable.is-selected {
    
    outline: var(--outline-width) solid var(--gumroad-black);
    box-shadow: 3px 3px 0 var(--gumroad-black);

    
    &:active {
      box-shadow: 0px 0px 0 var(--gumroad-black);
      transform: translate(2px, 2px);
    }
}

.workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header.is-active::before, .workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header.is-active::after {
    box-shadow: none;
}

.workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header {
    margin-bottom: 10px;
    border-radius: 0px;
}




.mod-left-split .workspace-tab-header-container-inner, .mod-right-split .workspace-tab-header-container-inner {
  margin: 6px;
}

.mod-left-split .workspace-tab-header, .mod-right-split .workspace-tab-header {
  margin: 1px !important;

}





.workspace {
  background-color: var(--gumroad-gray);
}



.workspace-leaf .workspace-leaf-content {
  
  border-left: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  border-top: none;
  border-bottom: var(--border-width) solid var(--border-color);
  box-shadow: none;
  
  margin: 0px;
  
  overflow: hidden;
  
}


.workspace-split.mod-vertical.mod-root .workspace-tabs:last-child .workspace-leaf-content {
  
}


.workspace-leaf:not(.mod-active) .workspace-leaf-content {
  
  
}


.mod-left-split .workspace-leaf-content,
.mod-right-split .workspace-leaf-content {
  border: none;
  
  border-bottom: var(--border-width) solid var(--gumroad-black);
  
}

.mod-top-right-space .workspace-leaf-content {
  
  
}



::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
  
  
  
}

.workspace-leaf.mod-active ::-webkit-scrollbar,
.workspace-leaf-content:hover ::-webkit-scrollbar {
  display: block;
  
}

::-webkit-scrollbar-thumb {
  background-color: var(--gumroad-black);
  border: 2px solid var(--gumroad-white);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--gumroad-accent);
}




.workspace-ribbon {
  background-color: var(--gumroad-gray);
  
  border-right: var(--border-width) solid var(--gumroad-black);
  border-bottom: var(--border-width) solid var(--gumroad-black);
}

.workspace-ribbon-collapse-btn,
.side-dock-ribbon-action {
  color: var(--gumroad-gray-60) !important;
}

.workspace-ribbon-collapse-btn:hover,
.side-dock-ribbon-action:hover {
  background-color: var(--gumroad-accent);
  color: var(--gumroad-black);
}

.workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed {
  border-right: none;
  
  
}


.workspace-split.mod-left-split {
  background-color: var(--gumroad-gray);
  border-right: none;
  
}

.workspace-split.mod-right-split {
  background-color: var(--gumroad-gray);
  border-left: none;
}


.workspace-leaf-resize-handle {
  
  border: none !important;
  width: 100%;
  
  
}


.nav-file-title,
.nav-folder-title {
  margin-bottom: 2px;
  border: var(--border-width) solid transparent;
}

.nav-file-title:hover,
.nav-folder-title:hover {
  background-color: var(--gumroad-accent);
  border: var(--border-width) solid var(--gumroad-black);
  color: var(--gumroad-black);
}

.nav-file-title.is-active {
  background-color: var(--gumroad-white);
  border: 2px solid var(--gumroad-black);
  box-shadow: 3px 3px 0 var(--gumroad-black);
  font-weight: 800;
  transform: translate(-1px, -1px);
}




h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--gumroad-black);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.edit-block-button {
  opacity: 0.2;
}


.callout,
.markdown-source-view.mod-cm6 .callout {
  --p-spacing: 0.5rem;
  --callout-padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-4);

  background-color: var(--gumroad-white);
  border: 2px solid var(--gumroad-black) !important;
  border-radius: 6px;
  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
  transition-timing-function: ease-out;

  padding: 0;
  margin: var(--size-4-1);
  box-shadow: 0 0 0 var(--gumroad-black);

  margin-bottom: var(--size-4-4);
}


.cm-embed-block  .edit-block-button {
  right: 15px !important;
  top: 10px !important;
}
.cm-callout:hover .edit-block-button {
  right: 5px;
  transition: right 0.2s ease-out;
}

.callout:hover,
.markdown-source-view.mod-cm6 .callout:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0.25em 0.25em 0 var(--gumroad-black);
  
}

.callout-title {
  text-transform: uppercase;
  border-bottom: 2px solid var(--gumroad-black);
  background-color: var(--gumroad-cyan);

  --callout-default: var(--gumroad-black);
  color: white;

  .callout-icon .svg-icon {
    color: white;
  }

  display: flex;
  
  
  

  
  align-items: center;

  padding: 12px 12px;
  
  white-space: nowrap;
  
  word-break: keep-all;

}

.callout-content {
  padding: var(--callout-padding);
}



.callout[data-callout="note"],
.callout[data-callout="gpt"],
.callout[data-callout="quote"],
.callout[data-callout="code"] {
    .callout-title {
    
    background-color: var(--gumroad-blue);
    color: black;
    .callout-icon .svg-icon {
      color: black;
    }
  }
}

.callout[data-callout="bug"],
.callout[data-callout="question"],
.callout[data-callout="info"],
.callout[data-callout="todo"] {
    .callout-title {
    
    background-color: var(--gumroad-yellow);
    color: black;
    .callout-icon .svg-icon {
      color: black;
    }
  }
}

.callout[data-callout="success"] .callout-title ,
.callout[data-callout="tip"]  .callout-title {
  
  background-color: var(--gumroad-green);
  color: black;
  .callout-icon .svg-icon {
    color: black;
  }
}


.callout[data-callout="failure"] .callout-title {
  
  background-color: var(--gumroad-purple);
  color: black;
  .callout-icon .svg-icon {
    color: black;
  }
}

.callout[data-callout="danger"],
.callout[data-callout="important"],
.callout[data-callout="warning"] {
  .callout-title {
    background-color: var(--gumroad-red);
    color: white;
    .callout-icon .svg-icon {
      color: white;
    }
  }
}


.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before, .markdown-source-view.mod-cm6 .cm-blockquote-border:before {
  width: 3px;
  border-width: 4px;
}



code {
  
  border: var(--border-width) solid var(--gumroad-black);
  color: var(--gumroad-black);
  padding: 2px 6px;
  font-family: var(--font-monospace);
  font-weight: bold;
}


.markdown-rendered pre {
  
  

  
  

  border: 2px solid var(--gumroad-black);
  box-shadow: 6px 6px 0 var(--gumroad-accent);
  padding: 15px;
}


a,
.cm-hmd-internal-link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  padding: 0;
  
  font-weight: 600;
}

a:hover,
.cm-hmd-internal-link:hover {
  background: none;
  color: var(--gumroad-accent);
  box-shadow: none;
  border: none;
  transform: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}



.markdown-rendered blockquote {
  border-left: none;
  border-left: 3px solid var(--gumroad-black);
  
  outline: var(--outline-width) solid var(--gumroad-black);
  background-color: var(--gumroad-gray);
  
  padding: var(--size-4-1) var(--size-4-2);
  position: relative;

  
  
  padding-inline-start: 2em;
}

blockquote::before {
  
  content: "“";
  font-size: 4em;
  position: absolute;
  top: -20px;
  left: var(--size-4-1);
  color: var(--gumroad-accent);
  z-index: 0;
}


img {
  border: 2px solid var(--gumroad-black);
  box-shadow: 5px 5px 0 var(--gumroad-accent);
  max-width: 90%;

  margin: 0.25em 0 0.5em;

  transition: transform 0.1s, box-shadow 0.1s;
  transition-timing-function: ease-out;

  
  &:hover {
    box-shadow: 0px 0px 0 var(--gumroad-accent);
    transform: translate(2px, 2px);

    
    
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);

    
    
  }
}


.formula-editor img {
  border: none;
  box-shadow: none;
}


.attachments-gallery img,


img.codeblock-customizer-icon,

img.cm-widgetBuffer,


.callout img {
  box-shadow: none;
  transform: none;
  
  
}

.attachments-gallery .download-attachment-item img, .attachments-gallery .download-attachment-item video {
  margin-top: var(--border-width);
  margin-bottom: var(--border-width);
  
}



body button:not(.clickable-icon) {
  border: var(--border-width) solid var(--gumroad-black);
  border-radius: var(--gumroad-border-radius);

  background-color: var(--gumroad-white);
  color: var(--gumroad-black);
  
  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
  transition-timing-function: ease-out;

  

  &:hover {
    
    transform: translate(-2px, -2px);
    box-shadow: 0.25em 0.25em 0 var(--gumroad-black);
  }

  
  &:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--gumroad-accent);
  }
}


button.mod-cta {
  background-color: var(--gumroad-black);
  color: var(--gumroad-white);
  
  border: var(--border-width) solid black;
  border-radius: 4px;
  
  
}

button.mod-cta:hover {
  
  color: var(--gumroad-black);
  background-color: var(--gumroad-accent);

  transform: translate(-2px, -2px);
  box-shadow: 0.25em 0.25em 0 var(--gumroad-black);
}

button.mod-cta:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--gumroad-accent);
}



select, .combobox-button, .dropdown {
    border: var(--border-width) solid var(--gumroad-black);
    
    box-shadow: none;

    --input-radius: 4px;

    
    &:hover {
      box-shadow: none;
      background-color: none;
    }
}

select, .combobox-button, .dropdown {
  &:active, &:focus, &:focus-visible {
    box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus);
  }
}



strong, .cm-strong {
  font-weight: border;
  text-decoration: underline;
  

  
  
}



.status-bar {
  margin-right: 1em;
  border: var(--border-width) solid var(--gumroad-black);
  margin-bottom: 1em;
  border-radius: 4px;

  &:hover {
    box-shadow: 3px 3px 0 var(--gumroad-black);
    transform: translate(-1px, -1px);
  }
}



.workspace-split.mod-root {
  .metadata-container {
    border: var(--border-width) solid var(--gumroad-black);
    padding: 0px;

    margin-top: 1em;
    margin-bottom: 1em;

    border-radius: var(--gumroad-border-radius);

    &:hover {
      transform: translate(-4px, -2px);
      box-shadow: 5px 5px 0 var(--gumroad-black);
      transition: transform var(--transition-duration), box-shadow var(--transition-duration);
    }
  }

  
  .metadata-properties-heading {
    display: flex;
    width: 100%;
    margin: 0;
    background-color: var(--gumroad-accent);

    padding: 8px 12px;
    text-transform: uppercase;
    border-bottom: var(--border-width) solid var(--gumroad-black);
    
    .metadata-properties-title {
      color: white !important;
    }
  }
      
  
  .metadata-property {
    border-radius: 0px !important;
    border-bottom: var(--border-width) solid var(--gumroad-black);
  }

  @media (hover: hover) {
    .metadata-property:hover {
        --metadata-divider-color: var(--metadata-divider-color-hover);
        
        
        

        
        
        
        
        border-radius: var(--metadata-property-radius-hover);
    }

  }

    .metadata-properties {
      
      --metadata-gap: 0px;
    }

  
  .metadata-add-button  {
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    

    svg.svg-icon {
      fill: var(--gumroad-black);
      stroke: var(--gumroad-accent);

    }
  }

}


.metadata-property.bases-sort-property-container,
.filter-expression.metadata-property {
  border-radius: 0px;
}



.markdown-source-view.mod-cm6 .edit-block-button {
  color: var(--gumroad-black);
}

.theme-dark .markdown-source-view.mod-cm6 .edit-block-button {
  color: var(--gumroad-white);
}

.markdown-embed {
  border: var(--border-width) solid var(--gumroad-black);
  border-radius: var(--gumroad-border-radius);

  
  

  

  
}


.CI__tab-group {
  border-radius: var(--gumroad-border-radius);

}

.CI__tab-list {
  
  padding: 2px;

  border-bottom: none;
}
.setting-group .setting-item:not(.setting-item-heading)::before {
  left: 0px;
  right: 0px;
}




.setting-item-heading {
  
  border: none;
}







.checkbox-container {
    
    outline-width: var(--outline-width);
    outline-color: var(--gumroad-black);

    background-color: var(--gumroad-black);
}

input[type="radio"]:checked, input[type=checkbox]:checked {
  background-color: var(--gumroad-white);

  &:hover {
    background-color: var(--gumroad-accent) !important;
  }
}




.cm-inline-code .cm-neg-heading-text {
  color: var(--gumroad-white);
}




.et-settings-section-body>.setting-item:first-child {
  border-top: var(--border-width) solid var(--setting-items-border-color);
}

.et-settings-nav {
  gap: 8px;
  padding-bottom: 1em;

  border-bottom-width: var(--border-width);
}



.components--Picture img {
  margin: 0;
  
  border-radius: var(--radius-m);

  &:hover {
    box-shadow: none;
    transform: none;
  }
}


.export-image-preview-out {
  --background-modifier-border: #CCC;

}


body {
  
  --nn-theme-file-tag-bg: var(--background-secondary);

}
.nn-split-container.nn-orientation-vertical .nn-resize-handle {
  background-color: var(--gumroad-black) !important;
  height: 2px;
  
}







.callout.cg-note-toolbar-callout,
.markdown-source-view.mod-cm6 .callout.cg-note-toolbar-callout {
  
  border-width: var(--border-width) !important;
}

.cg-note-toolbar-container[data-tbar-position="text"] {
  --cg-nt-tbar-text-shadow: 3px 3px 0 var(--gumroad-black) !important;

    .callout.cg-note-toolbar-callout {
      box-shadow: 3px 3px 0 var(--gumroad-black) !important;
      border: 2px solid var(--gumroad-black) !important;
    }

}



.cg-note-toolbar-container[data-tbar-position="text"] .callout[data-callout="note-toolbar"] {
    & .callout-content {
      
        a, span.external-link {
            outline: 2px solid var(--gumroad-black);
            box-shadow: none;
            color: var(--gumroad-black);

        }
    }
}


.ember-rank-badge {
  background-color: transparent;
  border: var(--border-width) solid var(--gumroad-black);
  color: var(--gumroad-black);
}


.fn-is-active {
  border: 2px solid var(--gumroad-black) !important;
  box-shadow: 3px 3px 0 var(--gumroad-black);
  font-weight: 800;
  transform: translate(-1px, -1px);

  background-color: var(--gumroad-white) !important;
}



.daily-note-navbar {
  margin: 5px;
  gap: 4px;
}

.linter-border-bottom {
    border-top: var(--border-width) solid var(--background-modifier-border);
}

.setting-item-description code {
  
  border: none;
  color: var(--gumroad-orange);
}


.templater_div > .setting-item {
  border-top: var(--border-width) solid var(--gumroad-black) !important;
}

.templater_div {
  border-top: none;
  margin-top: 1em;
}


.reminder-list-item.svelte-15dajvg {
    margin-bottom: 5px;
}




.highlight-decoration {
  mark,
  .cm-highlight {
    border-radius: var(--gumroad-border-radius-s);
    padding: 2px 4px;
    color: var(--gumroad-black);
    border-bottom: 2px solid var(--gumroad-yellow);
  }
  
}


em, .cm-em {
  color: var(--gumroad-cyan) !important;
}


a.tag, .cm-hashtag {
  
  
  border: var(--border-width) solid var(--gumroad-black);
  border-left: none;
  border-right: none;
  
  border-radius: 0px;
  padding: 0px;
  color: var(--gumroad-black);
}

@media (hover: hover) {
  a.tag:hover {
    border: var(--border-width) solid var(--gumroad-black);
    border-left: none;
    border-right: none;

  }
}



.markdown-source-view.mod-cm6 .cm-table-widget th {
  background-color: var(--gumroad-accent);
  color: var(--gumroad-white);
}



.cm-s-obsidian .cm-inline-code.cm-formatting ~ .cm-inline-code:not(.cm-formatting),
.cm-s-obsidian .cm-inline-code:not(.cm-formatting) {
  
  --code-background: var(--gumroad-orange);
  
  
  padding: 0em 0.2em;
  --code-normal: var(--gumroad-white);
}


.markdown-source-view.mod-cm6.is-readable-line-width .cm-line.hr {
  max-width: 300%;
  width: 130% !important;
  margin-left: -15% !important;

  hr {
    border-top-width: var(--border-width);

  }
}


.embedded-backlinks {
  border-top: none;
}







.markdown-rendered pre {
  outline: var(--outline-width) solid var(--gumroad-black);
}

.nav-files-container {
  border-bottom: none;
}



.modal-container.mod-dim .modal {
  --modal-radius: var(--gumroad-border-radius);
  --modal-border-color: var(--gumroad-black);
  border: var(--border-width) solid var(--gumroad-black);
  border-radius: 8px;

  
  

}

.modal-container.mod-dim .modal:not(.mod-settings) {
  box-shadow: 7px 7px 0 var(--gumroad-black);
}



.modal {
  textarea, .multi-select-container, input.metadata-input-text, input[type='date'], input[type='datetime-local'], input[type='text'], input[type='search'], input[type='email'], input[type='password'], input[type='number'] {
    -webkit-app-region: no-drag;
    
    border: var(--border-width) solid var(--gumroad-black);
    border-radius: var(--input-radius);

  }

  textarea:active, .multi-select-container:active, input.metadata-input-text:active, input[type='date']:active, input[type='datetime-local']:active, input[type='text']:active, input[type='search']:active, input[type='email']:active, input[type='password']:active, input[type='number']:active, textarea:focus, .multi-select-container:focus, input.metadata-input-text:focus, input[type='date']:focus, input[type='datetime-local']:focus, input[type='text']:focus, input[type='search']:focus, input[type='email']:focus, input[type='password']:focus, input[type='number']:focus, textarea:focus-visible, .multi-select-container:focus-visible, input.metadata-input-text:focus-visible, input[type='date']:focus-visible, input[type='datetime-local']:focus-visible, input[type='text']:focus-visible, input[type='search']:focus-visible, input[type='email']:focus-visible, input[type='password']:focus-visible, input[type='number']:focus-visible {
      box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus);
  }
}


input.prompt-input:hover, input.prompt-input:focus, input.prompt-input:focus-visible {
    border-bottom: var(--border-width) solid var(--gumroad-black);
}





.prompt {
  border-radius: var(--gumroad-border-radius);
  top: 95px;

  box-shadow: 4px 4px 0 var(--gumroad-accent);
  box-shadow: 7px 7px 0 var(--gumroad-black);

  .prompt-input-container {
    border-bottom: var(--border-width) solid var(--gumroad-black);
  }
}



body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
  border-top-width: 0px;

  border-bottom: var(--border-width) solid var(--gumroad-black);
}


input[type="radio"], input[type=checkbox] {
  border-width: var(--border-width);

  &:hover {
    transform: translate(-1px -1px);
    box-shadow: 2px 2px 0 var(--gumroad-black);
  }
}





.hide-scroll-bar ::-webkit-scrollbar {
  display: none;
}



.hide-scroll-bar .markdown-preview-view, 

.hide-scroll-bar .cm-scroller, 
.hide-scroll-bar .workspace-leaf-content {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}


.cm-formatting.cm-url.external-link {
  display: none;
}


.cm-s-obsidian .cm-hmd-frontmatter.cm-number, .cm-s-obsidian .cm-math.cm-number, .cm-s-obsidian pre.HyperMD-codeblock .cm-number {
    color: var(--gumroad-blue);
}

.cm-s-obsidian .cm-hmd-frontmatter.cm-atom, .cm-s-obsidian .cm-templater-command.cm-atom, .cm-s-obsidian .cm-math.cm-atom, .cm-s-obsidian .HyperMD-codeblock .cm-atom, .markdown-preview-view pre.cm-s-obsidian .cm-atom {
    color: var(--gumroad-cyan);
}

.cm-hmd-frontmatter.cm-string {
    color: var(--gumroad-green);
}




.hr + .cm-line:has(.cm-comment) {
    text-align: center !important;
    padding-top: 0px !important;

    .cm-formatting {
        opacity: 0.0;
    }

    padding-bottom: 0.6em;
    border-bottom: var(--border-width) solid var(--hr-color) !important;

    
    max-width: 300% !important;
    width: 130% !important;
    margin-left: -15% !important;

    opacity: 1.0;

}

.hr + .cm-line.cm-active:has(.cm-comment) {
    .cm-formatting {
        opacity: 0.8;
    }
}


.HyperMD-hr + .cm-comment {
    text-align: center !important;
    border-bottom: var(--border-width) solid var(--hr-color);
}





.hr + .cm-line:has(.cm-em) {
    text-align: center !important;
    padding-top: 0px !important;

    padding-bottom: 0.6em;
    border-bottom: var(--border-width) solid var(--hr-color);

    opacity: 1.0;

    .cm-em {
        opacity: 0.6;
    }
}



.HyperMD-hr + .cm-line:has(.cm-em) {
    text-align: center !important;
    border-bottom: var(--border-width) solid var(--hr-color);
}


.el-hr + .el-p:has(em) {
    text-align: center;
    padding-top: 0px !important;

    p {
        margin-top: 0em;
        opacity: 0.8;
        margin-bottom: 0em;
    }

    margin-top: -1.5em;
    margin-bottom: 0em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--hr-color);

    opacity: 1.0;
}






img.link-favicon {
    box-shadow: none;
    border-radius: 0px;
    border: none;
}

.workspace-tab-header-container, .workspace-ribbon, .workspace-leaf .workspace-leaf-content,


.view-header,

.nav-header,

.workspace-ribbon.mod-left:before,

.workspace-tab-header-container,

.workspace-ribbon,

.workspace-leaf .workspace-leaf-content {
    --border-color: #555;
    border-color: var(--border-color);

}


.cm-s-obsidian .cm-inline-code.cm-formatting ~ .cm-inline-code:not(.cm-formatting), .cm-s-obsidian .cm-inline-code:not(.cm-formatting) {
    --code-normal: var(--gumroad-orange);
    --code-background: var(--background-primary);
}


.cm-embed-block.cm-embed-block:not([data-is-launchpad]).cg-note-toolbar-container:hover, .cm-embed-block.cm-embed-block:not([data-is-launchpad])[data-is-ntb]:hover {
    box-shadow: none;
}


.callout:hover, .markdown-source-view.mod-cm6 .callout.cg-note-toolbar-callout:hover {
    transform: none;
}



.markdown-source-view.mod-cm6 .embed-action.edit-block-button {
    color: var(--embed-action-color);
}


⛔️.markdown-source-view.mod-cm6.is-readable-line-width .cm-line.hr {
    max-width: 5000px;
    width: 5000px !important;
    margin-left: -2000px !important;

    --hr-color: --border-color;
}




.workspace-leaf-content :is(.running-head-metadata-header,.running-head-top-row,.running-head-breadcrumb) .multi-select-pill,
.workspace-leaf-content :is(.running-head-metadata-header,.running-head-top-row,.running-head-breadcrumb) .tag,
body .multi-select-pill.custom-status-icon-pill,

.tag, .cm-hashtag {
    border-radius: 0px;
}





.embed-actions {
    margin-top: 16px;
}

.cm-content .image-embed .image-resize-corner::after, .cm-image-reveal-tooltip .image-embed .image-resize-corner::after {
    
    margin-bottom: 8px;
    margin-right: 4px;
}






.better-links-popover {
    border: var(--border-width) solid var(--gumroad-black);
    border-radius: var(--gumroad-border-radius);
    box-shadow: 4px 4px 0 var(--gumroad-black);
}


.cmdr-adder {
  opacity: 1;
}