/* Copyright (c) 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

body {
  height: calc(100% - 12px);
  overflow: auto;
}

html {
  height: 100%;
}

.key-down,
.key-up {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 2px;
  margin-right: 2px;
}

.key-up {
  background-color: #DFD;
}

.key-up::before {
  content: "-";
}

.key-down {
  background-color: #FDD;
}

.key-down::before {
  content: "+";
}

.key-down.unreleased {
  background-color: #F77;
}

.key-down.unreleased::before {
  content: "!";
}

.chord-div {
  margin-top: 8px;
}

.chord-div:not(.all-keys-released)::after {
  content: "..."
}

.chord-div.all-keys-released::after {
  content: " \2714";  /* tick */
  color: green;
}

.chord-div.some-keys-still-pressed::after {
  content: " \2716";  /* cross */
  color: red;
}