/* ========================================================================== */
/* Fonts
/* ========================================================================== */
/* Inter: https://rsms.me/inter/ */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("themeable/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("themeable/fonts/InterVariable-Italic.woff2") format("woff2");
}


/* ========================================================================== */
/* App
/* ========================================================================== */
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
}

.mac-os {
    ::-webkit-scrollbar {
      max-width: var(--scrollbar-width);
      max-height: var(--scrollbar-width);
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 100vw;
    }
}

/* Tabs */
body:not([class*="seamless"]) :is(#typora-sidebar, content) {
    border-top: 1px solid var(--border-color);
}

/* Blink Effect (ex: rename file) */
.blink-area {
  -webkit-animation: none;
          animation: none;
}

/* Buttons */
.btn-primary,
.btn-primary:hover {
    background: var(--color-primary);
    color: var(--color-primary-content);
}

.btn-primary:hover {
    filter: contrast(1.2);
}

/* Context Menus */
.context-menu,
.dropdown-menu,
:is(.context-menu, .dropdown-menu) > li > a {
    color: var(--menu-color);
}

.context-menu,
.dropdown-menu {
    border: var(--menu-border-width) solid var(--border-color);
    background: var(--menu-background);
    font-size: var(--font-size-ui);
}

:is(.context-menu, .dropdown-menu) .ty-menu-shortcut {
    font-family: var(--font-family-ui);
}

.context-menu .divider {
    border-top: 1px solid var(--border-color);
    opacity: 1;
}

/* Form Controls */
.form-control:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* Tooltips */
.code-tooltip-content * {
    color: unset;
}

#ty-tooltip {
    border: 0;
    background: var(--tooltip-background);
    color: var(--tooltip-text-color);
}

/* Auto-suggest (ex: code fence language selection) */
#ty-auto-suggest {
    border-radius: var(--border-radius);
    font-size: var(--font-size-s);
    box-shadow: none;
    filter: var(--drop-shadow);
}

/* Search Hits */
.md-search-hit,
.md-search-hit.md-search-select,
.md-search-select,
body :is(#write, #typora-source) .cm-search-hit,
.ty-file-search-match-text,
.ty-outline-hit[class] {
    background-color: unset !important;
    background: var(--search-match-background) !important;
    color: var(--search-match-color) !important;
}

.md-search-hit,
.md-search-hit.md-search-select,
.md-search-select,
body :is(#write, #typora-source) .cm-search-hit {
    border-radius: var(--border-radius-xs);
    box-shadow: 0 0 0 2px var(--search-match-border-color);
}

.ty-file-search-match-text,
.ty-outline-hit[class] {
    padding-right: 1px;
    padding-left: 1px;
    border: 2px solid var(--search-match-border-color);
    border-radius: var(--border-radius-s);
    font-weight: var(--font-weight);
}


/* ========================================================================== */
/* Content Area
/* ========================================================================== */
#write {
    max-width: var(--max-width);
    color: var(--text-color);
    font-family: var(--font-family);
}

#write > :first-child {
    margin-top: 0;
}

#write > :last-child {
    margin-bottom: 0;
}

/* ========================================================================== */
/* Footer
/* ========================================================================== */
footer.ty-footer {
    border-color: var(--mono-200);
}

.typora-sourceview-on #toggle-sourceview-btn {
    background: none;
    opacity: 1;
}

.footer-item:hover,
.typora-sourceview-on #toggle-sourceview-btn:hover {
    background: var(--sidebar-hover-background);
    color: var(--sidebar-hover-color);
}