@import '../../styleIncludes/mixins';
@import '../../styleIncludes/variables';

.c-popins-container {
    position:fixed;
    top:1.8em;
    right:2.3em;
    z-index:4;
}
.c-popin {
    position:relative;
    cursor:default;
    padding:1.5em 1.1em;
    margin:0 0 1em;
    background:#fff;
    color:$lighter;
    font-family:$roboto;
	font-weight:600;
	text-align:center;
    border-radius:5px;
    box-shadow:0 0 15px 0 rgba(#000, .5);
}
.c-popin--info .c-popin__body:before {
    border:2px solid $info;
    background-image:url('../../svgs/status-ok.svg');
}
.c-popin--alert .c-popin__body:before {
    border:2px solid $alert;
    background-image:url('../../svgs/status-error.svg');
}
.c-popin__body {
    position:relative;
    padding:0 3em 0 57px;
    &:before {
        content:"";
        display:block;
        position:absolute;
        left:0;
        top:calc(50% - 17px);
        padding:2px;
        height:34px;
        width:34px;
        box-sizing:border-box;
        border-radius:17px;
        background:transparent center center no-repeat;
        background-size:26px;
    }
}
.c-popin__close {
    @include cross();
    top:calc(50% - 6px);
}

