/* 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-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 svg:not(.fill-current) {
  fill: var(--text-primary-color)
}

#peregrine-app [class$="-components-carousel"] figcaption.with-bg {
  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 table thead th,
#peregrine-app table thead th *,
#peregrine-app table td.mobile-header,
#peregrine-app table td.mobile-header *  {
  background: var(--bg-primary);
  color: var(--text-primary-color);
  fill: var(--text-primary-color);
}
#peregrine-app table.striped tbody tr:nth-of-type(2n+1) td:not(.mobile-header){
  background: transparent;
}
#peregrine-app table.striped tbody tr:nth-of-type(2n) td:not(.mobile-header){
  background: var(--bg-secondary);
}
#peregrine-app [class$="-components-datalist"].theme-dark table.striped tbody tr:nth-of-type(2n) td:not(.mobile-header),
#peregrine-app [class$="-components-datalist"].theme-dark table.striped tbody tr:nth-of-type(2n) td:not(.mobile-header) *{
  color: var(--text-secondary-color);
  fill: var(--text-secondary-color);
}
#peregrine-app [class$="-components-datalist"] .action-btn:hover {
  fill: var(--text-secondary-color);
}