$colors: transparent, black, shade-00, shade-05, shade-10, shade-20, shade-30,
  shade-40, shade-45, shade-50, shade-100, white, full-white, red-20, red-30, red-50, red-60, red-70, red, yellow,
  yellow-dark, sand, pink, primary, primary-light, primary-dark, primary-darker,
  primary-shade-light, primary-shade-dark, green, saturn-orange, moon-dust,
  pink-moon;

@each $color in $colors {
  .$(color),
  .$(color)-on-hover:hover,
  .$(color)-on-active:active,
  .$(color)-on-focus:focus,
  .child-effects-on-hover:hover .$(color)-child-effect,
  .child-effects-on-focus:focus .$(color)-child-effect {
    color: var(--$color);
  }

  .background-$(color),
  .background-$(color)-on-hover:hover,
  .background-$(color)-on-focus:focus,
  .child-effects-on-hover:hover .background-$(color)-child-effect,
  .child-effects-on-focus:focus .background-$(color)-child-effect {
    background-color: var(--$color);
  }

  .background-$(color)-on-active:active {
    background-color: var(--$color) !important;
  }

  .border-$(color),
  .border-$(color)-on-active:active,
  .border-$(color)-on-focus:focus,
  .border-$(color)-on-hover:hover,
  .child-effects-on-hover:hover .border-$(color)-child-effect,
  .child-effects-on-focus:focus .border-$(color)-child-effect {
    border-color: var(--$color);
  }

  .placeholder-$(color)::placeholder {
    color: var(--$color);
  }
}

/* SPECIFIC COMPONENTS */
/* EDITOR */
.note-editor-title {
  color: var(--shade-00);
  font-family: var(--font-family-title);
}

.note-editor-title:disabled {
  -webkit-text-fill-color: var(--shade-00);
}

.note-editor,
.comment-editor {
  color: var(--note-editor-color);
  caret-color: var(--note-editor-color);
}

.note-editor ::selection,
.comment-editor ::selection,
.note-editor-title::selection {
  background: var(--note-editor-selection-color);
}

/* Editor error banner */
.note-editor blockquote:before {
  background-color: var(--shade-45);
}

/* Comments */
.comment-highlighted {
  border-bottom: 3px solid rgba(255, 207, 89, 1);
  &:hover {
    background-color: #ffe697;
    border-bottom: 3px solid rgba(255, 230, 151, 1);
  }
}

/* Highlight */
.note-editor mark {
  color: var(--note-editor-color);
}

/* Inline code */
.note-editor code {
  background-color: var(--code-background);
  border: 1px solid var(--code-border-color);
}

/* Note links, mentions */
.entity-highlight {
  color: var(--entity-highlight-color);
  background-color: var(--entity-highlight-background);
}
.entity-highlight.is-clickable:hover,
.entity-highlight.is-selected {
  color: var(--entity-highlight-active-color);
  background-color: var(--entity-highlight-active-background);
}
@media (any-pointer: fine) {
  .entity-highlight:hover {
    color: var(--entity-highlight-active-color);
    background-color: var(--entity-highlight-active-background);
  }

  .dark-mode .entity-highlight:hover {
    color: var(--entity-highlight-active-color);
    background-color: var(--entity-highlight-active-background);
  }
}

/* Quote */
.note-editor blockquote:before {
  background-color: var(--shade-45);
}

/* Tables & Databases */
.slite-editor-table-cell::before,
.slite-editor-database-cell:before {
  border-color: var(--shade-40);
}

/* tags */
$tagColors: default, blue, green, yellow, orange, red, mauve, purple, bleu, grey;
@each $tagColor in $tagColors {
  .slite-editor-database-tag-$(tagColor) {
    background-color: var(--tag-$(tagColor)-background);
    color: var(--tag-$(tagColor)-color);
  }
}

/* Tooltip */
.tooltip {
  color: var(--tooltip-color);
  background-color: var(--tooltip-background-color);
}

/* Stripped backgrounds */
.background-stripped-shade-100 {
  background: repeating-linear-gradient(
    120deg,
    var(--shade-100),
    var(--shade-100) 3px,
    var(--shade-45) 3px,
    var(--shade-45) 5px
  );
}

.background-stripped-red {
  background: repeating-linear-gradient(
    120deg,
    var(--red),
    var(--red) 3px,
    #ff5164 3px,
    #ff5164 5px
  );
}

.background-stripped-primary {
  background: repeating-linear-gradient(
    120deg,
    var(--primary),
    var(--primary) 2px,
    var(--primary-shade-light) 2px,
    var(--primary-shade-light) 5px
  );
}