zotonic_mod_admin

@_colorStatusOff: #D7D7D7;   
@_colorStatusOk: #00D100;
@_colorStatusError: #ED4A00;
@_colorStatusWarning: #FFBD00;
@_colorBorderStarting: #E2F800;
@_colorBorderNeutral: #777;
@_colorBorderLight: #fff;   

.led-color(@color) {
    @_glow_size: 7px;
    &:before {
        #3L > .gradient(
            mix(@_colorBorderNeutral, @color, 50%), 
            mix(@_colorBorderLight, @color, 50%)
        );
    }
    &:after {
        background: @color;
        box-shadow: 
            inset 0 -@_glow_size @_glow_size rgba(100,100,100,0.1),
            inset 0 @_glow_size @_glow_size rgba(255,255,255,0.3);
    }
}

span.icon_status {
    @_size: 14px;
    @_inner_size: @_size - 2;
    width: @_size;
    height: @_size;
    display: inline-block;
    position: relative;
    margin-top: 3px;
    
    &:before {
        // background as gradient border
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 50%;
        width: @_size;
        height: @_size;
        content: " ";
        background-color: #ddd;
        z-index: 0;
    }
    &:after {
        // colored status
        position: absolute;
        top: 1px;
        left: 1px;
        border-radius: 50%;
        width: @_inner_size;
        height: @_inner_size;
        content: " ";
        background-color: @backgroundColorLight;
        z-index: 1;
    }
    
    &.icon_status_running,
    &.icon_status_ok {
        .led-color(@_colorStatusOk);
    }
    
    &.icon_status_error {
        .led-color(@_colorStatusError);
    }
    
    &.icon_status_warning,
    &.icon_status_retrying {
        .led-color(@_colorStatusWarning);
    }
    
    &.icon_status_starting {
        .led-color(@_colorBorderStarting);
    }
}