module.css

@import './fonts/jazz.css';
@import './classes/accidental.css';
@import './classes/stave.css';
@import './classes/bar.css';
@import './classes/clef.css';
@import './classes/timesig.css';
@import './classes/chord.css';
@import './classes/head.css';
@import './classes/ledge.css';
@import './classes/rest.css';
@import './classes/stem.css';
@import './classes/beam.css';
@import './classes/tail.css';
@import './classes/tie.css';
@import './classes/lyric.css';
@import './classes/svg.css';


*, ::before, ::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

.scribe {
    /* Metrics */
    --bar-line-size:     0.05rem;
    /* Compress column-gap below 800px viewport to fit more information
       on mobile (0.08vw becomes 0.04em at 800px viewport assuming no zoom). */
    --bar-column-gap:    min(0.08vw, 0.02em);
    --bar-padding-left:  0.3em;
    --bar-padding-right: 0.15em;
    /* Accidentals are aligned right and have the intervening column-gap, and
       the --head-margin-left, negated so this is the actual accidental-head gap. */
    --acci-margin-left:  0;
    --acci-margin-right: 0.125em;
    --head-margin-left:  0.125em;
    /*--head-margin-right: 0.05em;*/
    --stem-thickness:    0.03em;

    --safari-bar-mask-color: white;

    padding-left: var(--bar-line-size, 1px);

    display: block;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: 0;
}



.scribe.safari,
.safari .scribe {
    /* Bar lines, ::before and ::after on .bar, are placed outside of the bar
       so that the overlap overcomes bar to bar rounding errors in Safari,
       causing 1px white gap. But this means we need to pad the container by
       the same amount. */
    padding-right: var(--bar-line-size, 1px);
}

.scribe > .bar {
    flex: 1 1;
    /* Make bar lines overlap */
    margin-left: calc(-1 * var(--bar-line-size, 1px));
}

svg {
    fill: currentcolor;
    /*background-color: rgba(200, 180, 30, 0.5);*/
}

svg > path {
    fill: inherit;
}