.genobj, .sgenobj {
    cursor: move;
    user-select: none;
}

.picking .genobj.hilight .sgenobj {
    cursor: pointer;
}
.picking .genobj, .picking .sgenobj {
    cursor: default;
}

.genobj > .shape, .genobj > .points > * {
    position: absolute;
}


.genobj > .shape {
    background-color: var(--shape-color);
    
    transform-origin: 0 50%;
    overflow: hidden;

    transition: background-color ease-in-out .2s;
}
.genobj.hilight *, .genobj.picked * {
    transition: background-color ease-in-out .1s;
}
.genobj.hilight > .shape {
    background-color: white;
}
.genobj.picked > .shape {
    background-color: #ff4c4c;
}

.genobj > .shape > .textContainer {
    font-size: 10px;
    font-weight: bold;
    margin: auto;
    width: min-content;
}


/* Point */
.pointo > .shape, .genobj > .points > * {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
}
.genobj > .points > * {
    background-color: var(--point-color)
}
.pointo > .shape {
    background-color: rgb(86, 104, 163);
}
.piking .pointo > .shape {
    background-color: rgb(35, 44, 71);
}


/* Line */
.lineo > .shape {
    width: 100px;
    height: 10px;
}

/* Circle */
.circleo > .shape {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 10px solid var(--shape-color);
    background-color: transparent;

    transition: border-color ease-in-out .1s;
}

/* Degree */
/* #degreeRenderer {
    width: 100vw;
    height: 100vh;
}
#degreeRenderer * {
    --circumference: calc(var(--pi) * var(--radius) * 2);
}
#degreeRenderer > circle {
    stroke: white;
    stroke-width: 10px;
    fill: none;
    stroke-dasharray: var(--circumference);
} */