@import "color-preset/material.html";
@import "../vars.css";
@import "../mixins.css";

.dark {
  background-color: black;
  color: #ccc;

  & pre {
    background-color: black;
    padding: 0;
    border: none;
    & code {
      color: $cyan;
    }
  }

  & h1 a,
  & h2 a,
  & h3 a,
  & h4 a,
  & h5 a {
    color: #ccc;
  }

  & strong,
  & code {
    color: white;
  }

  & code {
    font-weight: 100;
  }

  /**
   * table
   */
  & table {
    color: #ccc;
  }
  & table td,
  & table th {
    border-color: #444;
  }

  & table tbody td:first-child {
    color: white;
  }

  /**
   * Form
   */
  & .form-group {
    & label {
      color: #ccc;
      border-color: $light-grey;
    }
    &.form-textarea label:after {
      background-color: black;
    }
  }

  & .form-control {
    color: #ccc;
    border-color: $light-grey;
    &:focus {
      border-color: #ccc;
      color: #ccc;
    }
  }

  & textarea.form-control {
    color: #ccc;
  }

  /**
   * Card
   */
  & .card {
    border-color: $light-grey;
    & .card-header {
      background-color: transparent;
      color: #ccc;
      border-bottom: 1px solid $light-grey;
    }
  }

  /**
   * Buttons
   */
  & .btn.btn-ghost.btn-default {
    @mixin button-ghost #ababab, #9c9c9c;
  }

  & .btn.btn-ghost {
    @mixin buttons-ghost-dark $grey-300, $blue-300, $green-300, $cyan-300, $red-300, $orange-300;
  }

  /**
   * Holders
   */
  & .placeholder,
  & .avatarholder {
    background-color: transparent;
    border-color: #333;
  }

  /**
   * Menu
   */
  & .menu {
    & .menu-item {
      color: #ccc;
      border-color: $light-grey;

      &:hover, &.active {
        color: white;
        border-color: #ccc;
      }
    }
  }

  & .modal .modal-content {
    border-radius: .6em;
    box-shadow: 0 0 6px 3px #ccc;
    background: black;
    color: white;
  }
}