.notification-svg {
    fill: var(--systemPrimary);
    display: block;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
    border-radius: var(--systemSpacing-12);
}

.notification-svg:hover {
    background-color: var(--systemPrimary-bg-borderless-hover);
}

.notification-centre-ctnr {
    position: absolute;

    background-color: var(--systemBG);
    top: var(--systemSpacing-40);
    right: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-20);
    width: var(--systemSpacing-360);
    height: var(--systemSpacing-400);

    max-height: 0;
    overflow: scroll;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;

    box-shadow: var(--systemSpacing-0) var(--systemSpacing-4) var(--systemSpacing-16) var(--systemSpacing-0)  rgba(0, 0, 0, 0.12);
    overscroll-behavior: none;
}

.notification-centre-ctnr.active {
    max-height: var(--systemSpacing-400);
    opacity: 1;
}

.notification-centre-all-wrp {
    display: flex;
    flex-direction: column;
    padding: var(--systemSpacing-20);
}

.notification-section-tl {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    margin-top: var(--systemSpacing-8);
    margin-bottom: var(--systemSpacing-40);

    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: "wght" 600, "wdth" 100, "opsz" 8;
}

.notification-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-32);
    border-radius: var(--systemSpacing-12);
    margin-bottom: var(--systemSpacing-40);
}

.notification-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--systemSpacing-8);

    margin: var(--negative-systemSpacing-12);
    padding: var(--systemSpacing-8);
    border-radius: var(--systemSpacing-16);
}

.notification-wrp:hover {
    background-color: var(--systemPrimary-bg-borderless-hover);
}

.notification-img-txt-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-12);
}

.notification-img-wrp {
    width: var(--systemSpacing-40);
    height: var(--systemSpacing-40);
    flex: 0 0 var(--systemSpacing-40);
}

.notification-img-wrp img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--systemSpacing-12);
}

.notification-txt-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
    width: 100%;
}

.notification-tl {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);

    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: "wght" 400, "wdth" 100, "opsz" 8;
}

.notification-dsc {
    font-size: var(--ch-fontSize);
    color: var(--systemSecondary);

    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: "wght" 100, "wdth" 100, "opsz" 8;
}

.notification-date {
    font-size: var(--c1-fontSize);
    color: var(--systemTertiary);
    white-space: nowrap;

    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: "wght" 200, "wdth" 100, "opsz" 8;
}

.notification-icon-wrp {
    display: none;
}

body.no-scroll {
    overflow: hidden;
}

.notification-standard-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--systemSpacing-12);
}

.notification-standard {
    font-size: var(--ch-fontSize);
    text-align: center;
    color: var(--systemTertiary);
    white-space: nowrap;
    padding: var(--systemSpacing-0) var(--systemSpacing-8);
}


@media screen and (max-width: 450px) {

    html, body {
        overflow-x: hidden;
    }
    .notification-centre-ctnr {
        position: fixed !important;
        top: var(--systemSpacing-0);
        right: var(--systemSpacing-0);
        border-radius: var(--systemSpacing-0);
        width: 100vw;
        height: 100dvh;


        max-height: none;      
        overflow: scroll;
        opacity: 0;
        transform: translateX(100%);

        transition: transform 0.45s cubic-bezier(.25,.8,.25,1);

        box-shadow: var(--systemSpacing-0) var(--systemSpacing-4) var(--systemSpacing-16) var(--systemSpacing-0) rgba(0, 0, 0, 0);
        overscroll-behavior: none;
    }

    .notification-centre-ctnr.active {
        transform: translateX(0);
        max-height: none;
    }

    .notification-centre-all-wrp {
        display: flex;
        flex-direction: column;
        padding: var(--systemSpacing-20) var(--systemSpacing-32) var(--systemSpacing-32) var(--systemSpacing-32);
    }

    .notification-wrp {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: var(--systemSpacing-8);

        margin: var(--negative-systemSpacing-12);
        padding: var(--systemSpacing-8);
        border-radius: var(--systemSpacing-16);
    }


    .notification-tl {
        font-size: var(--p-fontSize);
    }

    .notification-dsc {
        font-size: var(--ch-fontSize);
    }

    .notification-date {
        font-size: var(--c1-fontSize);
}

    .notification-chevron-tl-wrp {
        display: flex;
        flex-direction: column;
        gap: var(--systemSpacing-16);
    }

    .notification-icon-wrp {
        display: block;
    }

    .notification-icon-wrp svg {
        display: block;
        fill: var(--systemPrimary);
    }

    .notification-section-tl {
        font-size: var(--h5-fontSize);
        margin-top: var(--systemSpacing-0);
    }
}