/* ---------------------------------------------------------------

Toaster notifications

*/

$darken-amount = 10%;
$trans-amount = 0.85;

$white = rgb(255,255,255);
$clear = rgb(255,255,255, $trans-amount);

$success = rgb(115,199,74);
$success-trans = rgba(115,199,74, $trans-amount);
$success-dark = darken($success, $darken-amount);

$warning = rgb(212,215,80);
$warning-trans = rgba(212,215,80, $trans-amount);
$warning-dark = darken($warning, $darken-amount);

$error = rgb(196,82,0);
$error-trans = rgba(196,82,0, $trans-amount);
$error-dark = darken($error, $darken-amount);

$fatal = rgb(33,33,33);
$fatal-trans = rgba(33,33,33, $trans-amount);
$fatal-dark = darken($fatal, $darken-amount);


.dijitToasterClip {
    bottom: 15px;
    clip: auto !important;
    left: auto !important;
    overflow: visible;
    position: fixed;
    right: 15px;
    top: auto !important;

    .dijitToasterContainer {
        font-size: 1em;
    }

    .dijitToasterContent {

        /* set these colors in your product theme */

        /*background: $cpa;
        background: $cpa-trans;
        border: 1px solid $cpa-dark;*/


        border-radius: 5px;
        box-shadow: 0 0 15px #999;
        box-shadow: 0 0 15px rgba(55,55,55,0.3);
        padding: 10px;

        hr {
            border-top: 1px solid $cpa-dark;
            margin: 15px 0;
            opacity: 0.3;
        }
    }

    .dijitToasterWarning {
        .dijitToasterContent {
            background: $warning;
            background: $warning-trans;
            border: 1px solid $warning-dark;

            hr {
                border-top: 1px solid $warning-dark;
            }
        }
    }

    .dijitToasterError {
        .dijitToasterContent {
            background: $error;
            background: $error-trans;
            border: 1px solid $error-dark;

            hr {
                border-top: 1px solid $error-dark;
            }
        }
    }

    .dijitToasterFatal {
        .dijitToasterContent {
            background: $fatal;
            background: $fatal-trans;
            border: 2px solid #600;

            hr {
                border-top: 1px solid $fatal-dark;
            }
        }
    }
}



/* ---------------------------------------------------------------

Websockets alerts

*/

.disconnected {
    h2 {
        color: @text-warning;
        margin-bottom: 20px;
        text-transform: none;
    }
    .alert {
        margin-left: -15px;
    }
}


#connection-lost {
    padding: 30px;
    width: 80%;
    z-index: 9999;
}



/* ---------------------------------------------------------------

Bootstrap alert styling

*/



.dbootstrap {
    .alert {
        h1, h2, h3, h4 {
            color: inherit;
        }
    }
}