/*
 * SPDX-License-Identifier: GPL-2.0-or-later
 * SPDX-FileCopyrightText: 2017-2023 elementary, Inc. (https://elementary.io)
 */

.notification-icon {
    animation: none;
    min-width: 24px;
    opacity: 1;
    transition: none;
    -gtk-icon-source: -gtk-icontheme("notification-symbolic");
}

.notification-icon.new {
    animation: notification-new 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -gtk-icon-source: -gtk-icontheme("notification-new-symbolic");
}

.notification-icon.disabled {
    animation: notification-disabled 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -gtk-icon-source: -gtk-icontheme("notification-disabled-symbolic");
}

@keyframes notification-disabled {
    0% { -gtk-icon-source: -gtk-icontheme("notification-symbolic"); }
    10% { -gtk-icon-source: -gtk-icontheme("notification-disabled-10-symbolic"); }
    20% { -gtk-icon-source: -gtk-icontheme("notification-disabled-20-symbolic"); }
    30% { -gtk-icon-source: -gtk-icontheme("notification-disabled-30-symbolic"); }
    40% { -gtk-icon-source: -gtk-icontheme("notification-disabled-40-symbolic"); }
    50% { -gtk-icon-source: -gtk-icontheme("notification-disabled-50-symbolic"); }
    60% { -gtk-icon-source: -gtk-icontheme("notification-disabled-60-symbolic"); }
    70% { -gtk-icon-source: -gtk-icontheme("notification-disabled-70-symbolic"); }
    80% { -gtk-icon-source: -gtk-icontheme("notification-disabled-80-symbolic"); }
    90% { -gtk-icon-source: -gtk-icontheme("notification-disabled-90-symbolic"); }
    100% { -gtk-icon-source: -gtk-icontheme("notification-disabled-symbolic"); }
}

@keyframes notification-new {
    0% { -gtk-icon-source: -gtk-icontheme("notification-symbolic"); }
    10% { -gtk-icon-source: -gtk-icontheme("notification-new-10-symbolic"); }
    20% { -gtk-icon-source: -gtk-icontheme("notification-new-20-symbolic"); }
    30% { -gtk-icon-source: -gtk-icontheme("notification-new-30-symbolic"); }
    40% { -gtk-icon-source: -gtk-icontheme("notification-new-40-symbolic"); }
    50% { -gtk-icon-source: -gtk-icontheme("notification-new-50-symbolic"); }
    60% { -gtk-icon-source: -gtk-icontheme("notification-new-60-symbolic"); }
    70% { -gtk-icon-source: -gtk-icontheme("notification-new-70-symbolic"); }
    80% { -gtk-icon-source: -gtk-icontheme("notification-new-80-symbolic"); }
    90% { -gtk-icon-source: -gtk-icontheme("notification-new-90-symbolic"); }
    100% { -gtk-icon-source: -gtk-icontheme("notification-new-symbolic"); }
}
