/* component/piano-input/piano-input.css */
piano-input {
  display: block;
  position: relative;
  --white-key-color: white;
  --white-key-active: #e0e0e0;
  --black-key-color: #222;
  --black-key-active: #555;
  --key-width: 40px;
  --key-height: 120px;
}
piano-input .piano-container {
  display: flex;
  position: relative;
  width: fit-content;
}
piano-input .key {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.05s;
  box-sizing: border-box;
}
piano-input .key.white {
  width: var(--key-width);
  height: var(--key-height);
  background-color: var(--white-key-color);
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
}
piano-input .key.white.active {
  background-color: var(--white-key-active);
}
piano-input .key.black {
  position: absolute;
  width: calc(var(--key-width) * 0.6);
  height: calc(var(--key-height) * 0.6);
  background-color: var(--black-key-color);
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  z-index: 1;
}
piano-input .key.black.active {
  background-color: var(--black-key-active);
}
/*# sourceMappingURL=piano-input-3KDXZ4QR.css.map */