/**
 * @license
 * 1bit-ui v0.9.0
 * Copyright 2020 Brian Mock
 * https://www.1bit-ui.com
 */

.bit-auto,
.bit-root {
  --bit-color0: #222323;
  --bit-color1: #f0f6f0;
  --bit-button-padding-horizontal: 1rem;
  --bit-button-padding-vertical: 0.5rem;
  --bit-select-padding-horizontal: 1rem;
  --bit-select-padding-vertical: 0.5rem;
  --bit-input-padding-horizontal: 0.5rem;
  --bit-input-padding-vertical: 0.5rem;
  --bit-table-padding-horizontal: 1rem;
  --bit-table-padding-vertical: 0.5rem;
  --bit-card-padding-horizontal: 1rem;
  --bit-card-padding-vertical: 1rem;
  --bit-pre-padding-horizontal: 1rem;
  --bit-pre-padding-vertical: 1rem;
  --bit-code-padding-horizontal: 0.2em;
  --bit-code-padding-vertical: 0.1em;
  --bit-radiocheckbox-size: 1.5em;
  --bit-border-width: 2px;
  --bit-border-radius: 0px;
  --bit-select-handle-width: 1em;
  background: var(--bit-color1);
  color: var(--bit-color0);
}

/* Checkbox / Radio Button Field Container */

.bit-field {
  box-sizing: border-box;
  display: grid;
  grid-gap: calc(2 * var(--bit-border-width));
  grid-template-columns: min-content 1fr;
  align-items: center;
}

.bit-field > .bit-radio + *,
.bit-field > .bit-checkbox + * {
  user-select: none;
}

.bit-field > .bit-radio:disabled + *,
.bit-field > .bit-checkbox:disabled + * {
  opacity: 0.5;
}

.bit-auto input[type="radio"] + label,
.bit-auto input[type="checkbox"] + label {
  padding: calc(2 * var(--bit-border-width));
  display: inline-block;
  align-self: start;
}

/* Checkbox / Radio Button */

.bit-auto input[type="checkbox"],
.bit-checkbox {
  border-radius: var(--bit-border-radius);
}

.bit-auto input[type="radio"],
.bit-radio {
  border-radius: 9999px;
}

.bit-auto input[type="checkbox"],
.bit-auto input[type="radio"],
.bit-checkbox,
.bit-radio {
  align-self: start;
  vertical-align: top;
  box-sizing: border-box;
  -webkit-appearance: none;
  font: inherit;
  width: var(--bit-radiocheckbox-size);
  height: var(--bit-radiocheckbox-size);
  margin: calc(2 * var(--bit-border-width));
  background: var(--bit-color1);
  color: var(--bit-color0);
  border: var(--bit-border-width) solid var(--bit-color0);
}

.bit-auto input[type="checkbox"]:hover,
.bit-auto input[type="radio"]:hover,
.bit-checkbox:hover,
.bit-radio:hover {
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0);
}

.bit-auto input[type="checkbox"]:focus,
.bit-auto input[type="radio"]:focus,
.bit-checkbox:focus,
.bit-radio:focus {
  outline: 0;
  box-shadow: 0 0 0 var(--bit-border-width) var(--bit-color1),
    0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color0),
    inset 0 0 0 var(--bit-border-width) var(--bit-color1);
}

.bit-auto input[type="checkbox"]:checked,
.bit-auto input[type="radio"]:checked,
.bit-checkbox:checked,
.bit-radio:checked {
  background: var(--bit-color0);
  box-shadow: inset 0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color1);
}

.bit-auto input[type="checkbox"]:checked:hover,
.bit-auto input[type="radio"]:checked:hover,
.bit-checkbox:checked:hover,
.bit-radio:checked:hover {
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0),
    inset 0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color1);
}

.bit-auto input[type="checkbox"]:checked:focus,
.bit-auto input[type="radio"]:checked:focus,
.bit-checkbox:checked:focus,
.bit-radio:checked:focus {
  box-shadow: 0 0 0 var(--bit-border-width) var(--bit-color1),
    0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color0),
    inset 0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color1);
}

