/* ---------------------------------- *\
   #BASE
\* ---------------------------------- */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ---------------------------------- *\
   #COMPOSITION
\* ---------------------------------- */

/**
 * View
 */
.view {
  display: none;
}

.view:target {
  display: block;
  animation: fadeIn 0.3s;
}

.view:last-child {
  display: block;
}

.view:target~* {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------------------------------- *\
   #BLOCKS
\* ---------------------------------- */

/**
 * Piano roll
 */

.piano-roll {
  background-color: black;
}

.piano-roll-key {
  cursor: pointer;
  outline: none;
  fill: currentColor;
}

.piano-roll [aria-pressed="true"],
.piano-roll-key:focus {
  color: var(--color-primary);
}

.piano-roll-key--natural {
  color: white;
}

.piano-roll-key--accidental {
  color: black;
}