.map-custom-control {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    background-color: #fff;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    position: absolute;
    right: 10px;
    border-radius: 4px;
    transition: background-color .25s ease;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

    .map-custom-control.fullscreen-control {
        margin-top: 12px;
    }

    .map-custom-control.routes-control {
        margin-top: 64px;
    }

    .map-custom-control.interest-point-control {
        margin-top: 116px;
    }

    .map-custom-control.layers-control {
        margin-top: 168px;
    }

    .map-custom-control.settings-control {
        margin-top: 220px;
    }

.map-custom-control:checked {
    background-color: var(--bs-primary);
}

.map-custom-control::before {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

    .map-custom-control.fullscreen-control::before {
        background-image: url("/_content/Influunt.Web.Base/icons/fullscreen-expand.svg");
        width: 25px;
        height: 25px;
    }

    .map-custom-control.fullscreen-control:checked::before {
        background-image: url("/_content/Influunt.Web.Base/icons/fullscreen-selected.svg");
        width: 25px;
        height: 25px;
    }

    .map-custom-control.routes-control::before {
        background-image: url("/_content/Influunt.Web.Base/icons/sign-turn-slight-right.svg");
        width: 25px;
        height: 25px;
    }

    .map-custom-control.routes-control:checked::before {
        background-image: url("/_content/Influunt.Web.Base/icons/sign-turn-slight-right-selected.svg");
        width: 25px;
        height: 25px;
    }

    .map-custom-control.interest-point-control::before {
        background-image: url("/_content/Influunt.Web.Base/icons/geo-fill.svg");
        width: 15px;
        height: 25px;
    }

    .map-custom-control.interest-point-control:checked::before {
        background-image: url("/_content/Influunt.Web.Base/icons/geo-fill-selected.svg");
        width: 15px;
        height: 25px;
    }

    .map-custom-control.layers-control::before {
        background-image: url("/_content/Influunt.Web.Base/icons/layers.svg");
        width: 25px;
        height: 20px;
    }

    .map-custom-control.layers-control:checked::before {
        background-image: url("/_content/Influunt.Web.Base/icons/layers-selected.svg");
        width: 25px;
        height: 20px;
    }

    .map-custom-control.settings-control::before {
        background-image: url("/_content/Influunt.Web.Base/icons/settings.svg");
        width: 25px;
        height: 25px;
    }

    .map-custom-control.settings-control:checked::before {
        background-image: url("/_content/Influunt.Web.Base/icons/settings-selected.svg");
        width: 25px;
        height: 25px;
    }