$actionBarHeight: 26px;
$tabsHeight: 32px;

$sansSerif: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;

@mixin userSelect($val){
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

@mixin transition($transition) {
  transition: $transition;
  -o-transform: $transition;
  -moz-transform: $transition;
  -webkit-transition: $transition;
}

@mixin theme( $background, $dark, $darker, $darkest, $text, $highlight, $darkHighlight, $danger ){

  color: $text;
  background-color: $background;

  // Base

  a {
    color: $text;

    &:hover { color: $highlight; }
  }

  .nav a.is-selected {
    color: $darkest;
  }

  // Forms

  .input {
    background-color: $dark;

    input, textarea { color: $text; }

    &.is-focused .input-shell { border-color: $highlight; }

    &.is-invalid .input-shell { border-color: $danger; }
  }

  .distribute-highlight .icon { color: $highlight; }

  // Action Bar

  .button {
    background-color: $dark;

    &:hover {
      background-color: $darker;
      color: $text;
    }

    &.primary {
      background-color: $highlight;
      color: #fff;

      &:hover {
        background-color: $darkHighlight;
        color: #fff;
      }
    }
  }

  .button-clear-guides:hover {
    background-color: $danger;
    color: #fff;
  }

  // Sets

  .set-list-set {
    background-color: $dark;

    &:hover {
      background-color: $darker;

      a { color: $text; }
    }
  }

  .set-list-set.is-selected {
    background-color: $highlight;
    color: #fff;

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

  .dropdown.is-active .dropdown-button {
    background-color: $highlight;

    &:after { background-color: $highlight; }

    &:hover, &:hover:after { background-color: $darkHighlight ; }
  }

  .dropdown-button {
    background-color: $dark;

    &:before { border-color: $text transparent transparent; }

    &:hover, &:hover:after { background-color: $darker; }

    &:hover { color: $text; }

    &:after {
      background-color: $dark;
      border-left: 2px solid $background;
    }
  }

  .dropdown-item {
    background-color: $darker;
    border-top: 2px solid $background;

    &:hover {
      color: $text;
      background-color: $darkest;
    }
  }

  .alert-body {
    background-color: $background;
  }
}
