$stackable-border-width: $grid * .2;

@mixin partial-width ($width) {
    clear: none;
    float: left;
    width: $width;
}

@mixin stacked-responsiveness () {
    @include respond-to-wide {
        margin-left: ($grid * -.2);
    }

    &.non-responsive {
        margin-left: ($grid * -.2);
    }

    &.eighty {
        @include respond-to-wide {
            width: calc(80% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(80% + #{$stackable-border-width});
        }
    }

    &.three-quarters {
        @include respond-to-wide {
            width: calc(75% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(75% + #{$stackable-border-width});
        }
    }

    &.two-thirds {
        @include respond-to-wide {
            width: calc(66.66666% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(66.66666% + #{$stackable-border-width});
        }
    }

    &.sixty {
        @include respond-to-wide {
            width: calc(60% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(60% + #{$stackable-border-width});
        }
    }

    &.half {
        @include respond-to-wide {
            width: calc(50% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(50% + #{$stackable-border-width});
        }
    }

    &.forty {
        @include respond-to-wide {
            width: calc(40% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(40% + #{$stackable-border-width});
        }
    }

    &.third {
        @include respond-to-wide {
            width: calc(33.33333% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(33.33333% + #{$stackable-border-width});
        }
    }

    &.quarter {
        @include respond-to-wide {
            width: calc(25% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(25% + #{$stackable-border-width});
        }
    }

    &.twenty {
        @include respond-to-wide {
            width: calc(20% + #{$stackable-border-width});
        }

        &.non-responsive {
            width: calc(20% + #{$stackable-border-width});
        }
    }
}

@mixin stackable () {
    &.square {
        border-radius: 0;
    }

    &.eighty {
        @include respond-to-wide {
            @include partial-width(80%);
        }

        &.non-responsive {
            @include partial-width(80%);
        }
    }

    &.three-quarters {
        @include respond-to-wide {
            @include partial-width(75%);
        }

        &.non-responsive {
            @include partial-width(75%);
        }
    }

    &.two-thirds {
        @include respond-to-wide {
            @include partial-width(66.66666%);
        }

        &.non-responsive {
            @include partial-width(66.66666%);
        }
    }

    &.sixty {
        @include respond-to-wide {
            @include partial-width(60%);
        }

        &.non-responsive {
            @include partial-width(60%);
        }
    }

    &.half {
        @include respond-to-wide {
            @include partial-width(50%);
        }

        &.non-responsive {
            @include partial-width(50%);
        }
    }
    &.forty {
        @include respond-to-wide {
            @include partial-width(40%);
        }

        &.non-responsive {
            @include partial-width(40%);
        }
    }

    &.third {
        @include respond-to-wide {
            @include partial-width(33.33333%);
        }

        &.non-responsive {
            @include partial-width(33.33333%);
        }
    }

    &.quarter {
        @include respond-to-wide {
            @include partial-width(25%);
        }

        &.non-responsive {
            @include partial-width(25%);
        }
    }

    &.twenty {
        @include respond-to-wide {
            @include partial-width(20%);
        }

        &.non-responsive {
            @include partial-width(20%);
        }
    }

    &.left {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    &.center {
        @include stacked-responsiveness();
        border-radius: 0;

        &::after {
            clear: both;
            content: '';
            display: block;
        }
    }

    &.right {
        @include stacked-responsiveness();

        border-bottom-left-radius: 0;
        border-top-left-radius: 0;

        &::after {
            clear: both;
            content: '';
            display: block;
        }
    }

    &.top {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    &.top-left {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        @include respond-to-wide {
            border-top-right-radius: 0;
        }

        &.non-responsive {
            border-top-right-radius: 0;
        }
    }

    &.top-right {
        @include stacked-responsiveness();

        border-radius: 0;
        clear: right;

        @include respond-to-wide {
            border-top-right-radius: $border-radius;
        }

        &.non-responsive {
            border-top-right-radius: $border-radius;
        }

    }

    &.bottom {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    &.bottom-left {
        border-radius: 0;

        @include respond-to-wide {
            border-bottom-left-radius: $border-radius;
        }

        &.non-responsive {
            border-bottom-left-radius: $border-radius;
        }
    }

    &.bottom-right {
        @include stacked-responsiveness();

        border-top-left-radius: 0;
        border-top-right-radius: 0;

        @include respond-to-wide {
            border-bottom-left-radius: 0;
        }

        &.non-responsive {
            border-bottom-left-radius: 0;
        }
    }
}