*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left;
  background-color: $body-bg;
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background-color: rgba($light, 0.8)
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: $gray-500;
  border: 1px solid transparent;
  background-clip: padding-box;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;

    i {
      float: right;

      &:before {
        transition: $transition-base;
        color: $gray-300;
      }
    }

    &.active {
      i {
        color: $green;

        &:before {
          color: $green;
        }
      }
    }
  }

  &.selectable li {
    transition: $transition-base;
    cursor: pointer;

    i {
      transition: $transition-base;
    }

    &:hover {
      background-color: $light;
    }

    &.active {
      background-color: $light;
    }
  }
}

.code {
  background-color: $light;

  * {
    color: $dark;
    font-family: 'Ubuntu Monospace', serif;
  }

  span {
    padding-left: 30px;
    display: block;
    position: relative;

    &:before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem !important;
    }

    &.debug {
      color: $success;

      &:before {
        @include icon-font($success);
        content: '\e902';
      }
    }

    &.info {
      color: $info;

      &:before {
        @include icon-font($info);
        content: '\e906';
      }
    }

    &.warning {
      color: $warning;

      &:before {
        @include icon-font($warning);
        content: '\e912';
      }
    }

    &.error {
      color: $primary;

      &:before {
        @include icon-font($primary);
        content: '\e903';
      }
    }

    &.panic {
      color: $danger;

      &:before {
        @include icon-font($danger);
        content: '\e912';
      }
    }
  }
}

h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
  margin-bottom: $headings-margin-bottom;
  font-weight: $font-weight-normal;
}

h1 {
  font-size: $h1-font-size;
  font-family: $font-family-base;
}

h2 {
  font-size: $h2-font-size;
  font-family: $font-family-base;
}

h3 {
  font-size: $h3-font-size;
  font-family: $font-family-base;
}

h4 {
  font-size: $h4-font-size;
  font-family: $font-family-base;
  font-weight: $font-weight-medium;
}

h5 {
  font-size: $h5-font-size;
  font-family: $font-family-base;
  font-weight: $font-weight-medium;
}

h6 {
  font-size: $h6-font-size;
  font-family: $font-family-base;
  font-style: italic;
}

.action {
  margin-right: 15px;
  font-size: $h6-font-size;
  font-family: 'Ubuntu Condensed', $font-family-base;
  text-transform: uppercase;
}

.navigation {
  color: $gray-600;

  a {
    color: $gray-600;
  }
}

.subtext {
  font-size: 0.8rem;
  color: $gray-700;
}

p, span, input, textarea, select, a, label {
  font-size: $font-size-base;
  font-family: 'Hind', $font-family-base;
}

a {
  color: $secondary;
  //text-decoration: underline;
  font-weight: bold;

  &:hover {
    opacity: 0.9;
  }
}

b {
  font-size: $font-size-base;
  font-family: 'Hind', $font-family-base;
  font-weight: $font-weight-bold;
}

.support {
  font-size: $font-size-base;
}

.code {
  font-size: $font-size-base;
  font-family: 'Ubuntu Monospace', $font-family-monospace;
}

textarea.code {
  border: 0;
}

button,
select,
input,
textarea {
  &:focus,
  &:active {
    outline: 0;
  }
}