/* START STYLES FOR THE MAP */

/*
    Hides the disabled EasyButton (for Leaflet) button.
    NOTE that on FF mobile, "!important" is mandatory, else "hover" makes it visible.
*/
.easy-button-button.disabled {
    display: none !important;
}

/* Used for buttons with text. We use a shared ID for all buttons needing it */
#easybutton-id-wide-width {
    width: 200px;
}

/* Used for the button that works like a drop down menu. We want to hide the border because it looks weird,
   as the first element is an icon and is narrow, while the other elements are wide. The border covers the
   whole rectangle, with lots of empty space next to the icon. */
.easy-button-hide-border {
    border-color: rgba(0,0,0,0) !important;
}

.mapDataTooltip {
    white-space: pre-wrap !important;
    width: max-content;
    max-width: 15rem;
}

/* Horizontally centered, by moving the left side of the element to the middle of the container,
   then moving its content to the left by 50% of its width */
.leaflet-center {
    left: 50%; 
    transform: translateX(-50%);
}

/* Container for the Opacity Slider on the map. */
.sliderContainer {
    background-color: #fff;
    text-align: center;
    margin-top: 2px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Properly align the label for the Opacity Slider. */
.sliderContainer label {
    padding-top: 7px;
    margin-bottom: -4px;
}

.sliderContainer:hover {
    background-color: #f4f4f4;
}

#slider {
    margin-left: 5px;
    height: 28px;
}

/* Hack to move the scale up, so that it's fully visible even if there's the logo of the map provider
    at the bottom left (we currently have "Google" on top of the lower scale). */
.leaflet-move-scale-up {
    margin-bottom: 26px !important;
}

/* Used in leaflet.LabelCircle.js */
.circleTip {
    box-shadow: none !important;
    background-color: unset !important; /* Example background color */
    border: unset !important;
    text-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 0.2em grey;
    margin-top: -8px;
}

/* Used with geoman. The button to click to finish moving points of a zone. */
.moveModeButton {
    z-Index: 1000;
    pointer-events: auto;
    margin-right: 10px !important;
}

/* Used with geoman. The button wrapper for both finish & cancel button. */
.button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Used in the map tooltips. Even if we use b or p, we do not want new lines. */
b._key_, p._text_, p._value_ {
    display: inline;
}

@media screen and (max-width: 250px), screen and (max-height: 250px) {
    /* Hide all controls on tiny screens. Mostly used for us as even phones have bigger screens. */
    .leaflet-control-container {
        display: none;
    }

    /* Tooltips on the map: do not show the "keys" like Battery, Temperature, ... by hiding "_key_" classes.
        Also remove other non values like "on" or "at" by hiding "_text_" classes. */
    .leaflet-tooltip ._key_, .leaflet-tooltip ._text_ {
        display: none;
    }

    /* Make content of tooltip smaller (font, line height & padding). */
    .leaflet-tooltip {
        font-size: .6rem;
        line-height: .6rem;
        padding: .1rem !important;
    }
}

/* Do not add an outline (ie a rectangle) when selecting a path. */
path.leaflet-interactive:focus {
    outline: none;
}

/* END STYLES FOR THE MAP */
#tooltipIcon {
    top: initial;
    right: initial;
    padding: 6px;
}

/* With MudBlazor, ul and ol don't have any style. Puts it back with this class. */
.force-list-style {
    list-style: inside none disc;
}

/* Styles previously from bootstrap & _reboot */
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol, ul {
    padding-left: 2rem;
}

img, svg {
    vertical-align: middle;
}

/* Make MudTooltip now too wide. */
.mud-tooltip.mud-tooltip-default {
    max-width: 350px;
    text-align: left;
}

/* Styles to manually show a tooltip on top of the RSSI power SVG.
    There's a fade in effect, no fade out like with MudBlazor.
    It reuses the same colors using MudBlazor variables. */
.svg-rssipower-tooltip {
    position: relative;
    display: inline-block;
}

    .svg-rssipower-tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -110%);
        color: var(--mud-palette-dark-text);
        background-color: var(--mud-palette-gray-darker);
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 0.8rem;
        pointer-events: none;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease-in-out;
        transition-delay: 0s;
    }

    .svg-rssipower-tooltip:hover::after {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s; /* fade-in immediately */
    }

    /* When hover is lost, remove visibility instantly */
    .svg-rssipower-tooltip:not(:hover)::after {
        visibility: hidden;
        opacity: 0; /* instantly hide */
        transition-delay: 0s; /* reset delay */
    }