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

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

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

#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 a:focus {
  box-shadow: 0 0 0 3px var(--focus-border-color);
  outline: 2px solid transparent; /* Windows High Contrast Mode */
  outline-offset: 1px;
}

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

#peregrine-app .btn:focus {
  color: var(--btn-focus-color);
  background: var(--btn-focus-bg);
  box-shadow: 0 0 0 3px var(--btn-focus-border-color);
  outline: 2px solid transparent; /* Windows High Contrast Mode */
}

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

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

#peregrine-app .btn.btn-primary:focus {
  color: var(--btn-primary-focus-color);
  background: var(--btn-primary-focus-bg);
  box-shadow: 0 0 0 3px var(--btn-primary-focus-border-color);
}

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

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

#peregrine-app .btn.btn-secondary:focus {
  color: var(--btn-secondary-focus-color);
  background: var(--btn-secondary-focus-bg);
  box-shadow: 0 0 0 3px var(--btn-secondary-focus-border-color);
  border-color: transparent;
}

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

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

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

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

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

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

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

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

#peregrine-app .btn.btn-light:hover {
  background: var(--btn-light-hover-bg) !important;
  color: var(--btn-light-hover-color, var(--link-primary-color));
}

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

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

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

#peregrine-app .accordion-toggle-button {
  font-family: inherit;
  -webkit-appearance: none;
  border: 0;
  background: none;
}

#peregrine-app .accordion-toggle-button:focus {
  outline: 0;
}

#peregrine-app .accordion-toggle-button:focus svg {
  fill: var(--btn-focus-border-color, blue);
}

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

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

#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);
  background-color: var(--text-primary-color);
}

#peregrine-app [class$="-components-navigation"] .dropdown-list {
  background: var(--bg-primary);
}

#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);
}