:root {
  --editor-headers-backdrop: var(--headerbar-backdrop-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* As view-bg-color is being used for header bar background a darker tint than
     * headerbar-backdrop-color is desirable as the header backdrop background to prevent the
     * header becoming lighter as it goes into backdrop.
     */
    --editor-headers-backdrop: color-mix(in srgb, var(--headerbar-backdrop-color) 75%, var(--dark-5));
  }
}

#Sections,
box .index-section-title,
box image.index-section,
box #NotesListBox {
  transition-duration: 200ms;
}

#Sections.small {
  margin: 12px 0 12px 0;
}

#Sections:not(small) {
  margin: 24px 12px 24px 12px;
}

box.small .index-section-title {
  margin-left: 18px;
  margin-bottom: 6px;
  margin-top: 0px;
}

box:not(small) .index-section-title {
  margin-bottom: 10px;
  margin-top: 10px;
}

box.small image.index-section {
  margin-bottom: 5px;
}

box.small #NotesListBox {
  border-radius: 0px;
  border-top: none;
  border-left: none;
  border-right: none;
}

box.small #NotesListBox row {
  border-radius: 0px;
}

.editor {
  background-color: var(--view-bg-color);
}

.editor-textview {
  line-height: 1.4;
  background-color: inherit;
}

button.note-title-header label:hover {
  color: color-mix(in srgb, var(--window-fg-color) 70%, transparent);
}

button.note-title-header {
  background: none;
}

/* Aligning with libadwaita toolbar view raised border style */
#EditorTopBarRevealer {
  box-shadow: 0 1px var(--headerbar-darker-shade-color);
}
#EditorTopBarRevealer headerbar {
  box-shadow: none;
  background-color: var(--view-bg-color);
}
#EditorBottomBarRevealer {
  box-shadow: 0 -1px var(--headerbar-darker-shade-color);
}
#EditorBottomBarRevealer headerbar {
  background-color: var(--view-bg-color);
}
/* Style editor header bars when window doesn't have focus */
#EditorTopBarRevealer headerbar:backdrop {
  background-color: var(--editor-headers-backdrop);
}
#EditorBottomBarRevealer headerbar:backdrop {
  background-color: var(--editor-headers-backdrop);
}
@media (prefers-contrast: more) {
  /* Header bar outlines */
  #EditorTopBarRevealer {
    box-shadow: 0 1px var(--headerbar-border-color);
  }
  #EditorBottomBarRevealer {
    box-shadow: 0 -1px var(--headerbar-border-color);
  }
}

/* Squat editor bottom bar on mobile */
headerbar.formatting-small {
  min-height: 0px;
}
headerbar.formatting-small button {
  min-height: 20px;
}
headerbar.formatting-small windowhandle box button {
  padding-top: 4px;
  padding-bottom: 4px;
}
headerbar.formatting-small windowhandle > box  {
  padding-top: 1px;
  padding-bottom: 1px;
}

#TablePopover button.on {
  background-color: color-mix(in srgb, var(--accent-bg-color) 40%, transparent);
}

#TablePopover grid button.hovering {
  background-color: color-mix(in srgb, var(--accent-bg-color) 70%, transparent);
}

#TablePopover box overlay label {
  color: color-mix(in srgb, var(--window-fg-color) 80%, transparent);
  font-weight: bold;
  font-variant-numeric: proportional-nums;
  font-size: 1.75em;
}

#OutlineDialog list {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#OutlineDialog list > row {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#OutlineDialog headerbar.list-matched {
  background-color: var(--card-bg-color);
}

/* The outline dialog uses the Adw.ActionRow prefix and suffix (RTL) for indentation. Here we
 * remove some undesirable spacing #techdebt
 */
#OutlineDialog list > row .prefixes {
  margin-right: 0;
}
#OutlineDialog list > row box {
  border-spacing: 0;
}

window .themeselector {
  margin: 9px;
}
window .themeselector checkbutton {
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  padding: 1px;
  background-clip: content-box;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--border-color);
}
window .themeselector checkbutton.follow:checked,
window .themeselector checkbutton.light:checked,
window .themeselector checkbutton.dark:checked {
  box-shadow: inset 0 0 0 2px var(--accent-bg-color);
}
window .themeselector checkbutton.follow {
  background-image: linear-gradient(to bottom right, #fff 49.99%, #202020 50.01%);
}
window .themeselector checkbutton.light {
  background-color: #fff;
}
window .themeselector checkbutton.dark {
  background-color: #202020;
}
window .themeselector checkbutton radio {
  -gtk-icon-source: none;
  border: none;
  background: none;
  box-shadow: none;
  min-width: 12px;
  min-height: 12px;
  transform: translate(27px, 14px);
  padding: 2px;
}
window .themeselector checkbutton radio:checked {
  -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
  background-color: var(--accent-bg-color);
  color: var(--accent-fg-color);
}

label.index-category-pill {
  font-size: .83333em;
  border-radius: 4px;
  margin: 0;
  padding: 1px 6px;
}

/* Some (hopefully temporary) handling of the keyboard focus ring. Using a bunch of hard
 * coded values which line up with Adwaita as of v1.4.
 * */
window .sidebar-pane listview row.focused {
  outline: 0 solid transparent;
  outline-width: 2px;
  outline-offset: -2px;
  outline-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
}
@media (prefers-contrast: more) {
    /* Using a bunch of hard coded values which line up with Adwaita as of v1.4 */
    window .sidebar-pane listview row.focused {
      outline-color: color-mix(in srgb, var(--accent-color) 80%, transparent);
    }
}

/* A temporary fix while using deprecated GtkEntryCompletion. Will potentially have issues outside
 * of Adwaita. Fixes issue with popup surrounds in dark mode.
 */
entry.category-selector popover contents {
  background-color: var(--view-bg-color);
}

/* Cater for selections still being used for state as part of transitioning away from a past
 * feature. We're removing selection styling.
 * TODO move away from using the listbox selections for state
 */
#Sections row:selected {
  background-color: transparent;
}
#Sections row:selected:hover {
  /* ~ libadwaita/src/stylesheet/widgets/_lists.scss:354 */
  background-color: color-mix(in srgb, var(--view-fg-color) 3%, transparent);
}