$dark-background: #1f2234;
$dark-card-background: #333646;


[v-cloak] {
  display: none;
}

.bg-lnbits-dark {
  background-color: $dark-background;
}

body.body--dark,
body.body--dark .q-drawer--dark,
body.body--dark .q-menu--dark {
  background: $dark-background;
}

body.body--dark .q-card--dark {
  background: $dark-card-background;
}

body.body--dark .q-table--dark {
  background: transparent;
}

body.body--light,
body.body--light .q-drawer  {
  background: whitesmoke;
}

body.body--dark .q-field--error {
  .text-negative,
  .q-field__messages {
    color: yellow !important;
  }
}

.lnbits-drawer__q-list .q-item {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;

  &.q-item--active {
    color: inherit;
    font-weight: bold;
  }
}

.lnbits__dialog-card {
  width: 500px;
}

.q-table--dense {
  th:first-child,
  td:first-child,
  .q-table__bottom {
    padding-left: 6px !important;
  }

  th:last-child,
  td:last-child,
  .q-table__bottom {
    padding-right: 6px !important;
  }
}

a.inherit {
  color: inherit;
  text-decoration: none;
}

// QR video

video {
  border-radius: 3px;
}

// Material icons font

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material-icons-v50.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}