/*!
 * NOTIFICATIONS
 * =============
 *
 * This file contains all needs for alerts
 */


$alerts
    alert-width = em(546px)
    .coz-alerter
        z-index 100

    .coz-overlay
        position   absolute
        height     100%
        width      100%
        top        0
        left       0
        background white
        opacity    .6
        transition opacity ease-out .3s

    .coz-alert
        display          block
        position         absolute
        top              em(16px)
        left             0
        margin           0 em(16px)
        border-radius    em(10px)
        background-color emerald
        box-shadow       0 em(6px) em(18px) 0 rgba(50, 54, 63, .23)
        box-sizing       border-box
        padding          1em
        color            white

        //                  When only a title is displayed
        min-height          em(96px)
        padding-left        em(96px)
        background          embedurl('../../assets/icons/icon-check.svg') no-repeat em(24px) center
        transition                 top .5s ease-out
        cursor                     pointer

        .coz-alert-title
            font-weight bold

    .coz-alert--error
        background-color pomegranate
        background-image embedurl('../../assets/icons/icon-warn.svg')

    .coz-alert--closing
        top                        -25%
        transition-timing-function ease-in

    @media all and (min-width alert-width)
        .coz-alert
            left        50%
            max-width   alert-width
            margin-left -(alert-width/2)
            width       100%

/*!
 * NOTIFICATIONS
 * =============
 *
 * This file contains all needs for alerts
 */


$alerts
    alert-width = em(480px)
    .coz-alerter
        z-index 100

    .coz-overlay
        position   absolute
        height     100%
        width      100%
        top        0
        left       0
        background white
        opacity    .6
        transition opacity ease-out .3s

    .coz-alert
        display          block
        position         absolute
        top              em(16px)
        left             0
        margin           0 em(16px)
        border-radius    em(10px)
        background-color emerald
        box-shadow       0 em(6px) em(18px) 0 rgba(50, 54, 63, .23)
        box-sizing       border-box
        padding          1em 1.5em
        color            white
        opacity          1

        transition                 top .5s ease-out, opacity .2s ease-out
        cursor                     pointer

        p
          margin 0
          line-height 1.5

        .coz-alert-title
            font-weight bold

    .coz-alert--error
        background-color pomegranate

    .coz-alert--closing
        top                        -25%
        transition-timing-function ease-in

    @media all and (min-width alert-width)
        .coz-alert
            left        50%
            max-width   alert-width
            margin-left -(alert-width/2)
            width       100%

Update alert to be compliant with Files v3 mockups
[feat] Update alert to be compliant with Files v3 mockups
