/* ============================================
   BLIPBLURB — FRONT END STYLES
   ============================================ */

.blip {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: var(--blip-height, 40px);
    font-size: var(--blip-font-size, 14px);
}

/* Mobile: a blank Mobile override isn't output, so this mild reduction applies. */
@media screen and (max-width: 600px) {
    .blip {
        min-height: var(--blip-height-mobile, calc(var(--blip-height, 40px) * 0.82));
        font-size: var(--blip-font-size-mobile, calc(var(--blip-font-size, 14px) * 0.9));
    }
}

.blip[data-sticky="1"] {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999999;
    /* Own compositing layer: stops iOS jumping a fixed bar as its toolbar collapses. */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Extra Offset: below the theme's header (blip-header-offset.js stands aside). */
.blip[data-sticky="1"][data-position="top"] {
    top: calc(var(--blip-extra-offset, 0px));
}

.blip[data-sticky="1"][data-position="bottom"] {
    bottom: calc(var(--blip-extra-offset, 0px));
}

/* Below WordPress's admin bar. */
body.admin-bar .blip[data-sticky="1"][data-position="top"] {
    top: calc(32px + var(--blip-extra-offset, 0px));
}

@media screen and (max-width: 782px) {
    body.admin-bar .blip[data-sticky="1"][data-position="top"] {
        top: calc(46px + var(--blip-extra-offset, 0px));
    }
}

.blip[data-floating="1"] {
    margin: var(--blip-floating-distance, 25px);
}

@media screen and (max-width: 600px) {
    .blip[data-floating="1"] {
        margin: var(--blip-floating-distance-mobile, calc(var(--blip-floating-distance, 25px) / 2));
    }
}

/* The admin preview never pins. */
#blip-preview-wrapper .blip[data-sticky="1"] {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
}

#blip-preview-wrapper .blip[data-floating="1"] {
    margin: 0;
}

/* --------------------------------------------
   MESSAGE LAYOUT
   -------------------------------------------- */

/* Messages share one grid cell, so the bar is as tall as the tallest. */
.blip-message {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

.blip-message.is-active {
    z-index: 2;
}

/* The outgoing message stays visible through the transition. */
.blip-message.is-active,
.blip-message.is-exiting {
    opacity: 1;
}

.blip-message::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--blip-bg, #222222);
    z-index: 0;
    opacity: 1;
    border-radius: inherit;
}

/* background-color too: some browsers' UI tinting reads only that. */
.blip-message[data-gradient]::before {
    background-color: var(--blip-bg, #222222);
    background-image: var(--blip-gradient);
}

.blip-message-inner {
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    line-height: 1.5;
    color: var(--blip-text, #ffffff);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        filter 0.6s ease;
    will-change: opacity, transform, filter;
}

.blip-message.is-exiting {
    z-index: 1;
}

.blip-message a {
    text-decoration: none;
}

/* ============================================
   BACKGROUND ANIMATIONS
   ============================================ */

/* None */
.blip[data-background="none"] .blip-message::before {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.blip[data-background="none"] .blip-message.is-exiting::before {
    opacity: 1 !important;
    transform: none !important;
}

/* Only the incoming background animates, over the static outgoing one. */

/* Fade */
.blip[data-background="fade"] .blip-message::before {
    opacity: 0;
    transition: opacity 1s ease-out;
}
.blip[data-background="fade"] .blip-message.is-active::before {
    opacity: 1;
}
.blip[data-background="fade"] .blip-message.is-exiting::before {
    opacity: 1;
}

/* Slides animate clip-path, not transform: a transformed backdrop-filter
   layer leaks blur past rounded corners. */

/* Slide Up — incoming background rises up and covers the outgoing one */
.blip[data-background="slide-up"] .blip-message::before {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.blip[data-background="slide-up"] .blip-message.is-active::before,
.blip[data-background="slide-up"] .blip-message.is-exiting::before {
    clip-path: inset(0 0 0 0);
}

/* Slide Down — incoming background drops down and covers the outgoing one */
.blip[data-background="slide-down"] .blip-message::before {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.blip[data-background="slide-down"] .blip-message.is-active::before,
.blip[data-background="slide-down"] .blip-message.is-exiting::before {
    clip-path: inset(0 0 0 0);
}

/* Slide Left — incoming background enters from the right, covers the outgoing one */
.blip[data-background="slide-left"] .blip-message::before {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.blip[data-background="slide-left"] .blip-message.is-active::before,
.blip[data-background="slide-left"] .blip-message.is-exiting::before {
    clip-path: inset(0 0 0 0);
}

/* Slide Right — incoming background enters from the left, covers the outgoing one */
.blip[data-background="slide-right"] .blip-message::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.blip[data-background="slide-right"] .blip-message.is-active::before,
.blip[data-background="slide-right"] .blip-message.is-exiting::before {
    clip-path: inset(0 0 0 0);
}

/* ============================================
   TEXT ANIMATIONS
   ============================================ */

/* None */
.blip[data-transition="none"] .blip-message-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}
.blip[data-transition="none"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Fade In — pure opacity crossfade, no movement */
.blip[data-transition="fade-in"] .blip-message-inner {
    opacity: 0;
}
.blip[data-transition="fade-in"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
}
.blip[data-transition="fade-in"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
}

/* Slide + Fade (Up) */
.blip[data-transition="slide-fade-up"] .blip-message-inner {
    transform: translateY(20px);
    opacity: 0;
}
.blip[data-transition="slide-fade-up"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
    transform: translateY(0);
}
.blip[data-transition="slide-fade-up"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
    transform: translateY(-20px);
}

/* Slide + Fade (Down) */
.blip[data-transition="slide-fade-down"] .blip-message-inner {
    transform: translateY(-20px);
    opacity: 0;
}
.blip[data-transition="slide-fade-down"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
    transform: translateY(0);
}
.blip[data-transition="slide-fade-down"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
    transform: translateY(20px);
}

/* Slide + Fade (Left) */
.blip[data-transition="slide-fade-left"] .blip-message-inner {
    transform: translateX(20px);
    opacity: 0;
}
.blip[data-transition="slide-fade-left"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
    transform: translateX(0);
}
.blip[data-transition="slide-fade-left"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
    transform: translateX(-20px);
}

/* Slide + Fade (Right) */
.blip[data-transition="slide-fade-right"] .blip-message-inner {
    transform: translateX(-20px);
    opacity: 0;
}
.blip[data-transition="slide-fade-right"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
    transform: translateX(0);
}
.blip[data-transition="slide-fade-right"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
    transform: translateX(20px);
}

/* Scale Up */
.blip[data-transition="scale-up"] .blip-message-inner {
    transform: scale(0.97);
    opacity: 0;
}
.blip[data-transition="scale-up"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
    transform: scale(1);
}
.blip[data-transition="scale-up"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
    transform: scale(0.97);
}

/* Blur In */
.blip[data-transition="blur-in"] .blip-message-inner {
    filter: blur(4px);
    opacity: 0;
}
.blip[data-transition="blur-in"]
    .blip-message.is-active
    .blip-message-inner {
    opacity: 1;
    filter: blur(0);
}
.blip[data-transition="blur-in"]
    .blip-message.is-exiting
    .blip-message-inner {
    opacity: 0;
    filter: blur(4px);
}