/* takes loaded vars and styles the page ONLY USE VARS FOR COLORS HERE! */

#peregrine-app {
  background-color: var(--bg-primary-color);
  color: var(--text-primary-color);
}

#peregrine-app .theme-light,
#peregrine-app .theme-dark {
  background-color: var(--bg-primary-color);
}

#peregrine-app *:not(hr) {
  border-color: var(--border-primary-color);
  color: var(--text-primary-color);
}

#peregrine-app a:not(.btn),
#peregrine-app a:not(.btn) * {
  color: var(--link-primary-color);
}

#peregrine-app a:not(.btn):hover,
#peregrine-app a:not(.btn) *:hover {
  color: var(--link-primary-color-hover);
}

#peregrine-app .btn {
  color: var(--btn-color);
}

#peregrine-app .btn.btn-primary {
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-bg);
}

#peregrine-app .btn.btn-secondary {
  border-width: var(--btn-secondary-border-width) !important;
}

#peregrine-app .btn.btn-secondary {
  color: var(--btn-secondary-color) !important;
  background-color: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-boder-color) !important;
}

#peregrine-app .btn.btn-success {
  background-color: var(--btn-success-bg) !important;
  color: var(--btn-primary-color);
}

#peregrine-app .btn.btn-danger {
  background-color: var(--btn-danger-bg) !important;
  color: var(--btn-primary-color);
}

#peregrine-app .btn.btn-warning {
  background-color: var(--btn-warning-bg) !important;
  color: var(--btn-primary-color);
}

#peregrine-app .btn.btn-orange {
  color: var(--btn-primary-color)
}

#peregrine-app .theme-light .card > .flex-col,
#peregrine-app .theme-dark .card > .flex-col {
  background-color: var(--bg-secondary-color);
}

#peregrine-app .theme-light .accordion-container,
#peregrine-app .theme-dark .accordion-container {
  background-color: var(--bg-secondary-color);
  border-width: 1px;
  border-style: solid;
}

#peregrine-app .theme-light .accordion-container > div,
#peregrine-app .theme-dark .accordion-container > div {
  background-color: var(--bg-secondary-color) !important;
  border-bottom-width: 1px;
  border-style: solid;
}

#peregrine-app svg:not(.fill-current) {
  fill: var(--text-primary-color)
}

#peregrine-app [class$="-components-carousel"] figcaption {
  background-color: var(--figcaption-primary-bg);
}

#peregrine-app .note-note,
#peregrine-app .note-note * {
  color: var(--note-text-color);
  background-color: var(--note-note-bg);
  border-color: var(--note-note-border-color);
}

#peregrine-app .note-tip,
#peregrine-app .note-tip * {
  color: var(--note-text-color);
  background-color: var(--note-tip-bg);
  border-color: var(--note-tip-border-color);
}

#peregrine-app .note-warning,
#peregrine-app .note-warning * {
  color: var(--note-text-color);
  background-color: var(--note-warning-bg);
  border-color: var(--note-warning-border-color);
}

#peregrine-app .note-important,
#peregrine-app .note-important * {
  color: var(--note-text-color);
  background-color: var(--note-important-bg);
  border-color: var(--note-important-border-color);
}

#peregrine-app .note-caution,
#peregrine-app .note-caution * {
  color: var(--note-text-color);
  background-color: var(--note-caution-bg);
  border-color: var(--note-caution-border-color);
}

#peregrine-app [class$="-components-navigation"] a,
#peregrine-app [class$="-components-navigation"] a * {
  color: var(--text-primary-color);
}

#peregrine-app [class$="-components-navigation"] a:hover,
#peregrine-app [class$="-components-navigation"] a:hover {
  color: var(--bg-primary-color);
  background-color: var(--text-primary-color);
}

#peregrine-app [class$="-components-tabs"] a[aria-selected="true"],
#peregrine-app [class$="-components-tabs"] a[aria-selected="true"] * {
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-bg);
}