.bit-auto input[type="checkbox"]:disabled:hover,
.bit-auto input[type="radio"]:disabled:hover,
.bit-auto input[type="checkbox"]:disabled,
.bit-auto input[type="radio"]:disabled,
.bit-checkbox:disabled:hover,
.bit-radio:disabled:hover,
.bit-checkbox:disabled,
.bit-radio:disabled {
  opacity: 0.5;
  border-style: dotted;
  box-shadow: none;
}

/* Table */

.bit-auto table,
.bit-table {
  box-sizing: border-box;
  background: var(--bit-color1);
  color: var(--bit-color0);
  border-collapse: collapse;
}

.bit-auto table th,
.bit-table th {
  padding: var(--bit-table-padding-vertical) var(--bit-table-padding-horizontal);
  text-align: left;
}

.bit-auto table tbody tr,
.bit-table tbody tr {
  border-top: calc(0.5 * var(--bit-border-width)) solid var(--bit-color0);
}

.bit-auto table th,
.bit-auto table td,
.bit-table th,
.bit-table td {
  background: var(--bit-color1);
  color: var(--bit-color0);
  padding: var(--bit-table-padding-vertical) var(--bit-table-padding-horizontal);
}

.bit-auto table thead,
.bit-table thead {
  border-top: 0;
  border-bottom: var(--bit-border-width) solid var(--bit-color0);
}

.bit-auto table tfoot,
.bit-table tfoot {
  border-top: var(--bit-border-width) solid var(--bit-color0);
  border-bottom: 0;
}

/* Button */

.bit-auto button,
.bit-auto input[type="button"],
.bit-auto input[type="submit"],
.bit-auto input[type="color"],
.bit-button {
  box-sizing: border-box;
  background: var(--bit-color1);
  color: var(--bit-color0);
  padding: var(--bit-button-padding-vertical)
    var(--bit-button-padding-horizontal);
  font: inherit;
  border: var(--bit-border-width) solid var(--bit-color0);
  box-shadow: inset 0 calc(-1 * var(--bit-border-width)) 0 var(--bit-color0);
  border-radius: var(--bit-border-radius);
}

.bit-auto button:hover,
.bit-auto input[type="button"]:hover,
.bit-auto input[type="submit"]:hover,
.bit-auto input[type="color"]:hover,
.bit-button:hover {
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0);
}

.bit-auto button:active,
.bit-auto input[type="button"]:active,
.bit-auto input[type="submit"]:active,
.bit-auto input[type="color"]:active,
.bit-button:active {
  transform: translateY(var(--bit-border-width));
}

.bit-auto button:focus,
.bit-auto input[type="button"]:focus,
.bit-auto input[type="submit"]:focus,
.bit-auto input[type="color"]:focus,
.bit-button:focus {
  outline: none;
  border-color: var(--bit-color1);
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0),
    0 0 0 var(--bit-border-width) var(--bit-color0),
    inset 0 calc(-2 * var(--bit-border-width)) 0 var(--bit-color0);
}

.bit-auto button:disabled,
.bit-auto input[type="button"]:disabled,
.bit-auto input[type="submit"]:disabled,
.bit-auto input[type="color"]:disabled,
.bit-button:disabled {
  transform: none;
  opacity: 0.5;
  box-shadow: none;
  border-color: var(--bit-color0);
  border-style: dotted;
}

/* Select */

