@import "../icons/variables";
@import "../style/index";
@import "../text/mixins";


@mixin bwc-user-icons-block( $size: $bwc-icons-medium ){

    display:                block;
    position:               relative;
    width:                  $size;
    height:                 $size;
    margin:                 0;

    > span {

        @include bwc-text( leading );

        display:            block;
        position:           absolute;

        z-index:            0;
        left:               0;
        top:                0;
        width:              $size;
        height:             $size;
        line-height:        $size;
        margin:             0;
        border-radius:      50%;

        text-align:         center;
        font-weight:        $bwc-font-weight-semibold;
        text-decoration:    none;
        background:         $bwc-dataviz-green;
        color:              $bwc-white;
    }

    > img {

        display:            block;
        position:           absolute;

        z-index:            1;
        left:               0;
        top:                0;
        width:              $size;
        height:             $size;

        border-width:       0;
        border-radius:      50%;
    }
}