/* bindinator.js Copyright ©2016-2017 Tonio Loewald */

:root {
  --body-font-size: 14px;
  --ui-font: var(--body-font-size) system-ui, Sans-serif; /* Firefox doesn't support system-ui yet */
  --code-font: 100% Menlo, Monaco, Monospace;
  --heading-weight: 200;

  --body-line-height: 20px;
  --narrowest-spacing-size: 2px;
  --narrow-spacing-size: 5px;
  --spacing-size: 10px;
  --wide-spacing-size: 20px;
  --tiny-corner-radius-size: 2px;
  --corner-radius-size: 5px;
  --rounded-radius-size: 999px;
  --input-size: 100px;
  --input-padding-edges: var(--narrow-spacing-size) var(--spacing-size);
  --small-target-size: 25px;
  --touch-target-size: 45px;

  --focus-outline: none;
  --shadow-outline: 0 0 0 1px var(--black-10);
  --shadow-hover-outline: 0 0 0 1px var(--black-20);
  --shadow-active-outline: 0 0 0 1px var(--back-40);

  --bg-color: aliceblue;
  --content-bg-color: #ddd;
  --faded-bg-color: #ccc;
  --example-bg-color: rgb(229, 229, 241);
  --input-bg-color: #eee;
  --text-color: #333;
  --tooltip-bg-color: #ff8;
  --dark-text-color: #eee;
  --code-text-color: #444;
  --faded-text-color: #666;
  --hint-text-color: #aaa;
  --accent-color: royalblue;
  --dark-accent-color: rgb(0, 96, 163);
  --light-accent-color: aliceblue;
  --bright-accent-color: rgb(173, 212, 236);
  --default-bg-color: #cfb;
  --cancel-bg-color: #ffb;
  --selection-color: rgba(0, 64, 255, 0.25);
  --focus-color: #ff6a5c;
  --pullquote-bg-color: aliceblue;
  --black-5: rgba(0, 0, 0, 0.05);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-80: rgba(0, 0, 0, 0.8);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-75: rgba(255, 255, 255, 0.75);
  --grey-50: rgba(128, 128, 128, 0.5);
  --grey-75: rgba(128, 128, 128, 0.75);
  --shadow-50: rgba(0, 0, 0, 0.5);
  --shadow-color: rgba(0, 0, 0, 0.5);

  --link-color: rgba(64, 0, 255, 0.5);
  --link-active-color: #40f;

  --error-color: rgb(255, 255, 255);
  --warning-color: rgb(214, 121, 0);
  --ok-color: green;
  --error-bg: rgb(206, 0, 0);
  --warning-bg: rgb(255, 213, 159);
  --ok-bg: rgb(153, 255, 153);

  --hover-transition: 0.15s ease-out;
  --fade-transition: opacity 0.3s ease-out;
}

.darkmode {
  --bg-color: #282840;
  --tooltip-bg-color: #55a;
  --content-bg-color: #222;
  --faded-bg-color: #444;
  --example-bg-color: rgb(39, 39, 49);
  --input-bg-color: #111;
  --faded-text-color: #bbb;
  --text-color: #ddd;
  --dark-text-color: #222;
  --dark-accent-color: lightskyblue;
  --light-accent-color: #456;
  --bright-accent-color: #346;
  --pullquote-bg-color: #334;
  --code-text-color: #88f;
  --link-color: #88f;
  --link-active-color: #64f;
  --default-bg-color: #186040;
  --cancel-bg-color: #6a6d1d;


  --warning-bg: rgb(214, 121, 0);
  --ok-bg: green;
  --warning-color: rgb(255, 213, 159);
  --ok-color: rgb(153, 255, 153);

  --black-5: rgba(255, 255, 255, 0.05);
  --black-10: rgba(255, 255, 255, 0.1);
  --black-20: rgba(255, 255, 255, 0.2);
  --black-40: rgba(255, 255, 255, 0.4);
  --black-80: rgba(255, 255, 255, 0.8);
  --white-25: rgba(0, 0, 0, 0.25);
  --white-50: rgba(0, 0, 0, 0.5);
  --white-75: rgba(0, 0, 0, 0.75);
}

