/* =============================================================
   COMPONENT / NOTIFICATION
   
   Все плашки статусов (success, error, notice, warning)
   + статусы заказов (created, processed, ...).
   
   Одна структура — разные цвета через переменные.
   ============================================================= */

/* Базовая структура — используется всеми */
.result,
.status,
.notification {
    --notify-bg: var(--bg-surface-alt);
    --notify-fg: var(--text-primary);
    --notify-border: var(--border-default);

    background-color: var(--notify-bg);
    color: var(--notify-fg);
    border-color: var(--notify-border);
}

/* Расширенная версия — с отступом, тенью, анимацией */
.notification {
    display: block;
    width: fit-content;
    padding: 20px;
    border-radius: 0 .5rem .5rem;
    border-left: 3px solid var(--notify-border);
    box-shadow: var(--shadow-tooltip);
    animation: slideIn .5s ease-out;
    z-index: 1000;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* =============================================================
   ЦВЕТОВЫЕ ВАРИАНТЫ
   ============================================================= */

/* --- Сообщения --- */
.error {
    --notify-bg: var(--red-300);
    --notify-fg: var(--red-900);
    --notify-border: var(--red-900);
}

.success {
    --notify-bg: var(--green-300);
    --notify-fg: var(--green-900);
    --notify-border: var(--green-900);
}

.notice {
    --notify-bg: var(--blue-300);
    --notify-fg: var(--blue-900);
    --notify-border: var(--blue-900);
}

.warning {
    --notify-bg: var(--yellow-300);
    --notify-fg: var(--yellow-900);
    --notify-border: var(--yellow-900);
}

/* --- Статусы заказов --- */
.created {
    --notify-bg: var(--neutral-300);
    --notify-fg: var(--neutral-900);
    --notify-border: var(--neutral-900);
}

.processed {
    --notify-bg: var(--yellow-300);
    --notify-fg: var(--yellow-900);
    --notify-border: var(--yellow-900);
}

.ordered {
    --notify-bg: var(--orange-300);
    --notify-fg: var(--orange-900);
    --notify-border: var(--orange-900);
}

.prepared {
    --notify-bg: var(--blue-300);
    --notify-fg: var(--blue-900);
    --notify-border: var(--blue-900);
}

.shipped {
    --notify-bg: var(--teal-300);
    --notify-fg: var(--teal-900);
    --notify-border: var(--teal-900);
}

.received {
    --notify-bg: var(--green-300);
    --notify-fg: var(--green-900);
    --notify-border: var(--green-900);
}

.canceled {
    --notify-bg: var(--red-300);
    --notify-fg: var(--red-900);
    --notify-border: var(--red-900);
}

.returned,
.compensated {
    --notify-bg: var(--purple-300);
    --notify-fg: var(--purple-900);
    --notify-border: var(--purple-900);
}