status-icon,
[status-icon] {
    background-color: #fff;
    margin: 0;
    display: inline-block;
    padding: 1px;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    overflow: hidden;
    border: 1px solid white;
    position: relative;
    font-size: 10px;
    font-weight: 400;

    i.fa {
        position: absolute;
        text-shadow:
           -1px -1px 0 #fff,
            1px -1px 0 #fff,
            -1px 1px 0 #fff,
             1px 1px 0 #fff;
        margin: 5px 6px;
        z-index: 20;
        text-align: center;
        color: red;

		&.fa-play{
			margin: 5px 7px;
		}
    }

    i.fa.ng-leave,
    i.fa.ng-show-remove,
    i.fa.ng-hide-add {
        animation: bounceOut .3s;
    }

    i.fa.ng-enter,
    i.fa.ng-show-add,
    i.fa.ng-hide-remove {
        animation: bounceIn .3s;
    }

    svg {
        position: absolute;
        overflow: visible !important;
    }

    .circle-stroke {
        stroke: $secondary-color;
        transition: all .3s ease-in-out;
    }

    i.fa {
        color: $secondary-color;
    }

    .heating {
        .circle-stroke {
            stroke: color(orange);
        }

        i.fa {
            color: color(orange);
        }
    }

    .connecting {
        .circle-stroke{
            stroke: color(yellow);
        }

        i.fa {
            color: color(yellow);
        }
    }

    .paused {
        .circle-stroke{
            stroke: color(yellow);
        }

        i.fa {
            color: color(yellow);
        }
    }

    .error {
        .circle-stroke{
            stroke: color(red);
        }

        i.fa {
            color: color(red);
            margin: 6px 10px;
        }
    }

	.online {
        .circle-stroke{
            stroke: color(green);
        }

        i.fa {
            color: color(green);
        }
    }

    .printing {
        .circle-stroke{
            stroke: color(green);
        }

        i.fa {
            color: color(green);
        }
    }
}