TrainsAndRoads/web/src/pages/game/components/BoardCell.scss

.cell {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-radius: 10%;

    .piece {
        border-radius: 10%;
        position: relative;

        &:nth-child(2) {
            top: -20px;
        }

        &:nth-child(3) {
            top: -40px;
        }

        &.rotate-90 {
            transform: rotate(-90deg);
        }

        &.rotate-180 {
            transform: rotate(180deg);
        }

        &.rotate-270 {
            transform: rotate(90deg);
        }
    }

    &.house {
        background-color: blue;
    }

    &.university {
        background-color: orange;
    }

    &.factory {
        background-color: grey;
    }

    .exit:has(.exit-road) {
        border: solid black;
        border-width: 0 1px;

        .exit-road {
            margin: auto;
            width: 0;
            height: 100%;
            border: dashed black;
            border-width: 0 1px;
            transform: translate(calc(50% - 1px));
        }
    }
    
    .exit:has(.exit-road) {
        border: solid black;
        border-width: 0 1px;

        .exit-road {
            margin: auto;
            width: 0;
            height: 100%;
            border: dashed black;
            border-width: 0 1px;
            transform: translate(calc(50% - 1px));
        }
    }

    .exit:has(.exit-rail) {
        border-width: 0 1px;

        .exit-rail {
            margin: auto;
            width: 0;
            height: 100%;
            border: solid black;
            border-width: 0 1px;
            transform: translate(calc(50% - 1px));
        }
    }

    .exit:has(.exit-ambivalent) {
        border-width: 0 1px;
        border-style: dotted;

        .exit-ambivalent {
            margin: auto;
            width: 0;
            height: 100%;
            border: dotted black;
            border-width: 0 1px 0 0;
            transform: translate(calc(50%));
        }
    }
}

.exit {
    position: relative;
    width: 20px;
    height: 20px;

    &:has(.exit-north) {
        left: 50%;
        transform: translate(calc(-50% - 1px), -100%);
    }

    &:has(.exit-south) {
        left: 50%;
        top: 100%;
        transform: translate(calc(-50% - 1px), 0%);
    }

    &:has(.exit-east) {
        left: 100%;
        top: 50%;
        transform: rotate(90deg) translate(-50%, 0);
    }

    &:has(.exit-west) {
        left: 0%;
        top: 50%;
        transform: rotate(90deg) translate(-50%, 100%);
    }

    &:has(.exit-north), &:has(.exit-south) {
        + .exit:has(.exit-east) {
            left: 100%;
            transform: rotate(90deg) translate(-150%, 0);
        }
    }

    &:has(.exit-north), &:has(.exit-south) {
        + .exit:has(.exit-west) {
            top: 50%;
            transform: rotate(90deg) translate(-150%, 100%);
        }
    }
}