#notifications-info {
    --pico-color: var(--pico-primary);

    position: relative;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
    border-radius: calc(var(--pico-border-radius) * 2);

    li {
        position: relative;
        flex: 0 0 100%;
        width: 100%;

        article {
            margin-top: 2rem;
            border: none;
            background: none;
            box-shadow: none;
            border-radius: 0;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            overflow: auto;

            header, main, footer {
                border: none;
                background: none;
            }

            header {
                font-weight: 800;
                font-size: 1.2rem;
                margin: 0;
                padding-left: 0;
                padding-right: 0;
            }
        }
    }


    &::before,
    &::after,
    .previous,
    .next {
        position: absolute;
        top: 2rem;
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0;
        outline: 0;
    }

    &::before,
    .previous {
        right: 4rem;
    }

    &::after,
    .next {
        right: 1.5rem;
    }

    &::before,
    &::after {
        content: '';
        z-index: 1;
        line-height: 1.5rem;
        text-align: center;
        pointer-events: none;
        font-weight: 800;
    }

    &::before {
        transform: scaleX(-1);
        background-image: url("../../images/dashboard/icon-arrow-UQBu2Ug.svg");
    }

    &::after {
        background-image: url("../../images/dashboard/icon-arrow-UQBu2Ug.svg");
    }

    &.only-one-notification {
        &::before, &::after, .previous, .next {
            background-image: none;
            display: none;
        }
        article {
            margin-top: 0;
        }
        .dismiss {
            position: absolute;
            top: calc(var(--pico-spacing) * 2);
            right: calc(var(--pico-spacing) * 2);
        }
    }

    .dismiss {
        position: absolute;
        top: calc(var(--pico-spacing) * 3);
        right: calc(var(--pico-spacing) * 12);
    }
}

.dialog-notification-info {
    .notification-message {
        padding: 1rem 0.5rem;
        background: #2196f338;
        border-left: 2px solid #2196f3;
    }
}