.tooltip {
    position: relative;
    cursor: help;
}

.tooltip:after {
    font-size: 0;
    position: absolute;
    transform: translateX(-50%);
    bottom: 1.5em;
    left:50%;
    border-radius: .5rem;
    line-height: initial;
    white-space: nowrap;
    background-color: var(--background-color--opaque);
    backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity .5s;
    z-index: 100;
}

.tooltip.tooltip--down:after {
    bottom: -2em;
}

.tooltip:hover:after {
    font-size: 20px;
    border: 4px solid var(--foreground-color--opaque);
    padding: 0 .5rem;
    opacity: 1;
}

@media screen and (max-width: 1000px) {
    .tooltip:hover:after {
        font-size: 16px;
    }
}

/* 1 */
.tooltip.wi-day-sunny:after {
    content: "Sonne";
}
.tooltip.wi-night-clear:after {
    content: "Mond";
}
/* 2 */
.tooltip.wi-day-sunny-overcast:after {
    content: "Sonne, leicht bewölkt";
}
.tooltip.wi-night-alt-partly-cloudy:after {
    content: "Mond, leicht bewölkt";
}
/* 3 */
.tooltip.wi-day-cloudy:after {
    content: "Sonne, bewölkt";
}
.tooltip.wi-night-alt-cloudy:after {
    content: "Mond, bewölkt";
}
/* 4 */
.tooltip.wi-cloud:after {
    content: "Wolken";
}
/* 5 */
.tooltip.wi-fog:after {
    content: "Nebel";
}
/* TODO 6
.tooltip.wi-day-sunny:after, .tooltip.wi-night-clear:after {
    content: "Nebel, Rutschgefahr";
}*/
/* 7 */
.tooltip.wi-sprinkle:after {
    content: "leichter Regen";
}
/* 8 */
.tooltip.wi-showers:after {
    content: "Regen";
}
/* 9 */
.tooltip.wi-rain:after {
    content: "starker Regen";
}
/* TODO 10
.tooltip.wi-day-sunny:after, .tooltip.wi-night-clear:after {
    content: "leichter Regen, Rutschgefahr";
}*/
/* TODO 11
.tooltip.wi-day-sunny:after, .tooltip.wi-night-clear:after {
    content: "starker Regen, Rutschgefahr";
}*/
/* 12 */
.tooltip.wi-rain-mix:after {
    content: "Regen, vereinzelt Schneefall";
}
/* 13 */
.tooltip.wi-sleet:after {
    content: "Regen, vermehrt Schneeefall";
}
/* TODO 14
.tooltip.wi-day-sunny:after, .tooltip.wi-night-clear:after {
    content: "leichter Schneefall";
}*/
/* 15 */
.tooltip.wi-snow:after {
    content: "Schneefall";
}
/* 16 */
.tooltip.wi-snow-wind:after {
    content: "starker Schneefall";
}
/* 17 */
.tooltip.wi-hail:after {
    content: "Wolken, (Hagel)";
}
/* 18 */
.tooltip.wi-day-sprinkle:after {
    content: "Sonne, leichter Regen";
}
.tooltip.wi-night-alt-sprinkle:after {
    content: "Mond, leichter Regen";
}
/* 19 */
.tooltip.wi-day-rain:after {
    content: "Sonne, starker Regen";
}
.tooltip.wi-night-alt-rain:after {
    content: "Mond, starker Regen";
}
/* 20 */
.tooltip.wi-day-rain-mix:after {
    content: "Sonne, Regen, vereinzelt Schneefall";
}
.tooltip.wi-night-alt-rain-mix:after {
    content: "Mond, Regen, vereinzelt Schneefall";
}
/* 21 */
.tooltip.wi-day-sleet:after {
    content: "Sonne, Regen, vermehrt Schneefall";
}
.tooltip.wi-night-alt-sleet:after {
    content: "Mond, Regen, vermehrt Schneefall";
}
/* 22 */
.tooltip.wi-day-snow:after {
    content: "Sonne, vereinzelt Schneefall";
}
.tooltip.wi-night-alt-snow:after {
    content: "Mond, vereinzelt Schneefall";
}
/* 23 */
.tooltip.wi-day-snow-wind:after {
    content: "Sonne, vermehrt Schneefall";
}
.tooltip.wi-night-alt-snow-wind:after {
    content: "Mond, vermehrt Schneefall";
}
/* 24 */
.tooltip.wi-day-hail:after {
    content: "Sonne, Hagel";
}
.tooltip.wi-night-alt-hail:after {
    content: "Mond, Hagel";
}
/* 25 */
.tooltip.wi-day-rain-wind:after {
    content: "Sonne, starker Hagel";
}
.tooltip.wi-night-alt-rain-wind:after {
    content: "Mond, starker Hagel";
}
/* 26 */
.tooltip.wi-lightning:after {
    content: "Gewitter";
}
/* 27 */
.tooltip.wi-storm-showers:after {
    content: "Gewitter, Regen";
}
/* 28 */
.tooltip.wi-thunderstorm:after {
    content: "Gewitter, starker Regen";
}
/* TODO 29
.tooltip.wi-storm-showers:after {
    content: "Gewitter, (Hagel)";
}*/
/* TODO 30
.tooltip.wi-thunderstorm:after {
    content: "Gewitter, (starker Hagel)";
}*/
/* 31 */
.tooltip.wi-day-windy:after, .tooltip.wi-strong-wind:after {
    content: "Sturm";
}

/* loading */
.loading .tooltip.wi-data:after, .tooltip.wi-na:after {
    content: "nicht verfügbar";
}

/* nowcast and overview icons */
.tooltip.wi-sunrise:after {
    content: "Sonnenaufgang";
}
.tooltip.wi-sunset:after {
    content: "Sonnenuntergang";
}
.tooltip.wi-moonrise:after {
    content: "Mondaufgang";
}
.tooltip.wi-moonset:after {
    content: "Monduntergang";
}

.tooltip.wi-barometer:after {
    content: "Luftdruck";
}
.tooltip.wi-humidity:after {
    content: "Luftfeuchte";
}
.tooltip.wi-raindrops:after {
    content: "Taupunkt";
}
.tooltip.wi-thermometer:after {
    content: "Temperatur";
}
.tooltip.wi-umbrella:after {
    content: "Nienderschlag";
}
.tooltip.wi-snowflake-cold:after {
    content: "Schneefall";
}
.tooltip.wi-windy:after {
    content: "Mittelwind";
}
.tooltip.wi-strong-wind:after {
    content: "Windspitzen";
}

/* moon phases */
.tooltip.wi-moon-new:after {
    content: "Neumond";
}
.tooltip.wi-moon-waxing-crescent-4:after {
    content: "zunehmende Sichel";
}
.tooltip.wi-moon-first-quarter:after {
    content: "zunehmender Halbmond";
}
.tooltip.wi-moon-waxing-gibbous-3:after {
    content: "zweites Viertel";
}
.tooltip.wi-moon-full:after {
    content: "Vollmond";
}
.tooltip.wi-moon-waning-gibbous-4:after {
    content: "drittes Viertel";
}
.tooltip.wi-moon-third-quarter:after {
    content: "abnehmender Halbmond";
}
.tooltip.wi-moon-waning-crescent-3:after {
    content: "abnehmende Sichel";
}

/* warning levels */
.tooltip.warning__level--1:after {
    content: "Warnstufe 1";
}
.tooltip.warning__level--2:after {
    content: "Warnstufe 2";
}
.tooltip.warning__level--3:after {
    content: "Warnstufe 3";
}
.tooltip.warning__level--4:after {
    content: "Warnstufe 4";
}