/* =========================================================
   TFG MAP TACTICAL GRID
   ========================================================= */

.tfg-grid-control {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;

    padding: 4px 8px;

    background:
        rgba(8, 32, 49, .88);

    border:
        1px solid
        rgba(118, 186, 211, .42);

    border-radius: 6px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .22);

    color: #eefaff;

    font-size: 11px;
    font-weight: 700;
}


.tfg-grid-toggle {
    appearance: none;

    min-height: 25px;

    padding: 3px 8px;

    border: 0;
    border-radius: 5px;

    background: #155b78;
    color: #ffffff;

    font: inherit;

    cursor: pointer;
}


.tfg-grid-toggle[aria-pressed="false"] {
    background: #384956;

    opacity: .82;
}


.tfg-grid-size {
    white-space: nowrap;

    opacity: .92;
}


/* =========================================================
   GRID MODE: NM / METRIK
   ========================================================= */

.tfg-grid-mode {
    appearance: none;

    min-height: 25px;

    padding:
        3px 24px
        3px 8px;

    border:
        1px solid
        rgba(126, 194, 220, .30);

    border-radius: 5px;

    background-color:
        rgba(18, 63, 84, .92);

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #d8f3ff 50%
        ),
        linear-gradient(
            135deg,
            #d8f3ff 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 10px) 10px,
        calc(100% - 6px) 10px;

    background-size:
        4px 4px,
        4px 4px;

    background-repeat:
        no-repeat;

    color: #ffffff;

    font: inherit;

    cursor: pointer;
}


.tfg-grid-mode:focus {
    outline:
        1px solid
        rgba(121, 201, 235, .70);

    outline-offset: 1px;
}


.tfg-grid-mode option {
    background: #103447;

    color: #ffffff;
}


@media (max-width: 768px) {

    .tfg-grid-control {
        margin-left: 10px !important;
        margin-bottom: 7px !important;

        font-size: 10px;
    }


    .tfg-grid-toggle {
        min-height: 23px;

        padding: 2px 7px;
    }


    .tfg-grid-mode {
        min-height: 23px;

        padding:
            2px 22px
            2px 7px;

        background-position:
            calc(100% - 9px) 9px,
            calc(100% - 5px) 9px;
    }
}

/* =========================================================
   TFG GRID EMBEDDED INSIDE LAYER CONTROL V1
   ========================================================= */

.tfg-map-layer-grid-host
.tfg-grid-control {
    width: 100%;

    min-height: 34px;

    margin: 0 !important;
    padding: 6px;

    display: grid;

    grid-template-columns:
        auto
        minmax(58px, auto)
        minmax(0, 1fr);

    align-items: center;

    gap: 6px;

    border:
        1px solid
        rgba(118, 186, 211, .20);

    border-radius: 6px;

    background:
        rgba(10, 43, 62, .74);

    box-shadow: none;

    box-sizing: border-box;
}

.tfg-map-layer-grid-host
.tfg-grid-toggle {
    min-height: 27px;
}

.tfg-map-layer-grid-host
.tfg-grid-mode {
    width: 100%;

    min-width: 0;

    min-height: 27px;
}

.tfg-map-layer-grid-host
.tfg-grid-size {
    min-width: 0;

    overflow: hidden;

    font-size: 9px;

    text-align: right;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Ketika dipindah dari container Leaflet bottom-left,
 * kontrol tidak lagi memerlukan margin bawaan Leaflet.
 */
.tfg-grid-control-embedded {
    float: none !important;

    clear: none !important;
}

@media (max-width: 640px) {

    .tfg-map-layer-grid-host
    .tfg-grid-control {
        grid-template-columns:
            auto
            68px;

        gap: 5px;
    }

    .tfg-map-layer-grid-host
    .tfg-grid-size {
        grid-column: 1 / -1;

        text-align: left;
    }
}

/* TFG GRID EMBEDDED INSIDE LAYER CONTROL V1 END */