/* PebWeb Postit */

#pebweb_postit {
    /* Die Nadel darf beim "Anpinnen" kurz ausserhalb des Zettels liegen. */
    overflow: visible !important;
}

.peb_postit_head {
    position: relative;
    height: 25px;
}

#close_postit {
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    cursor: pointer;
    user-select: none;
}

#needle {
    position: absolute;
    z-index: 5;
    top: -8px;
    left: 50%;
    width: 39px;
    height: auto;
    transform: translateX(-50%) scale(1);
    transform-origin: 50% 75%;
    pointer-events: none;
}

/* Inhalt beim Schliessen zuerst weg, beim Öffnen erst etwas später zurück. */
.peb_postit_inner {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity .25s ease .42s,
        transform .25s ease .42s,
        visibility 0s linear .42s;
}

/* Geschlossenes Postit */
#pebweb_postit.peb_postit_closed {
    max-width: 40px !important;
    max-height: 40px !important;
    right: 0 !important;
    top: 44px !important;
    padding: 6px !important;
    box-shadow: none !important;
    border-bottom-left-radius: 7px;
    transform: rotate(0deg) !important;
}

#pebweb_postit.peb_postit_closed .peb_postit_head {
    height: 28px;
}

#pebweb_postit.peb_postit_closed #close_postit {
  top: 0px;
  right: 4px;
  font-size: 1.4em;
}

#pebweb_postit.peb_postit_closed #needle {
    top: -19px;
    transform: translateX(-50%) scale(0.9);
}

#pebweb_postit.peb_postit_closed .peb_postit_inner {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.96);
    pointer-events: none;
    transition:
        opacity .12s ease,
        transform .12s ease,
        visibility 0s linear .12s;
}

/* Beim Schliessen verschwindet die Nadel sofort. Erst wenn der Zettel
   fast in der Ecke angekommen ist, kommt sie von oben und "pinnt" ihn fest. */
#pebweb_postit.peb_postit_closing #needle {
    animation: peb_postit_pin_closed 1.12s ease forwards;
}

@keyframes peb_postit_pin_closed {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px) scale(.9);
    }
    68% {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px) scale(.9);
    }
    76% {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px) scale(1.02);
    }
    90% {
        opacity: 1;
        transform: translateX(-50%) translateY(2px) scale(1.12);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.08);
    }
}

/* Beim Öffnen Nadel kurz wegnehmen, Zettel ausfahren lassen und danach
   wieder ruhig auf dem geöffneten Zettel erscheinen lassen. */
#pebweb_postit.peb_postit_opening #needle {
    animation: peb_postit_pin_open .9s ease forwards;
}

@keyframes peb_postit_pin_open {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(.95);
    }
    65% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(.95);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Beim ersten Seitenaufbau den gespeicherten Zustand ohne Animation setzen. */
#pebweb_postit.peb_postit_initializing,
#pebweb_postit.peb_postit_initializing .peb_postit_inner,
#pebweb_postit.peb_postit_initializing #needle {
    transition: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #pebweb_postit,
    #pebweb_postit .peb_postit_inner,
    #pebweb_postit #needle {
        transition: none !important;
        animation: none !important;
    }
}