@mixin vertical-align($device: "") {
    %#{$device}valign-#{$class-middle} {
        vertical-align: middle;
    }

    %#{$device}valign-#{$class-bottom} {
        vertical-align: bottom;
    }

    %#{$device}valign-#{$class-top} {
        vertical-align: top;
    }

    %#{$device}valign-text-#{$class-top} {
        vertical-align: text-top;
    }

    %#{$device}valign-text-#{$class-bottom} {
        vertical-align: text-bottom;
    }

    @if $classes {
        .#{$device}valign-#{$class-middle} {
            @extend %#{$device}valign-#{$class-middle};
        }

        .#{$device}valign-#{$class-bottom} {
            @extend %#{$device}valign-#{$class-bottom};
        }

        .#{$device}valign-#{$class-top} {
            @extend %#{$device}valign-#{$class-top};
        }

        .#{$device}valign-text-#{$class-top} {
            @extend %#{$device}valign-text-#{$class-top};
        }

        .#{$device}valign-text-#{$class-bottom} {
            @extend %#{$device}valign-text-#{$class-bottom};
        }
    }
}

@include vertical-align;

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

@include mobile {
    @include vertical-align("mobile-");
}