@use "sass:map";

@use "../../mixins/flex-layout" as *;

//
// Flex layout
//

@mixin row-flex-layout {
    @include row-flex;

    &:before,
    &:after {
        content: none;
    }

    > [class*="col-"] {
        flex: 1 0 auto;
    }
}

@mixin col-flex-layout {
    @include row-flex;

    > .col-flex-row {
        // Flexible content
        flex: 1 0 100%;
    }

    > .col-flex-head,
    > .col-flex-foot {
        // Stick to top/bottom
        flex: 0 0 auto;
    }
}

// html.flexbox {
    .row-flex { @include row-flex-layout; }
    .col-flex { @include col-flex-layout; }

    @each $breakpoint in map.keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
            .row-#{$breakpoint}-flex { @include row-flex-layout; }
            .col-#{$breakpoint}-flex { @include col-flex-layout; }
        }
    }
// }