
.fingering {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  box-sizing: border-box;
  z-index: 10;
  padding-top: 0;
  &:global(.vertical){
    box-shadow: none!important;
  }

  &:global(.vertical) {
    top: 35px;
    left: 0;
    right: initial;
    &::before {
      display: none;
    }
  }
  &:global(.transverse) {
    > div {
      max-width: 60%;
      margin: auto;
      // img {
      //   margin: 10px auto;
      //   height: 100%;
      //   width: 100% !important;
      //   max-width: 100% !important;
      //   max-height: 100% !important;
      // }
    }
  }

  :global(.substituteFinger) {
    background: url('./substituteFinger.svg') no-repeat center;
    background-size: contain;
    left: 0;
    color: transparent;
  }
}