body {
  font: var(--ui-font);
  color: var(--text-color);
  background: var(--content-bg-color);
  margin: 0;
  overflow: hidden;
}

@media print {
  body {
    overflow: default;
  }
}

* {
  box-sizing: border-box;

  /* overflow issue */
  min-height: 0;
  min-width: 0;
}

p {
  line-height: var(--body-line-height);
}

blockquote {
  padding: var(--spacing-size) var(--wide-spacing-size);
  margin: 0;
}

a {
  color: var(--dark-accent-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--link-color);
}

a:enabled:hover {
  background: var(--black-10);
}

a:visited {
  color: var(--dark-accent-color);
  border-bottom: 1px dotted var(--link-color);
  opacity: 0.8;
}

a:active {
  background: var(--black-20);
  border-bottom: 1px solid var(--link-active-color);
}

.dark {
  color: var(--dark-text-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
  margin-block-start: var(--spacing-size);
  margin-block-end: var(--spacing-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--heading-weight);
}

h1 {
  font-size: 480%;
}

h2 {
  font-size: 240%;
}

h3 {
  font-size: 180%;
}

h4 {
  font-size: 140%;
}

h5 {
  font-size: 120%;
}

h6 {
  font-size: 100%;
}

.b8r-color {
  color: var(--bright-accent-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
i,
em {
  color: var(--dark-accent-color);
}

.hidden,
[data-list] {
  display: none !important;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.fade-in {
  animation: fade-in var(--hover-transition);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-out {
  opacity: 0 !important;
  animation: fade-out 0.5s ease-out;
}

@keyframes fade-out {
  from {
    opacity: inherit;
  }

  to {
    opacity: 0 !important;
  }
}

@keyframes spin-clockwise {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

label {
  align-items: center;
  display: inline-flex;
}

label > * {
  line-height: var(--body-line-height);
}

label > * + * {
  margin-left: var(--narrow-spacing-size);
}

:disabled {
  opacity: 0.5;
}

button,
.button,
select,
.select,
input,
textarea,
[contenteditable='true'] {
  font-size: var(--body-font-size);
  color: var(--text-color);
  padding: var(--input-padding-edges);
  background: var(--input-bg-color);
  border: none;
  box-shadow: var(--shadow-outline);
  transition: var(--hover-transition);
  line-height: var(--body-line-height);
  outline: var(--focus-outline);
}

input[type='date'] {
  font: var(--ui-font);
}

select {
  -webkit-appearance: none;
}

select:not([multiple]) {
  background-image: url(select-triangle.svg);
  background-repeat: no-repeat;
  background-position: top 12px right 10px;
}

select[multiple] {
  padding: 0;
}

select[multiple] > option {
  padding: var(--input-padding-edges);
}

:not(input)[placeholder]:empty:after {
  content: attr(placeholder);
  color: var(--hint-text-color);
}

::placeholder {
  color: var(--hint-text-color);
}

select,
.select {
  vertical-align: top;
}

button,
.button,
input,
textarea,
[contenteditable='true'] {
  vertical-align: baseline;
}

input,
textarea {
  border-radius: var(--tiny-corner-radius-size);
}

textarea {
  vertical-align: bottom;
  resize: none;
}

input[type='range'] {
  box-shadow: none;
  vertical-align: middle;
}

input[type='color'] {
  width: var(--small-target-size);
  height: var(--small-target-size);
  padding: 0;
  background: none;
  box-shadow: none;
}

input[type='number'] {
  padding-right: var(--narrow-spacing-size);
}

[currency]:before {
  content: attr(currency);
  display: inline-block;
}

input[type=search],
input.search {
  border-radius: var(--rounded-radius-size);
  padding: var(--narrowest-spacing-size) var(--spacing-size);
}

button {
  border-radius: var(--corner-radius-size);
  outline: none;
  vertical-align: bottom;
}

button.default,
button[type='submit'] {
  background-color: var(--default-bg-color);
}

button.cancel,
button[type='cancel'] {
  background-color: var(--cancel-bg-color);
}

.iconic {
  padding: 0;
  box-shadow: none;
  background: var(--white-50);
  width: var(--small-target-size);
  height: var(--small-target-size);
  border-radius: var(--rounded-radius-size);
  line-height: var(--small-target-size);
  text-align: center;
}

.iconic:focus,
.iconic:enabled:hover {
  box-shadow: none;
  background: var(--white-75);
}

.iconic:active {
  box-shadow: none;
  background: var(--content-bg-color);
}

.hidden-checkbox {
  position: absolute;
  left: -99999px;
}

.show-after-checked,
:checked + .show-after-unchecked,
:checked + .show-after-checked + .show-after-unchecked {
  display: none;
}

:checked + .show-after-checked,
.show-after-unchecked {
  display: inline-block;
}

button:enabled:hover,
.button:enabled:hover,
button.cancel:enabled:hover,
.button.cancel:enabled:hover,
button.default:enabled:hover,
.button.default:enabled:hover,
button:focus,
.button:focus,
button.cancel:focus,
.button.cancel:focus,
button.default:focus,
.button.default:focus {
  background-color: var(--light-accent-color);
  box-shadow: var(--shadow-hover-outline);
}

button:active,
.button:active,
button.cancel:active,
.button.cancel:active,
button.default:active,
.button.default:active {
  background-color: var(--accent-color);
  color: var(--content-color);
  box-shadow: var(--shadow-active-outline);
}

hr {
  border: none;
  border-top: 1px solid var(--black-20);
}

form {
  padding: var(--input-padding-edges);
  margin-block-start: var(--spacing-size);
  margin-block-end: var(--spacing-size);
  background-color: var(--black-10);
}

fieldset {
  border: none;
  box-shadow: var(--shadow-outline-hover);
  margin-block-start: var(--spacing-size);
  margin-block-end: var(--spacing-size);
  padding: var(--input-padding-edges);
}

:focus,
:focus + .focus-follower {
  outline: none;
}

pre {
  font: var(--code-font);
  padding: var(--input-padding-edges);
  background-color: var(--pullquote-bg-color);
  color: var(--code-text-color);
  border-radius: var(--corner-radius-size);
  overflow: scroll;
  overflow: overlay;
}

code,
.code {
  color: var(--dark-accent-color);
  font: var(--code-font);
}

pre > code {
  color: var(--code-text-color);
}

.select {
  background: var(--content-bg-color);
  cursor: pointer;
}

.select > * {
  padding: var(--input-padding-edges);
}

.select > *,
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select > :enabled:hover {
  background: var(--black-10);
}

.select > :active {
  background: var(--text-color);
  color: var(--content-bg-color);
}

.select > .selected {
  background: var(--black-20);
  color: var(--text-color);
}

[data-component] {
  opacity: 0;
  visibility: hidden !important;
}

::selection {
  background: var(--selection-color);
}

::-webkit-scrollbar {
  width: var(--narrow-spacing-size);
  height: var(--narrow-spacing-size);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: transparent;
}

:enabled:hover::-webkit-scrollbar-track {
  background: var(--black-5);
}

:enabled:hover::-webkit-scrollbar-thumb {
  background: var(--black-10);
}

:enabled:hover::-webkit-scrollbar-thumb:window-inactive {
  background: var(--black-5);
}

meter,
progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  vertical-align: middle;
  width: var(--input-size);
  height: var(--body-line-height);

  box-shadow: var(--shadow-outline);
  background: var(--content-bg-color);
  border-radius: var(--rounded-radius-size);
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--input-bg-color);
}

progress::-webkit-progress-value {
  background-color: var(--text-color);
}

/* used by tooltips.js */
.tooltips-tooltip {
  position: fixed;
  background: var(--tooltip-bg-color);
  padding: var(--input-padding-edges);
  border-radius: var(--tiny-radius-size);
  color: var(--text-color);
  max-width: 25vw;
  opacity: 0;
  transition: var(--fade-transition);
}