/** Alert styling **/ .alert{

position:relative;
margin:24px 0;
padding:16px 24px 16px 30px;
border-left:4px solid;
@include media-min($sm){
    padding:16px 27px 16px 32px;
    font-size:16px;
    line-height:28px;
}
a{  
    font-weight:600;
    text-decoration:none;
    &:hover, &:focus{
        text-decoration: underline;
    }
}
&__icon{
    @include material-icons(18px);
    position:absolute;
    top:14px;
    left:-18px;
    z-index:1;
    display:inline-block;
    width:32px;
    height:32px;
    padding:7px;
    color: $white;
    border-radius:50%;
}
&__content{
    margin:0;
}
&--primary{
    background-color:rgba($yellow,.06);
    border-color:$yellow;
    a, code{
        color:$yellow;
    }
}
&--primary &__icon{
    background-color:$yellow;
}
&--secondary{
    background-color:rgba($turquoise,.06);
    border-color:$turquoise;
    a, code{
        color:$turquoise;
    }
}
&--secondary &__icon{
    background-color: $turquoise;
}
&--success{
    background-color:rgba($green,.06);
    border-color:$green;
    a, code{
        color:$green;
    }
}
&--success &__icon{
    background-color: $green;
}
&--warning{
    background-color:rgba($orange,.06);
    border-color:$orange;
    a, code{
        color:$orange;
    }
}
&--warning &__icon{
    background-color: $orange;
}
&--error{
    background-color:rgba($red,.06);
    border-color:$red;
    a, code{
        color:$red;
    }
}
&--error &__icon{
    background-color: $red;
}
&--info{
    background-color:rgba($blue,.06);
    border-color:$blue;
    a, code{
        color:$blue;
    }
}
&--info &__icon{
    background-color: $blue;
}

}

/** Dark mode styles **/ body.dark-mode .alert{

&--primary,
&--secondary,
&--success,
&--warning,
&--error,
&--info{
    background-color: $darkGrey;
    a{
        color:$white;
    }
}

}