/* ==========================================================
   FIC FURY — GLOBAL TOAST NOTIFICATIONS
========================================================== */

.fury-toast-container {

    position: fixed;

    z-index: 10000;

    top: 25px;

    right: 25px;

    width: min(
        380px,
        calc(100vw - 30px)
    );

    display: flex;

    flex-direction: column;

    gap: 12px;

    pointer-events: none;

}


/* ==========================================================
   TOAST
========================================================== */

.fury-toast {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 62px;

    padding: 12px 14px;

    background: #f6f0df;

    color: #111111;

    border: 3px solid #111111;

    box-shadow:
        6px 6px 0 #111111;

    opacity: 0;

    transform:
        translateX(40px)
        rotate(1deg);

    pointer-events: auto;

    transition:
        opacity 0.3s ease,
        transform 0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ==========================================================
   SHOW
========================================================== */

.fury-toast.show {

    opacity: 1;

    transform:
        translateX(0)
        rotate(0deg);

}


/* ==========================================================
   HIDE
========================================================== */

.fury-toast.hide {

    opacity: 0;

    transform:
        translateX(40px)
        rotate(1deg);

}


/* ==========================================================
   ICON
========================================================== */

.fury-toast-icon {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: #111111;

    color: #ffffff;

    border: 2px solid #111111;

    font-family:
        "Bangers",
        cursive;

    font-size: 20px;

}


/* ==========================================================
   MESSAGE
========================================================== */

.fury-toast-message {

    flex: 1;

    font-family:
        "Inter",
        sans-serif;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 700;

}


/* ==========================================================
   CLOSE
========================================================== */

.fury-toast-close {

    width: 25px;

    height: 25px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    padding: 0;

    background: transparent;

    border: none;

    color: #111111;

    cursor: pointer;

    font-size: 20px;

    line-height: 1;

}


.fury-toast-close:hover {

    color: #e52521;

}


/* ==========================================================
   SUCCESS
========================================================== */

.fury-toast-success {

    border-left:
        7px solid #1c9c52;

}


.fury-toast-success
.fury-toast-icon {

    background: #1c9c52;

}


/* ==========================================================
   ERROR
========================================================== */

.fury-toast-error {

    border-left:
        7px solid #e52521;

}


.fury-toast-error
.fury-toast-icon {

    background: #e52521;

}


/* ==========================================================
   WARNING
========================================================== */

.fury-toast-warning {

    border-left:
        7px solid #ffd21f;

}


.fury-toast-warning
.fury-toast-icon {

    background: #ffd21f;

    color: #111111;

}


/* ==========================================================
   INFO
========================================================== */

.fury-toast-info {

    border-left:
        7px solid #111111;

}


.fury-toast-info
.fury-toast-icon {

    background: #111111;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .fury-toast-container {

        top: 15px;

        right: 15px;

        left: 15px;

        width: auto;

    }


    .fury-toast {

        min-height: 58px;

    }

}