// --------------------------------------------------
// grid modifiers
// --------------------------------------------------

// --------------------------------------------------
// grid full bleed (no internal padding)
// --------------------------------------------------
.@{reflex-prefix}grid--bleed {
    [class*="@{reflex-prefix}grid__col-"] {
        padding: 0;
    }
}

.@{reflex-prefix}grid--external-bleed {
    margin: -@reflex-cell-spacing -@reflex-cell-spacing -@reflex-cell-spacing -@reflex-cell-spacing;
    width: auto;
    max-width: unset;
}

.@{reflex-prefix}grid--external-bleed-x {
    margin-left: -@reflex-cell-spacing;
    margin-right: -@reflex-cell-spacing;
    width: auto;
    max-width: unset;
}

.@{reflex-prefix}grid--external-bleed-y {
    margin-top: -@reflex-cell-spacing;
    margin-bottom: -@reflex-cell-spacing;
    width: auto;
    max-width: unset;
}

.@{reflex-prefix}grid--external-bleed-bottom {
    margin-bottom: -@reflex-cell-spacing;
    width: auto;
    max-width: unset;
}

// --------------------------------------------------
// grid full border
// --------------------------------------------------
.@{reflex-prefix}grid--border {
    border: 1px solid @gray-light;
}

// --------------------------------------------------
// flex-wrap
// --------------------------------------------------

.@{reflex-prefix}grid--wrap {
    .flex-wrap(wrap);
}

.@{reflex-prefix}grid--no-wrap {
    .flex-wrap(nowrap);
}

.@{reflex-prefix}grid--wrap-reverse {
    .flex-wrap(wrap-reverse);
}

// --------------------------------------------------
// flex-direction
// --------------------------------------------------

.@{reflex-prefix}grid--direction-row {
    .flex-direction(row);
}

.@{reflex-prefix}grid--direction-row-reverse {
    .flex-direction(row-reverse);
}

.@{reflex-prefix}grid--direction-column {
    .flex-direction(column);
}

.@{reflex-prefix}grid--direction-column-reverse {
    .flex-direction(column-reverse);
}

// --------------------------------------------------
// align-grid__col-cells (cross axis)
// --------------------------------------------------

.@{reflex-prefix}grid--align-start {
    .align-items(flex-start);
}

.@{reflex-prefix}grid--align-end {
    .align-items(flex-end);

    // fallback to legacy vertical-align
    [class*="@{reflex-prefix}grid__col-"] {
        vertical-align: bottom;
    }
}

.@{reflex-prefix}grid--align-center {
    .align-items(center);

    // fallback to legacy vertical-align
    [class*="@{reflex-prefix}grid__col-"] {
        vertical-align: middle;
    }
}

.@{reflex-prefix}grid--align-baseline {
    .align-items(baseline);

    // fallback to legacy vertical-align
    [class*="@{reflex-prefix}grid__col-"] {
        vertical-align: baseline;
    }
}

// --------------------------------------------------
// align-content (cross axis)
// --------------------------------------------------

.@{reflex-prefix}grid--align-content-start {
    .align-content(flex-start);
}

.@{reflex-prefix}grid--align-content-end {
    .align-content(flex-end);

    // fallback to legacy vertical-align
    [class*="@{reflex-prefix}grid__col-"] {
        vertical-align: bottom;
    }
}

.@{reflex-prefix}grid--align-content-center {
    .align-content(center);
}

.@{reflex-prefix}grid--align-content-space-between {
    .align-content(space-between);
}

.@{reflex-prefix}grid--align-content-space-around {
    .align-content(space-around);
}



// --------------------------------------------------
// align-self
// --------------------------------------------------

.@{reflex-prefix}grid--align-self-stretch {
    .align-self(stretch);
}

.@{reflex-prefix}grid--align-self-start {
    .align-self(flex-start);
}

.@{reflex-prefix}grid--align-self-end {
    .align-self(flex-end);
    vertical-align: bottom;
}

.@{reflex-prefix}grid--align-self-center {
    .align-self(center);
    vertical-align: middle;
}

.@{reflex-prefix}grid--align-self-baseline {
    .align-self(baseline);
    vertical-align: baseline;
}

// --------------------------------------------------
// justify-content (main axis)
// --------------------------------------------------

.@{reflex-prefix}grid--justify-start {
    .justify-content-start();
}

.@{reflex-prefix}grid--justify-end {
    .justify-content-end();

    .@{reflex-prefix}grid__cell,
    [class*="@{reflex-prefix}grid__col-"] {
        .resetTextAlign();
    }
}

.@{reflex-prefix}grid--justify-center {
    .justify-content-center();

    .@{reflex-prefix}grid__cell,
    [class*="@{reflex-prefix}grid__col-"] {
        .resetTextAlign();
    }
}

.@{reflex-prefix}grid--justify-space-between {
    .justify-content-space-between();

    .@{reflex-prefix}grid__cell,
    [class*="@{reflex-prefix}grid__col-"] {
        .resetTextAlign();
    }
}

.@{reflex-prefix}grid--justify-space-around {
    .justify-content-space-around();

    .@{reflex-prefix}grid__cell,
    [class*="@{reflex-prefix}grid__col-"] {
        .resetTextAlign();
    }
}

.@{reflex-prefix}grid--extra-padding {
    padding: @reflex-cell-spacing-lg 0;
}

// --------------------------------------------------
// grid__col modifiers
// --------------------------------------------------

.@{reflex-prefix}grid__col--bleed {
    padding: 0;
}

.@{reflex-prefix}grid__col--bleed-x {
    padding: @reflex-cell-spacing 0;
}

.@{reflex-prefix}grid__col--bleed-y {
    padding: 0 @reflex-cell-spacing;
}

.@{reflex-prefix}grid__col--bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    padding: @reflex-cell-spacing-lg;
}

.@{reflex-prefix}grid__col--border {
    border: 1px solid @gray-light;
    margin-bottom: @reflex-cell-spacing;
}

.@{reflex-prefix}grid__col--line-top {
    border-top: 1px solid @gray-lighter;
}

.@{reflex-prefix}grid__col-45px {
    width: 45px;
}



// --------------------------------------------------
// grid__cell modifiers
// --------------------------------------------------

.@{reflex-prefix}grid__cell--align-middle-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.@{reflex-prefix}grid__cell--align-middle-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.@{reflex-prefix}grid__cell--padding-sm {
    padding: @reflex-cell-spacing-sm;
}

.@{reflex-prefix}grid__cell--padding-md {
    padding: @reflex-cell-spacing-md;
}

.@{reflex-prefix}grid__cell--padding-lg {
    padding: @reflex-cell-spacing-lg;
}

.@{reflex-prefix}grid__cell-img {
    display: block;
    .display-flex-only();
    .flex(0, 0, auto);
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    height: auto;
}

.@{reflex-prefix}flex-img {
    display: block;
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
    width: 100%;
}

.@{reflex-prefix}grid__cell-img--centered {
    width: auto;
    margin: 0 auto;
}

.@{reflex-prefix}grid__cell-img--ball {
    border-radius: 1000px;
}

.@{reflex-prefix}grid__cell-img--triangle {
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.@{reflex-prefix}grid__cell-footer {
    .display-flex();
    width: 100%;
    margin-top: auto;
}

