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

vaadin-notification-card{
    transition: all 0.2s ease;
}

vaadin-notification-card[theme~="info"]::part(overlay) {
    border-radius: var(--border-radius-notification);
    color: var(--lumo-body-text-color);
    background: var(--biblija-notification-ozadje-obvestilo-barva);

    backdrop-filter: blur(var(--biblija-notification-ozadje-blur))
    saturate(120%)
    brightness(1.3);

    box-shadow: none !important;
    border: 1px solid var(--biblija-notification-obvestilo-rob-barva);
}

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

vaadin-notification-card[theme~="success"]::part(overlay) {
    border-radius: var(--border-radius-notification);
    color: var(--lumo-body-text-color);
    background: var(--biblija-notification-ozadje-uspesno-barva);

    backdrop-filter: blur(var(--biblija-notification-ozadje-blur))
    saturate(120%)
    brightness(1.3);

    box-shadow: none !important;
    border: 1px solid var(--biblija-notification-uspesno-rob-barva);
}

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

vaadin-notification-card[theme~="warning"]::part(overlay) {
    border-radius: var(--border-radius-notification);
    color: var(--lumo-body-text-color);
    background: var(--biblija-notification-ozadje-opozorilo-barva);

    backdrop-filter: blur(var(--biblija-notification-ozadje-blur))
    saturate(120%)
    brightness(1.3);

    box-shadow: none !important;
    border: 1px solid var(--biblija-notification-opozorilo-rob-barva);
}

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

vaadin-notification-card[theme~="error"]::part(overlay) {
    border-radius: var(--border-radius-notification);
    color: var(--lumo-body-text-color);
    background: var(--biblija-notification-ozadje-napaka-barva);

    backdrop-filter: blur(var(--biblija-notification-ozadje-blur))
    saturate(120%)
    brightness(1.3);

    box-shadow: none !important;
    border: 1px solid var(--biblija-notification-napaka-rob-barva);
}

/* ============================= */
/* Hover animation */
/* ============================= */

vaadin-notification-card[theme~="info"]:hover,
vaadin-notification-card[theme~="success"]:hover,
vaadin-notification-card[theme~="warning"]:hover,
vaadin-notification-card[theme~="error"]:hover {
    cursor: pointer;
    transform: scale(1.03);
}