labyrinth-frontend/src/app/cell.css

.solution {
    background-color: var(--color-maze-cell-solution);
}

.solution:hover {
    background-color: var(--color-maze-cell-solution-highlight);
}

.top {
    border-top-color: var(--color-maze-border);
}

.right {
    border-right-color: var(--color-maze-border);
}

.bottom {
    border-bottom-color: var(--color-maze-border);
}

.left {
    border-left-color: var(--color-maze-border);
}

.userSELF {
    background: radial-gradient(
            ellipse 16% 16% at center,
            var(--color-maze-cell-user) 0,
            var(--color-maze-cell-user) 100%,
            #0000 100%
    );
}

.userSELF:hover {
    background: radial-gradient(
            ellipse 33% 33% at center,
            var(--color-maze-cell-user) 0,
            var(--color-maze-cell-user) 80%,
            #0000 100%
    );
}

.marker {
    display: inline-block;
    position: absolute;
}

.marker:hover {
    background: #fc08;
}

.userUP .marker.UP {
    height: 50%;
    width: 100%;
    background: linear-gradient(
            90deg,
            #0000 0,
            #0000 33%,
            var(--color-maze-cell-user) 33%,
            var(--color-maze-cell-user) 66%,
            #0000 66%,
            #0000 100%
    );
}

.userRIGHT .marker.RIGHT {
    height: 100%;
    width: 50%;
    left: 50%;
    background: linear-gradient(
            0deg,
            #0000 0,
            #0000 33%,
            var(--color-maze-cell-user) 33%,
            var(--color-maze-cell-user) 66%,
            #0000 66%,
            #0000 100%
    );
}

.userDOWN .marker.DOWN {
    height: 50%;
    width: 100%;
    top: 50%;
    background: linear-gradient(
            90deg,
            #0000 0,
            #0000 33%,
            var(--color-maze-cell-user) 33%,
            var(--color-maze-cell-user) 66%,
            #0000 66%,
            #0000 100%
    );

}

.userLEFT .marker.LEFT {
    height: 100%;
    width: 50%;
    background: linear-gradient(
            0deg,
            #0000 0,
            #0000 33%,
            var(--color-maze-cell-user) 33%,
            var(--color-maze-cell-user) 66%,
            #0000 66%,
            #0000 100%
    );
}