/*===== VARIABLES CSS =====*/
:root {
    /*========== Cells ==========*/
    --cell-point-fill: steelblue;
    --cell-point-collinear: slateblue;
    --cell-point-not_removable: firebrick;
    --cell-border-valid: green;
    --cell-border-invalid: firebrick;
    --cell-stroke-light: black;
    --cell-stroke-dark: lightgrey;
    --cell-stroke-width: 1;
    --line-stroke: crimson;
    --line-stroke-width: 2;
}




/* points */
.cell>polygon {
    stroke: var(--cell-stroke-light);
    stroke-width: var(--cell-stroke-width);
}

.cell>polygon.collinear {
    fill: var(--cell-point-collinear);
}

.cell>circle {
    stroke: var(--cell-stroke-light);
    fill: var(--cell-stroke-light);
}



/* border */
.border>polygon {
    /* stroke: var(--cell-stroke-light); */
    stroke: none;
    fill-opacity: 20%;
    fill: var(--cell-border-valid);
}

.border>polygon.invalid {
    fill: var(--cell-border-invalid);
}

.border>polygon.collinear {
    fill: var(--cell-point-collinear);
    fill-opacity: 50%;
}

/*
@media (hover: hover) and (pointer: fine) 
used to prevent hover selector happening on
phones/tablets
*/
@media (hover: hover) and (pointer: fine) {
    .border>polygon.invalid:hover {
        /* fill: var(--cell-border); */
        fill-opacity: 1;
    }

    .border>polygon:hover {
        /* fill: var(--cell-border); */
        fill-opacity: 1;
    }
}


line {
    stroke: var(--line-stroke);
    stroke-width: var(--line-stroke-width);
    stroke-linecap: round;
}


/* Dark Mode for outline and dot */
div.dark .cell>polygon {
    stroke: var(--cell-stroke-dark);
}

div.dark .cell>circle {
    stroke: var(--cell-stroke-dark);
    fill: var(--cell-stroke-dark);
}



/* stop Bootstrap oddness after click */
.btn:disabled {
    border: none;
}