@mixin notification($color)
    color: $color

    .sniffle__notification-time
        background-color: $color
    
.notifications
    margin: 0
    padding: 0

    width: 450px
    height: auto

    position: fixed
    top: 0.3rem
    right: 0.3rem

    display: flex
    flex-direction: column

    z-index: 621

.sniffle__notification
    margin: 0 0 0.3rem 0
    padding: 0

    width: 450px
    height: auto
    max-height: 100px

    display: flex
    flex-direction: row

    position: relative

    background-color: $black
    border-radius: $rad-inner
    color: $white
    opacity: 0
    transform: scale(0.8)

    box-sizing: border-box
    overflow: hidden

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

.sniffle__notification-icon
    margin: 0
    padding: 1rem

    width: auto
    height: auto

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

    background-color: $black2

    svg
        width: 1.25rem
        height: 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

.sniffle__notification-time
    margin: 0
    padding: 0

    width: 450px
    height: 3px

    position: absolute
    bottom: 0px
    left: 0px

    background-color: $white

    animation: notificationTimeout 5.1s linear

@each $name, $colour in (success: $success, error: $critical, warning: $warning, info: $info)
    .sniffle__notification--#{$name}
        @include notification($colour)

.sniffle__notification-show
    opacity: 1
    transform: scale(1)

.sniffle__notification--hide
    margin: 0
    max-height: 0

    opacity: 0
    transform: translateX(100%)

    transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out

@media (max-width: $breakpoint)
    .notifications
        width: calc(100vw - 0.6rem)
        height: auto

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

    .sniffle__notification--hide
        opacity: 0
        transform: translateY(-5rem)