.bit-auto select,
.bit-select {
  box-sizing: border-box;
  -webkit-appearance: none;
  background: var(--bit-color1);
  color: var(--bit-color0);
  padding: var(--bit-select-padding-vertical)
    var(--bit-select-padding-horizontal);
  padding-right: calc(
    var(--bit-select-padding-horizontal) + var(--bit-select-handle-width)
  );
  font: inherit;
  border: var(--bit-border-width) solid var(--bit-color0);
  border-radius: var(--bit-border-radius);
  box-shadow: inset 0 calc(-1 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset 0 var(--bit-border-width) 0 0 var(--bit-color1),
    inset calc(-1 * var(--bit-border-width)) 0 0 0 var(--bit-color1),
    inset calc(-1 * var(--bit-select-handle-width)) 0 0 0 var(--bit-color0),
    inset
      calc(-1 * var(--bit-select-handle-width) + -1 * var(--bit-border-width)) 0
      0 0 var(--bit-color1);
}

.bit-auto select:hover,
.bit-select:hover {
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0),
    inset 0 calc(-2 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset 0 calc(2 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset calc(-2 * var(--bit-border-width)) 0 0 0 var(--bit-color1),
    inset calc(-1 * var(--bit-select-handle-width)) 0 0 0 var(--bit-color0),
    inset
      calc(-1 * var(--bit-select-handle-width) + -1 * var(--bit-border-width)) 0
      0 0 var(--bit-color1);
}

.bit-auto select:focus,
.bit-select:focus {
  outline: none;
  border-color: var(--bit-color1);
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0),
    inset 0 calc(-2 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset 0 calc(2 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset calc(-2 * var(--bit-border-width)) 0 0 0 var(--bit-color1),
    inset calc(-1 * var(--bit-select-handle-width)) 0 0 0 var(--bit-color0),
    inset
      calc(-1 * var(--bit-select-handle-width) + -1 * var(--bit-border-width)) 0
      0 0 var(--bit-color1),
    0 0 0 var(--bit-border-width) var(--bit-color0);
}

.bit-auto select:-moz-focusring,
.bit-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bit-color0);
}

.bit-auto select:disabled,
.bit-select:disabled {
  opacity: 0.5;
  border-color: var(--bit-color0);
  border-style: dotted;
  box-shadow: inset 0 calc(-1 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset 0 calc(1 * var(--bit-border-width)) 0 0 var(--bit-color1),
    inset calc(-1 * var(--bit-border-width)) 0 0 0 var(--bit-color1),
    inset calc(-1 * var(--bit-select-handle-width)) 0 0 0 var(--bit-color0),
    inset
      calc(-1 * var(--bit-select-handle-width) + -1 * var(--bit-border-width)) 0
      0 0 var(--bit-color1);
}

/* Link */

.bit-auto a,
.bit-link {
  color: var(--bit-color0);
  text-decoration: underline;
  border-radius: var(--bit-border-radius);
}

.bit-auto a:hover,
.bit-link:hover {
  border-radius: var(--bit-border-radius);
  background: var(--bit-color1);
  text-decoration: none;
  box-shadow: 0 0 0 var(--bit-border-width) var(--bit-color1),
    0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color0);
}

.bit-auto a:focus,
.bit-link:focus {
  border-radius: var(--bit-border-radius);
  background: var(--bit-color0);
  color: var(--bit-color1);
  text-decoration: none;
  outline: none;
  box-shadow: 0 0 0 var(--bit-border-width) var(--bit-color0),
    0 0 0 calc(2 * var(--bit-border-width)) var(--bit-color1),
    0 0 0 calc(3 * var(--bit-border-width)) var(--bit-color0);
}

/* Input / Text Area */

.bit-auto input[type="tel"],
.bit-auto input[type="url"],
.bit-auto input[type="text"],
.bit-auto input[type="email"],
.bit-auto input[type="search"],
.bit-auto input[type="number"],
.bit-auto input[type="password"],
.bit-auto textarea,
.bit-input {
  box-sizing: border-box;
  background: var(--bit-color1);
  color: var(--bit-color0);
  font: inherit;
  padding: var(--bit-input-padding-vertical) var(--bit-input-padding-horizontal);
  border: var(--bit-border-width) solid var(--bit-color0);
  box-shadow: inset 0 var(--bit-border-width) 0 var(--bit-color0);
  border-radius: var(--bit-border-radius);
}

.bit-auto input[type="tel"]:hover,
.bit-auto input[type="url"]:hover,
.bit-auto input[type="text"]:hover,
.bit-auto input[type="email"]:hover,
.bit-auto input[type="search"]:hover,
.bit-auto input[type="number"]:hover,
.bit-auto input[type="password"]:hover,
.bit-auto textarea:hover,
.bit-input:hover {
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0);
}

