$ten: 10px;
$blue: #00527D;
$darkBlue: #3298dc;
$lightCodeBackground: whitesmoke;
$lightCodeColor: #dbdbdb;
$darkBackground: #292929;
$darkCode: #4a4a4a;
$darkFooter: #272727;

html,
body {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.table {
  background: none;
}

body {
  background: $lightCodeBackground;
  color: $darkBackground;

  &.dark {
    background: $darkBackground !important;
    color: $lightCodeColor !important;

    h1 {
      color: $lightCodeColor !important;
    }

    a {
      &:focus,
      &:hover,
      &:active,
      &.is-active {
        color: $lightCodeColor !important;
      }
    }

    .label, .table, .table th, .box {
      color: $lightCodeColor !important;
    }

    .box {
      background: lighten($darkBackground, 5%) !important;
    }

    .item {
      a {
        color: $darkBlue !important;
      }
    }

    .input,
    .textarea,
    .select,
    .select select {
      &:after,
      &:focus,
      &:hover,
      &:active,
      &.is-active {
        border-color: $darkBlue !important;
      }
    }

    button.is-primary {
      background-color: $darkBlue !important;
    }

    .tabs li.is-active a {
      border-bottom-color: $darkBlue !important;
      color: $darkBlue !important;
    }

    code {
      background: $darkCode !important;
      color: $lightCodeColor !important;
    }

    footer {
      background: $darkFooter !important;

      a {
        color: $darkBlue !important;
      }
    }
  }
}

.app {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh;

  & > * {
    width: 100% !important;
    max-width: 100%;
  }
}

.dr-hidden {
  display: none !important;
}

a {
  &:focus,
  &:hover,
  &:active,
  &.is-active {
    color: $blue !important;
  }
}

.item {
  a {
    color: $blue !important;
  }
}

.input,
.textarea,
.select,
.select select {
  &:after,
  &:focus,
  &:hover,
  &:active,
  &.is-active {
    border-color: $blue;
  }
}

button.is-primary {
  background-color: $blue !important;
}

.tabs li.is-active a {
  border-bottom-color: $blue !important;
  color: $blue !important;
}

pre {
  padding: $ten;
  font-size: 1em;
}

code {
  background: $lightCodeBackground;
  color: $lightCodeColor;
}

.key {
  font-weight: bold;

  &.title,
  &.subtitle {
    font-size: unset;
    line-height: unset;
  }
}

.spaces {
  display: inline-block;
  width: 1.1em;
}

.spaced {
  margin-bottom: $ten * 2.5;
}

.textarea {
  height: $ten * 30;
}

.footer {
  .logo {
    width: $ten * 16;
  }

  a {
    color: $blue !important;
  }
}