@mixin border($width, $style, $colour, $device: "") {
    %#{$device}#{$border-class} {
        border: $width $style $colour;
    }

    %#{$device}#{$border-class}-#{$class-left} {
        border-left: $width $style $colour;
    }

    %#{$device}#{$border-class}-#{$class-right} {
        border-right: $width $style $colour;
    }

    %#{$device}#{$border-class}-#{$class-top} {
        border-top: $width $style $colour;
    }

    %#{$device}#{$border-class}-#{$class-bottom} {
        border-bottom: $width $style $colour;
    }

    %#{$device}#{$border-class}-#{$class-vertical} {
        border-top: $width $style $colour;
        border-bottom: $width $style $colour;
    }

    %#{$device}#{$border-class}-#{$class-horizontal} {
        border-left: $width $style $colour;
        border-right: $width $style $colour;
    }

    %#{$device}#{$border-class}-none {
        border: none;
    }

    %#{$device}#{$border-class}-#{$class-left}-none {
        border-left: none;
    }

    %#{$device}#{$border-class}-#{$class-right}-none {
        border-right: none;
    }

    %#{$device}#{$border-class}-#{$class-top}-none {
        border-top: none;
    }

    %#{$device}#{$border-class}-#{$class-bottom}-none {
        border-bottom: none;
    }

    %#{$device}#{$border-class}-#{$class-vertical}-none {
        border-top: none;
        border-bottom: none;
    }

    %#{$device}#{$border-class}-#{$class-horizontal}-none {
        border-left: none;
        border-right: none;
    }

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

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

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

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

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

        .#{$device}#{$border-class}-#{$class-vertical} {
            @extend %#{$device}#{$border-class}-#{$class-vertical};
        }

        .#{$device}#{$border-class}-#{$class-horizontal} {
            @extend %#{$device}#{$border-class}-#{$class-horizontal};
        }

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

        .#{$device}#{$border-class}-#{$class-left}-none {
            @extend %#{$device}#{$border-class}-#{$class-left}-none;
        }

        .#{$device}#{$border-class}-#{$class-right}-none {
            @extend %#{$device}#{$border-class}-#{$class-right}-none;
        }

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

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

        .#{$device}#{$border-class}-#{$class-vertical}-none {
            @extend %#{$device}#{$border-class}-#{$class-vertical}-none;
        }

        .#{$device}#{$border-class}-#{$class-horizontal}-none {
            @extend %#{$device}#{$border-class}-#{$class-horizontal}-none;
        }
    }
}

@include border($border-width, $border-style, $border-colour);

@each $device, $pixels in $devices {
    @include media($device) {
        @include border($border-width, $border-style, $border-colour, $device + "-");
    }
}

@include mobile {
    @include border($border-width, $border-style, $border-colour, "mobile-");
}


@each $name, $hex in $colours {
    %#{$border-class}-#{"" + $name} {
        border-color: #{$hex};
    }

    @if $classes {
        .#{$border-class}-#{"" + $name} {
            @extend %#{$border-class}-#{"" + $name};
        }
    }
}

@each $device, $pixels in $devices {
    @include media($device) {
        @each $name, $hex in $colours {
            %#{$device}-#{$border-class}-#{"" + $name} {
                border-color: #{$hex};
            }

            @if $classes {
                .#{$device}-#{$border-class}-#{"" + $name} {
                    @extend %#{$device}-#{$border-class}-#{"" + $name};
                }
            }
        }
    }
}

@include mobile {
    @each $name, $hex in $colours {
        %mobile-#{$border-class}-#{"" + $name} {
            border-color: #{$hex};
        }

        @if $classes {
            .mobile-#{$border-class}-#{"" + $name} {
                @extend %mobile-#{$border-class}-#{"" + $name};
            }
        }
    }
}