@charset "UTF-8";

#submit-note-list {
contain: content;
display: flex;
justify-content: start;
position: relative;
align-items: center;
width: 96vw;
max-width: 480px;
height: calc(720px * var(--upper-staff-scaling));
margin: 0.5rem auto;
border-radius: 1rem;
background-color: var(--staff-base-color);
background-image: var(--staff-url);
background-size: calc(200px * var(--upper-staff-scaling)) auto;
background-repeat: repeat-x;
background-position: center;
overflow: scroll hidden;
-webkit-user-select: none;
user-select: none;
transition: .25s;
}

#submit-note-list::before {
content: "";
background-image: var(--treble-clef-url);
background-repeat: no-repeat;
width: calc(92px * var(--upper-staff-scaling));
height: calc(260px * var(--upper-staff-scaling));
max-width: calc(92px * var(--upper-staff-scaling) + 1rem);
margin: 0 0 0 6px;
flex-shrink: 0;
flex-grow: 1;
justify-self: start;
}


#submit-note-list li {
position: relative;
top: 0px;
width: calc(120px * var(--upper-staff-scaling));
height: calc(133px * var(--upper-staff-scaling));
background-color: transparent;
margin: 0;
color: rgba(0,0,0,0);
flex-shrink: 0;
flex-grow: 2;
max-width: 20%;
transition: .25s;
}

#submit-note-list li:has(.accidental) {
margin-left: calc(3rem * var(--upper-staff-scaling));
}

#submit-note-list .whole-note {
position: absolute;
top: calc(50% - calc(40px * var(--upper-staff-scaling) / 2));
left: calc((120px - 72px) * var(--upper-staff-scaling));
width: calc(72px * var(--upper-staff-scaling));
height: calc(40px * var(--upper-staff-scaling));
z-index: 1;
}

#submit-note-list li:active .whole-note {
transform: scale(0.9);
}

#submit-note-list .accidental {
position: absolute;
left: 0;
width: calc(36px * var(--upper-staff-scaling));
height: calc(108px * var(--upper-staff-scaling));
}


#submit-note-list li.current .whole-note use,
#submit-note-list li.current .accidental use {
fill: var(--accent-color);
}

#submit-note-list li.sharp .accidental {
top: calc(50% - calc(108px * var(--upper-staff-scaling) / 2));
width: calc(36px * var(--upper-staff-scaling));
height: calc(108px * var(--upper-staff-scaling));
}

#submit-note-list li.flat .accidental {
top: calc(50% - calc(133px * var(--upper-staff-scaling) / 2));
width: calc(32px * var(--upper-staff-scaling));
height: calc(133px * var(--upper-staff-scaling));
}

#submit-note-list li.natural .accidental {
top: calc(50% - calc(104px * var(--upper-staff-scaling) / 2));
left: 2px;
width: calc(24px * var(--upper-staff-scaling));
height: calc(104px * var(--upper-staff-scaling));
}

#submit-note-list .list-ledger-line {
position: absolute;
top: 0;
margin-top: calc(66px *  var(--upper-staff-scaling));
left: calc(120px * var(--upper-staff-scaling) - 86px * var(--upper-staff-scaling));
width: calc(96px * var(--upper-staff-scaling));
height: calc(4px * var(--upper-staff-scaling));
}

#submit-note-list .note-label {
background: rgba(0 0 0 / 0.5);
color: rgb(255 255 255);
position: absolute;
font-size: 0.75rem;
font-weight: bold;
text-align: center;
border-radius: 1rem;
width: calc(10rem * var(--upper-staff-scaling));
margin: 0 auto;
padding: 0 calc(0.4rem * var(--upper-staff-scaling));
display: none;
}

#submit-note-list li.active .note-label {
display: block;
}

#submit-note-list li:active .note-label {
background-color: rgba(0 0 0 / 0.75);
}

#submit-note-list li.current .note-label {
display: block;
background: var(--accent-color);
}

#submit-note-list.tremolo {

}

#submit-note-list.tremolo li#tremolo-beam {
position: absolute;
width: auto;
max-width: none;
height: calc(64px * var(--upper-staff-scaling));
inset: 0 calc(20% + 9px * var(--upper-staff-scaling)) 0 calc(360px * var(--upper-staff-scaling));
margin: auto 0;
background-color: rgb(0 0 0);
clip-path: polygon(
0 0, 100% 0, 100% 25%, 0 25%,
0 37.5%, 100% 37.5%, 100% 62.5%, 0 62.5%,
0 75%, 100% 75%, 100% 100%, 0 100%);
}

.tremolo:has(#submit-note-1 .accidental) #tremolo-beam {
left: calc(420px * var(--upper-staff-scaling));
}

.tremolo:has(#submit-note-2 .accidental) #tremolo-beam {
right: calc(20% + 64px * var(--upper-staff-scaling));
}


#submit-note-list.tremolo li {

}

#submit-note-list.tremolo #submit-note-1 {

}


#submit-note-list.tremolo #submit-note-2 {
margin-left: auto;
}

#submit-note-list.tremolo #submit-note-2::before {

}

#submit-note-list.tremolo li.current .whole-note use,
#submit-note-list.tremolo li.current .accidental use {
fill: rgb(0 0 0);
}