@mixin visibility($device: "") {
    %#{$device}invisible {
        visibility: hidden;
    }

    %#{$device}visible {
        visibility: visible;
    }

    %#{$device}collapse {
        visibility: collapse;
    }

    @if $classes {
        .#{$device}invisible {
            @extend %#{$device}invisible;
        }

        .#{$device}visible {
            @extend %#{$device}visible;
        }

        .#{$device}collapse {
            @extend %#{$device}collapse;
        }
    }
}

@include visibility;

@each $device, $pixels in $devices {
    @include media($device) {
        @include visibility($device + "-");
    }
}

@include mobile {
    @include visibility("mobile-");
}