@mixin clearfix($device: "") {
    %#{$device}clearfix {
        &:after,
        &:before {
            content: " ";
            display: table;
        }

        &:after {
            clear: both;
        }
    }

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

@mixin clear($device: "") {
    %#{$device}clear {
        clear: both;
    }

    %#{$device}clear-left {
        clear: left;
    }

    %#{$device}clear-right {
        clear: right;
    }

    %#{$device}clear-none {
        clear: none;
    }

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

        .#{$device}clear-left {
            @extend %#{$device}clear-left;
        }

        .#{$device}clear-right {
            @extend %#{$device}clear-right;
        }

        .#{$device}clear-none {
            @extend %#{$device}clear-none;
        }
    }
}

@include clear;
@include clearfix;

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

@include mobile {
    @include clear("mobile-");
    @include clearfix("mobile-");
}