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

    .piece {
        border-radius: 10%;
        position: absolute;
        top: 0;

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

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

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

    .cell-type-icon {
        width: 25px;
        height: 25px;
        padding: 2px;
        margin: 2px;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.cell .exit {
    position: absolute;
    width: 20px;
    height: 20px;

    &: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));
        }
    }

    &: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));
        }
    }

    &: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%));
        }
    }
    &:has(.exit-north), &:has(.exit-south) {
        left: 50%;
    }

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

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

    &:has(.exit-east), &:has(.exit-west) {
        top: 50%;
    }

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

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