/* Beschriftung der Messungen im Kartenausschnitt (chatMapPicker.js). Halbtransparent, damit die
   Fläche darunter sichtbar bleibt. Feste Farben statt Palette, die Beschriftung liegt auf der Karte
   und muss auch im dunklen Design hell bleiben, wie im gerenderten Bild. */
.leaflet-tooltip.aura-measure-label {
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.72);
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: #212121;
    font: 11px/1.35 sans-serif;
}

.leaflet-tooltip.aura-measure-label.is-selected {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 12px;
}

/* Stift: ohne Kartenziehen setzt Leaflet touch-action pan-x pan-y, der Browser würde dann die
   Seite verschieben und den Strich abbrechen. Zwei-Finger-Zoom macht Leaflet selbst. */
.leaflet-container.is-pen {
    touch-action: none;
}

/* Text auf der Karte, wie im Bild Schrift mit weißem Rand, mittig auf dem gesetzten Punkt */
.aura-map-text-icon {
    background: none;
    border: 0;
}

.aura-map-text {
    position: relative;
    box-sizing: border-box;
    /* In em, damit der Abstand zum Rahmen mit der Schrift wächst */
    padding: 0.15em 0.4em;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transform-origin: center;
    white-space: pre;
    text-align: center;
    font: 600 14px/1.2 sans-serif;
    color: #212121;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    cursor: move;
}

/* Ausgewählter Text wie ein Textfeld in Office: dünner Rahmen direkt am Text, Anfasser auf den
   Ecken, Dreh-Anfasser mit Steg über der Mitte. Maße der Anfasser in px, sie wachsen nicht mit. */
.aura-map-text.is-selected {
    outline: 1px solid #1976d2;
}

.aura-map-text.is-editing {
    cursor: text;
    background: rgba(255, 255, 255, 0.85);
}

.aura-map-text.is-editing .aura-map-text-content {
    outline: none;
}

.aura-map-text-handle {
    --handle: 9px;
    position: absolute;
    width: var(--handle);
    height: var(--handle);
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #1976d2;
    touch-action: none;
}

.aura-map-text-handle.is-nw { left: calc(var(--handle) / -2); top: calc(var(--handle) / -2); cursor: nwse-resize; }
.aura-map-text-handle.is-ne { right: calc(var(--handle) / -2); top: calc(var(--handle) / -2); cursor: nesw-resize; }
.aura-map-text-handle.is-se { right: calc(var(--handle) / -2); bottom: calc(var(--handle) / -2); cursor: nwse-resize; }
.aura-map-text-handle.is-sw { left: calc(var(--handle) / -2); bottom: calc(var(--handle) / -2); cursor: nesw-resize; }

.aura-map-text-rotate {
    --handle: 10px;
    position: absolute;
    left: 50%;
    top: calc(-14px - var(--handle));
    width: var(--handle);
    height: var(--handle);
    margin-left: calc(var(--handle) / -2);
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #1976d2;
    cursor: grab;
    touch-action: none;
}

/* Steg vom Dreh-Anfasser zum Rahmen */
.aura-map-text-rotate::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 14px;
    margin-left: -0.5px;
    background: #1976d2;
}

.leaflet-touch .aura-map-text-handle,
.leaflet-touch .aura-map-text-rotate {
    --handle: 16px;
}

/* Beschriftung an der Nadel leicht durchscheinend, damit die Karte darunter erkennbar bleibt */
.leaflet-tooltip.aura-marker-label {
    background: rgba(255, 255, 255, 0.75);
    border-color: transparent;
}

.leaflet-tooltip-right.aura-marker-label::before {
    border-right-color: rgba(255, 255, 255, 0.75);
}

.leaflet-tooltip.aura-measure-label::before {
    display: none;
}