// Custom Elements

html, body
  height: 100%

body
  display: flex
  flex-direction: column

.footer
  margin-top: auto
  width: 100%
  flex-shrink: 0
  bottom: 0
  overflow: hidden

#lg-title, #lg-subtitle
  color: findColorInvert($body-background-color)

.has-background-danger
  .title, .subtitle, p, a
    color: findColorInvert($danger)

.footer p, a
  color: findColorInvert($body-background-color)

.navbar, .navbar-menu, .navbar-brand, .navbar-tabs
  background-color: $body-background-color

.navbar-item
  color: findColorInvert($body-background-color)

a.navbar-item:hover
  color: $lg-btn-submit
  background-color: transparent

.button.lg-btn-submit
  background-color: $lg-btn-submit
  border-color: transparent
  color: findColorInvert($lg-btn-submit)

.tag.lg-tag-loctitle
  background-color: $lg-tag-loctitle
  color: findColorInvert($lg-tag-loctitle)

.tag.lg-tag-cmd
  background-color: $lg-tag-cmd
  color: findColorInvert($lg-tag-cmd)
  font-family: $family-monospace

.tag.lg-tag-cmdtitle
  background-color: $lg-tag-cmdtitle
  color: findColorInvert($lg-tag-cmdtitle)
  font-family: $family-monospace

.tag.lg-tag-loc
  background-color: $lg-tag-loc
  color: findColorInvert($lg-tag-loc)

.progress.lg-progressbar:indeterminate
    background-image: linear-gradient(to right,$lg-progressbar 30%,$grey-lighter 30%)

.message-body pre
  background-color: transparent!important

.query-output
  font-family: $family-monospace
  font-size: 0.95em
  width: 100%
  -webkit-overflow-scrolling: touch
  overflow-x: auto
  white-space: pre

.dropdown-content.lg-help
  width: 24rem

.dropdown-content.lg-help-mobile
  width: 20rem

.icon.lg-icon-help
  color: $lg-btn-submit

#ipprefix::-webkit-input-placeholder
  font-family: $family-sans-serif

#ipprefix:-ms-input-placeholder
  font-family: $family-sans-serif

#ipprefix:-moz-placeholder
  font-family: $family-sans-serif

#ipprefix::-moz-placeholder
  font-family: $family-sans-serif