/* ==========================================================================
    Layout extends and mixins
========================================================================== */

    @import 'xy-grid/xy-grid';

/* ==========================================================================
    Layout
========================================================================== */

.container {
    @include xy-grid-container;
}

.grid {
    @include xy-grid;

    .grid {
        @include xy-gutters($negative: true);
    }
}

.cell {
    @include xy-cell-base();
    @include xy-cell-static($grid-columns, false, $gutter-type: padding);

    &--auto {
        @include xy-cell-base(auto);
    }

    &--shrink {
        @include xy-cell-base(shrink);
    }

    &--full {        
        @include xy-cell;
    }

    &--half {
        @include xy-cell;

        @include breakpoint(medium) {
            @include xy-cell(1 of 2);
        }
    }

    &--third { 
        @include xy-cell;

        @include breakpoint(medium) {
            @include xy-cell(1 of 3);
        }
    }

    &--two-thirds {
        @include xy-cell;

        @include breakpoint(medium) {
            @include xy-cell(2 of 3);
        }
    }

    &--quarter {
        @include xy-cell;

        @include breakpoint(medium) {
            @include xy-cell(1 of 2);
        }

        @include breakpoint(large) {
            @include xy-cell(1 of 4);
        }
    }
}

.align {
    &--center {
        @include flex-align($x: center);
    }

    &--justify {
        @include flex-align($x: justify);
    }

    &--end {
        @include flex-align($x: right);
    }
}

.v-align {
    &--center {
        height: 100%;
        @include flex-align($y: middle);
    }
}

.hide-mobile {
    @include breakpoint (small only) {
        display: none;
    }
}

.show-desktop {
    display: none;

    @include breakpoint (large) {
        display: block;
    }
}

.mb {
    &-2 {
        margin-bottom: $global-margin*2;
    }
}