body {
    background-color: var(--primary-bg-color);
    color: var(--primary-color);
}

:root {
    --primary-bg-color: #111;
    --selected-row-bg-color: #333;
    --primary-color: #ccc;
    --instrument-color: #695cff;
    --velocity-color: #849dff;
    --command-type-color: var(--primary-color);
    --command-value-color: #999;
    --counter-color-primary: #888;
    --counter-color-secondary: #555;
    --tracker-font-size: 12pt;
    --tracker-font-family: Sixtyfour,Courier,fixed-width;
}

@font-face {
    font-family: 'Sixtyfour';
    src: url("sixtyfour.ttf");
}

.tracker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    font-size: var(--tracker-font-size);
    font-family: var(--tracker-font-family);

    > .tracker-row:nth-child(4n+1) {
        .counter, .counter input {
            color: var(--counter-color-secondary);
        }
    }

    .tracker-row {
        display: flex;
        flex-shrink: 1;
        border: solid 2px transparent;

        &:has(.selected) {
            border-color: var(--selected-row-bg-color);
        }

        div {
            background-color: var(--primary-bg-color);
        }

        div > input {
            &:focus {
                outline: none;
            }
            font-family: var(--tracker-font-family);
            background-color: var(--primary-bg-color);
            color: var(--primary-color);
            font-size: var(--font-size);
            padding: 0;
            border: 0;
        }

        .counter, .counter input {
            width: 2ch;
            color: var(--counter-color-primary);

            border: 0 solid var(--counter-color-secondary);
            border-right-width: .3em;
            padding-right: .4em;
            margin-right: .4em;
        }

        .note, .note input {
            width: 3ch;
        }

        .instrument, .instrument input {
            width: 2ch;
            color: var(--instrument-color);
        }

        .velocity, .velocity input {
            width: 2ch;
            color: var(--velocity-color);
        }
        .command-type, .command-type input {
            width: 1ch;
            color: var(--command-type-color);
        }
        .command-value, .command-value input {
            width: 2ch;
            color: var(--command-value-color);
        }
    }
}