.bit-auto input[type="tel"]:focus,
.bit-auto input[type="url"]:focus,
.bit-auto input[type="text"]:focus,
.bit-auto input[type="email"]:focus,
.bit-auto input[type="search"]:focus,
.bit-auto input[type="number"]:focus,
.bit-auto input[type="password"]:focus,
.bit-auto textarea:focus,
.bit-input:focus {
  outline: none;
  border-color: var(--bit-color1);
  box-shadow: inset 0 0 0 var(--bit-border-width) var(--bit-color0),
    0 0 0 var(--bit-border-width) var(--bit-color0),
    inset 0 calc(2 * var(--bit-border-width)) 0 var(--bit-color0);
}

.bit-auto input[type="tel"]:disabled,
.bit-auto input[type="url"]:disabled,
.bit-auto input[type="text"]:disabled,
.bit-auto input[type="email"]:disabled,
.bit-auto input[type="search"]:disabled,
.bit-auto input[type="number"]:disabled,
.bit-auto input[type="password"]:disabled,
.bit-auto textarea:disabled,
.bit-input:disabled {
  opacity: 0.5;
  box-shadow: none;
  border-color: var(--bit-color0);
  border-style: dotted;
}

.bit-auto input[type="tel"]::placeholder,
.bit-auto input[type="url"]::placeholder,
.bit-auto input[type="text"]::placeholder,
.bit-auto input[type="email"]::placeholder,
.bit-auto input[type="search"]::placeholder,
.bit-auto input[type="number"]::placeholder,
.bit-auto input[type="password"]::placeholder,
.bit-auto textarea::placeholder,
.bit-input::placeholder {
  color: var(--bit-color0);
  opacity: 0.5;
}

.bit-auto input[type="tel"]::selection,
.bit-auto input[type="url"]::selection,
.bit-auto input[type="text"]::selection,
.bit-auto input[type="email"]::selection,
.bit-auto input[type="search"]::selection,
.bit-auto input[type="number"]::selection,
.bit-auto input[type="password"]::selection,
.bit-auto textarea::selection,
.bit-input::selection {
  background: var(--bit-color0);
  color: var(--bit-color1);
}

/* Firefox nonsense */

.bit-auto ::-moz-focus-inner,
.bit-checkbox::-moz-focus-inner,
.bit-radio::-moz-focus-inner,
.bit-select::-moz-focus-inner,
.bit-button::-moz-focus-inner,
.bit-input::-moz-focus-inner {
  border: 0;
}

/* Miscellaneous */

.bit-card {
  box-sizing: border-box;
  background: var(--bit-color1);
  color: var(--bit-color0);
  border: calc(3 * var(--bit-border-width)) double var(--bit-color0);
  box-shadow: 0 calc(4 * var(--bit-border-width)) 0
    calc(-2 * var(--bit-border-width)) var(--bit-color0);
  padding: var(--bit-card-padding-vertical) var(--bit-card-padding-horizontal);
  border-radius: var(--bit-border-radius);
}

.bit-auto,
.bit-scrollbar {
  scrollbar-color: var(--bit-color0) var(--bit-color1);
}

.bit-svg {
  fill: var(--bit-color0);
}

.bit-auto code,
.bit-auto kbd,
.bit-auto samp,
.bit-code {
  background: var(--bit-color0);
  color: var(--bit-color1);
  padding: var(--bit-code-padding-vertical) var(--bit-code-padding-horizontal);
  border-radius: var(--bit-border-radius);
}

.bit-auto hr,
.bit-hr {
  box-sizing: border-box;
  border: 0;
  border-top: var(--bit-border-width) solid var(--bit-color0);
}

.bit-auto pre,
.bit-pre {
  box-sizing: border-box;
  background: var(--bit-color0);
  color: var(--bit-color1);
  scrollbar-color: var(--bit-color1) var(--bit-color0);
  overflow-x: auto;
  padding: var(--bit-pre-padding-vertical) var(--bit-pre-padding-horizontal);
  border-radius: var(--bit-border-radius);
}