.grid-marker {
    --offset: 8px;

    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 200;
    width: max-content;
    position: relative;
    display: flex;

    &.grid-marker_negative_true:before {
        content: '–';
        position: absolute;
        top: 0;
        display: block;
        height: 100%;
        margin-top: -2px;
        margin-left: -0.5em;
    }

    &.grid-marker_vertical_false {
        margin-top: var(--offset);

        transform: translateX(-50%);
    }

    &.grid-marker_vertical_true {
        margin-left: var(--offset);

        transform: translateY(-50%);

        &.grid-marker_negative_true:before {
            position: static;
            margin-top: -1px;
            margin-left: 0;
        }
    }

    &.grid-marker_center_true {
        margin-left: var(--offset);

        transform: none;
    }
}