a.dg-traffic-control {
    z-index: 0;
    color: #f2f2f2;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    font: normal 15px/32px 'Arial narrow', Arial, sans-serif;

    &_color_green:after,
    &_color_yellow:after,
    &_color_red:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: auto;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .2), 0 1px 0 0 #fff;
    }

    .no-touch &:hover {
        color: #f2f2f2;
    }

    .no-touch &_color_green:hover:after,
    .no-touch &_color_yellow:hover:after,
    .no-touch &_color_red:hover:after {
        width: 22px;
        height: 22px;
    }

    &_color_green:after {
        background: #3fc03b;
    }

    .no-touch &_color_green:hover:after,
    &_color_green:active:after {
        background: linear-gradient(to top, #2aa731, #53e13a) #3ec435;
    }

    &_color_yellow:after {
        background: #f3b223;
    }

    .no-touch &_color_yellow:hover:after,
    &_color_yellow:active:after {
        background: linear-gradient(to top, #ef931b, #f7be26) #f4a820;
    }

    &_color_red:after {
        background: #eb240c;
    }

    .no-touch &_color_red:hover:after,
    &_color_red:active:after {
        background: linear-gradient(to top, #c01c0a, #f73416) #db2811;
    }
}