/* =========================================
   sakuQ NOTIFICATION
========================================= */

#sakuq-notification-container {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 99999;

    display: flex;
    flex-direction: column;

    gap: 10px;

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

    pointer-events: none;
}

.sakuq-notification {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    border: 1px solid #e5eaf0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 12px 35px
        rgba(20, 35, 60, 0.13);

    color: #172033;

    pointer-events: auto;

    animation:
        sakuqNotificationIn
        0.3s
        ease
        forwards;
}

.sakuq-notification.hide {
    animation:
        sakuqNotificationOut
        0.25s
        ease
        forwards;
}


/* Icon */

.sakuq-notification-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 800;
}


/* Content */

.sakuq-notification-content {
    min-width: 0;

    flex: 1;
}

.sakuq-notification-title {
    margin-bottom: 2px;

    color: #172033;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;
}

.sakuq-notification-message {
    color: #6f7888;

    font-size: 12px;

    line-height: 1.5;

    word-break: break-word;
}


/* Close */

.sakuq-notification-close {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;

    color: #8d96a5;

    background: transparent;

    font-size: 18px;

    cursor: pointer;

    transition:
        color 0.2s ease;
}

.sakuq-notification-close:hover {
    color: #172033;
}


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

.sakuq-notification.success
.sakuq-notification-icon {
    color: #159767;

    background: #e7f8f0;
}


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

.sakuq-notification.error
.sakuq-notification-icon {
    color: #dc4b4b;

    background: #fdecec;
}


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

.sakuq-notification.warning
.sakuq-notification-icon {
    color: #d58b18;

    background: #fff5df;
}


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

.sakuq-notification.info
.sakuq-notification-icon {
    color: #1677ff;

    background: #eaf3ff;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes sakuqNotificationIn {

    from {
        opacity: 0;

        transform:
            translateX(30px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes sakuqNotificationOut {

    from {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            translateX(30px)
            scale(0.96);
    }
}


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

@media (max-width: 650px) {

    #sakuq-notification-container {
        top: 14px;
        right: 14px;
        left: 14px;

        width: auto;
    }

    .sakuq-notification {
        width: 100%;

        padding: 13px 14px;
    }

    .sakuq-notification-message {
        font-size: 11.5px;
    }

}