@use "mixins";

/**
 * Background colors
 */

.primary-background {
  background-color: var(--color-primary) !important;
}
.primary-background-light {
  background-color: var(--color-primary-light);
  @include mixins.whenDark {
    background: #000;
    .text-link {
      color: #AAA !important;
    }
  }
}
.link-background {
  background-color: var(--color-link) !important;
}

/*
 * Status text colors
 */
.text-pos, .text-pos:hover, .text-pos-hover:hover {
  color: var(--color-positive) !important;
  fill: var(--color-positive) !important;
}

.text-warn, .text-warn:hover, .text-warn-hover:hover {
  color: var(--color-warning) !important;
  fill: var(--color-warning) !important;
}

.text-neg, .text-neg:hover, .text-neg-hover:hover  {
  color: var(--color-negative) !important;
  fill: var(--color-negative) !important;
}

/*
 * Style text colors
 */
.text-primary, .text-primary:hover, .text-primary-hover:hover  {
  color: var(--color-primary) !important;
  fill: var(--color-primary) !important;
}

.text-link, .text-link:hover, .text-link-hover:hover  {
  color: var(--color-link) !important;
  fill: var(--color-link) !important;
}

.text-muted {
  @include mixins.lightDark(color, #575757, #888888, true);
  fill: currentColor !important;
}

.text-dark {
  @include mixins.lightDark(color, #222, #ccc, true);
  fill: currentColor !important;
}

.text-white {
  color: #fff;
  fill: currentColor !important;
}

/*
 * Entity text colors
 */
.text-bookshelf, .text-bookshelf:hover {
  color: var(--color-bookshelf);
  fill: var(--color-bookshelf);
}
.text-book, .text-book:hover {
  color: var(--color-book);
  fill: var(--color-book);
}
.text-page, .text-page:hover {
  color: var(--color-page);
  fill: var(--color-page);
}
.text-page.draft, .text-page.draft:hover {
  color: var(--color-page-draft);
  fill: var(--color-page-draft);
}
.text-chapter, .text-chapter:hover {
  color: var(--color-chapter);
  fill: var(--color-chapter);
}

/*
 * Standard & Entity background colors
 */
.bg-white {
  background-color: #FFFFFF;
}
.bg-book {
  background-color: var(--color-book);
}
.bg-chapter {
  background-color: var(--color-chapter);
}
.bg-bookshelf {
  background-color: var(--color-bookshelf);
}
