@mixin notification($color)
    color: RGB($color)

    .sniffle__notification-time
        background-color: RGB($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: RGB($bg-300)
    border-radius: $rad-inner
    color: RGB($fg-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)

    &.success
        @include notification($success)
    &.warning
        @include notification($warning)
    &.critical
        @include notification($critical)
    &.info
        @include notification($info)

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

    &.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

.sniffle__notification-icon
    margin: 0
    padding: 1rem

    width: auto
    height: auto

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

    background-color: RGB($bg-200)

    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: RGB($fg-white)

    animation: notificationTimeout 5.1s linear

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

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

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