@keyframes notificationTimeout
    0%
        width: 0
    100%
        width: 100%

.notifications
    margin: 0
    padding: 0

    width: 24rem
    height: auto

    position: fixed
    bottom: 0.3rem
    right: 0.3rem

    display: flex
    flex-direction: column-reverse

    z-index: 621

.sniffle__notification
    margin-top: 0.3rem
    padding: 0

    height: auto
    max-height: 100px

    display: flex
    flex-direction: row

    position: relative

    background-color: var(--background-400)
    border-radius: calc(var(--rad) / 2)
    color: var(--foreground-white)
    opacity: 0
    transform: scale(0.8)

    box-sizing: border-box
    overflow: hidden

    transition: opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)

    &::after
        content: ""

        width: 0
        height: 3px

        position: absolute
        bottom: 0
        left: 0

        background-color: var(--foreground-white)

        z-index: +2
        animation: notificationTimeout 5.1s ease-out forwards

    &.success
        color: var(--success)
        &::after
            background-color: var(--success)
    &.warning
        color: var(--warning)
        &::after
            background-color: var(--warning)
    &.critical
        color: var(--danger)
        &::after
            background-color: var(--danger)
    &.info
        color: var(--info)
        &::after
            background-color: var(--info)

    &.show
        opacity: 1
        transform: scale(1)

    &.hide
        margin: 0
        max-height: 0
        opacity: 0
        transform: translateY(1rem)
        transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out

.sniffle__notification-icon
    margin: 0
    padding: 1rem

    width: auto
    height: auto

    display: flex
    justify-content: center
    align-items: center

    background-color: var(--background-300)

    i
        font-size: 1.25rem

.sniffle__notification-text
    margin: 0
    padding: 1rem

    width: auto
    height: auto

    display: flex
    flex-direction: column
    justify-self: center
    align-self: center

    font-size: 1rem
    font-weight: 600
    line-height: 1
    text-align: left

@media (max-width: 800px)
    .notifications
        bottom: 3.8rem
        width: calc(100vw - 0.6rem)
        height: auto

    .sniffle__notification
        width: 100%
    
    .sniffle__notification-time
        width: 100%