@import '../tools/colors';
@import '../ui/icons';

#toast-container {
    &.toast-top-right {
        top:0;
        right:40px;
    }
    .toast {
        position:relative;
        margin-top:20px;
        border-radius:5px;
        width:395px;
        background:$grey900;
        padding:20px 20px 20px 90px;
        -webkit-box-shadow: 0px 0px 22px 0px rgba($slate800, .75);
        -moz-box-shadow: 0px 0px 22px 0px rgba($slate800, .75);
        box-shadow: 0px 0px 22px 0px rgba($slate800, .75);
        &::before, &::after {
            font-family: 'loop-icons';
        }
        &::before {
            @extend .icon-assignmentcheck:before;
            position:absolute;
            left:25px;
            top: 50%;
            transform: translateY(-50%);
            color:$loop100;
            font-size:32px;
        }
        &::after {
            @extend .icon-close:before;
            color:$loop100;
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 12px;
        }
        &-title {
            color:$slate700;
            font-size:22px;
            font-weight:bold;
        }
    }
}