/* ==========================================
   PATHFINDING GRID
========================================== */

.pathfinding-grid {

    display: grid;

    justify-content: center;

    align-content: center;

    min-height: 500px;

    gap: 1px;

    overflow: auto;

    padding: 0.5rem;

    touch-action: none;
}

/* ==========================================
   GRID CELL
========================================== */

.grid-cell {

    width: 25px;

    height: 25px;

    background: white;

    border: 1px solid #dbe2ea;

    cursor: pointer;

    user-select: none;

    will-change:
        background-color,
        transform;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

/* ==========================================
   CELL STATES
========================================== */

.grid-cell.start {

    background: #16a34a;
}

.grid-cell.end {

    background: #dc2626;
}

.grid-cell.wall {

    background: #1e293b;
}

.grid-cell.visited {

    background: #60a5fa;
}

.grid-cell.frontier {

    background: #f59e0b;
}

.grid-cell.path {

    background: #8b5cf6;
}

/* ==========================================
   HOVER EFFECTS
========================================== */

@media (hover: hover) {

    .grid-cell:hover {

        transform: scale(1.05);
    }

}

/* ==========================================
   DARK MODE
========================================== */

body.dark .grid-cell {

    background: #1e293b;

    border-color: #475569;
}

body.dark .grid-cell.start {

    background: #16a34a;
}

body.dark .grid-cell.end {

    background: #dc2626;
}

body.dark .grid-cell.wall {

    background: #020617;
}

body.dark .grid-cell.visited {

    background: #3b82f6;
}

body.dark .grid-cell.frontier {

    background: #f59e0b;
}

body.dark .grid-cell.path {

    background: #8b5cf6;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1023px) {

    .pathfinding-grid {

        min-height: 420px;
    }

    .grid-cell {

        width: 22px;

        height: 22px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .pathfinding-grid {

        min-height: 350px;

        padding: 0.25rem;
    }

    .grid-cell {

        width: 18px;

        height: 18px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .pathfinding-grid {

        min-height: 280px;
    }

    .grid-cell {

        width: 15px;

        height: 15px;
    }

}