:global(.eyeProtection) {
  :global(.fingering) {
    box-shadow: 0 -10px 10px var(--eye-background-color);
    background: var(--eye-background-color);
    &:global(.vertical){
      box-shadow: none!important;
    }
  }
}
.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;
  }

  background: #fff;
  &:global(.vertical) {
    top: 35px;
    left: 0;
    right: initial;
    &::before {
      display: none;
    }
  }
  &:global(.transverse) {
    > div {
      max-width: 60%;
      margin: auto;
    }
  }

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