Navigation icons with scalable sprite image

Navigation icons

@mixin control-icon($dir, $size:76px) {
    $icons-count: 4;

    width: $size;
    height: $size;
    display: inline-block;
    background: url(../img/ico-controls.png);
    background-size: ($size*2) ($size*$icons-count);
    background-repeat: no-repeat;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    @if $dir == up {
        background-position: 0 0;
    } @else if $dir == down {
        background-position: 0 (-$size);
    } @else if $dir == left {
        background-position: 0 (-$size*2);
    } @else {
        background-position: 0 (-$size*3);
    }

    &:hover {
        @if $dir == up {
            background-position: (-$size) 0;
        } @else if $dir == down {
            background-position: (-$size) (-$size);
        } @else if $dir == left {
            background-position: (-$size) (-$size*2);
        } @else {
            background-position: (-$size) (-$size*3);
        }
    }
}