.mobile #minimap {

    grid-template-columns: 1fr;
    grid-template-rows: 1fr var(--mobile-element-height);
    grid-template-areas: "image"
        "toolbar";

    width: 100vw;
    min-width: 0px;
    max-height: 100vh;

    left: 0px;

    border-radius: 0;

}



.mobile #minimap.enabled {

    opacity: 1;
    margin-bottom: var(--outside-offset);

}




.mobile #minimap .minimap-image {

    border-radius: 0;

}



.mobile #minimapToggle {

    display: none;

}



.mobile #minimapToggle .icon {

    position: absolute;

    width: var(--mobile-icon-size);
    height: var(--mobile-icon-size);

}



.mobile #minimap #minimapCloseIcon .icon {

    width: var(--mobile-icon-size);
    height: var(--mobile-icon-size);
    margin: var(--icon-margin);

}



/* MOBILE TOOLBAR */

.mobile #minimap-toolbar {

    grid-area: toolbar;

    display: grid;
    gap: 0;
    grid-template-rows: var(--mobile-element-height);
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "northElement zoomOut zoomIn close";

    width: 100vw;
    height: var(--mobile-element-height);

    left: 0;
    right: unset;
    top: unset;

    border-radius: 0;

}



.mobile #minimap-toolbar .northElement {

    grid-area: northElement;

}



.mobile #minimap-toolbar #zoom-out {

    grid-area: zoomOut;

}



.mobile #minimap-toolbar #zoom-in {

    grid-area: zoomIn;

}



.mobile #minimap-toolbar #minimapCloseIcon {

    grid-area: close;

}



.mobile #minimap-toolbar .icon {

    width: var(--mobile-icon-size);
    max-width: var(--mobile-icon-size);
    height: var(--mobile-icon-size);

}