:root {
    --JLTiToastTop: 35px;
    --JLTiToastGap: 15px;
    --JLTiToastWidth: 80vw;
    --JLTiToastMaxWidth: 500px;
    --JLTiToastAnimationDuration: 180ms;
    --JLTiToastZIndex: 10000;
    --JLTiToastPadding: 15px 20px;
    --JLTiToastBorderRadius: 10px;
    --JLTiToastBackground: rgb(70, 70, 70);
    --JLTiToastTextColor: #fff;
    --JLTiToastInfoBackground: #63a0ba;
    --JLTiToastSuccessBackground: #80b277;
    --JLTiToastWarningBackground: #edaa49;
    --JLTiToastFailureBackground: #bc6055;
    --JLTiToastShadow: 0 10px 28px rgba(15, 23, 42, 0.24);
}

.JLTiToastRoot {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--JLTiToastZIndex);
}

.JLTiToast {
    --jlti-toast-offset: 0px;

    box-sizing: border-box;
    position: fixed;
    top: calc(var(--JLTiToastTop) + var(--jlti-toast-offset));
    left: 50%;
    width: min(var(--JLTiToastWidth), var(--JLTiToastMaxWidth));
    max-width: calc(100vw - 24px);
    margin: 0;
    border: none;
    border-radius: var(--JLTiToastBorderRadius);
    padding: var(--JLTiToastPadding);
    background-color: var(--JLTiToastBackground);
    color: var(--JLTiToastTextColor);
    box-shadow: var(--JLTiToastShadow);
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    pointer-events: none;
}

.JLTiToast:popover-open,
.JLTiToast.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: JLTiToastFadeIn var(--JLTiToastAnimationDuration) ease-out;
}

.JLTiToast.is-closing {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    animation: JLTiToastFadeOut var(--JLTiToastAnimationDuration) ease-out;
}

.JLTiToast[data-jlti-variant="info"] {
    background-color: var(--JLTiToastInfoBackground);
}

.JLTiToast[data-jlti-variant="success"] {
    background-color: var(--JLTiToastSuccessBackground);
}

.JLTiToast[data-jlti-variant="warning"] {
    background-color: var(--JLTiToastWarningBackground);
}

.JLTiToast[data-jlti-variant="failure"] {
    background-color: var(--JLTiToastFailureBackground);
}

.JLTiToast_Message {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
}

@keyframes JLTiToastFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes JLTiToastFadeOut {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
}

@media (max-width: 480px) {
    .JLTiToast {
        width: min(var(--JLTiToastWidth), calc(100vw - 24px));
        padding: 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .JLTiToast {
        animation: none;
        transition: none;
    }
}