@mixin gutter($side) {
    $modifier: 1 !default;
    $border-side: 'right' !default;

    @if $side == 'right' {
        $modifier: 1;
        $border-side: 'left';
    } @else {
        $modifier: -1;
        $border-side: 'right';
    }

    border-#{$border-side}: $color-border-gray 1px solid;
    background: $color-bg-white;

    // Animate Everything
    transition: all 0.4s;

    &[data-gutter-mode='page'] {
        position: absolute;
        #{$side}: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        // Must be lower than the drawer's z-index
        z-index: 2;

        &[data-gutter-closed='true'] {
            transform: translateX($modifier * 100%);
        }
    }

    &[data-gutter-mode='drawer'] {
        position: absolute;
        #{$side}: 0; // Fix side to the edges of the parent element
        height: 100%;
        overflow-y: auto;
        z-index: 10;

        // Display a box shadow to either side when opened
        &[data-gutter-closed='false'] {
            box-shadow: ($modifier * -5px) 0 5px -4px $color-shadow-dark;
        }

        // Slide off the page when closed
        &[data-gutter-closed='true'] {
            transform: translateX($modifier * 100%);
        }
    }

    // Nothing special for column mode
    &[data-gutter-mode='column'] { } /* stylelint-disable-line */
}

.GutterContainer.GutterContainer {
    padding: 0;

    &:global(.media-tablet) {
        overflow-x: hidden;
    }

    &:global(.media-mobile) {
        overflow-x: hidden;
    }
}

.GutterBody {
    // Animate page slide ins/outs
    transition: transform 0.4s;
    min-width: 0;

    &.SlideRight {
        transform: translateX(100%);
    }

    &.SlideLeft {
        transform: translateX(-100%);
    }
}

.LeftGutter {
    @include gutter('left');
}

.RightGutter {
    @include gutter('right');
}
