//  ----------------------------------------------------------------------------
//
//  Nitro UI: Utility Flex
//
//  Utility Flex component for Nitro UI.
//
//  ----------------------------------------------------------------------------
//
//  CONTENTS
//
//      1. Variables
//      2. Core Spacing
//      3. Responsive - Portable
//      4. Responsive - Tablet
//      5. Responsive - Mobile
//

@import '../../../core/src/variables';
@import '../../../core/src/mixins';

$flex-columns               : 12 !default;

$use-utility-flex           : true !default;

$responsive-flex-desktop    : false !default;
$responsive-flex-portable   : true !default;
$responsive-flex-tablet     : false !default;
$responsive-flex-mobile     : true !default;


@mixin flex-setup($breakpoint: 'global') {

    $breakpoint-separator: \@ !default;

    @if $breakpoint == 'global' {
        $breakpoint-separator: '';
        $breakpoint: '';
    }

    .u-flex#{$breakpoint-separator}#{$breakpoint}                  { display: flex; }
    .u-inline-flex#{$breakpoint-separator}#{$breakpoint}           { display: inline-flex; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-direction-row#{$breakpoint-separator}#{$breakpoint},
    .u-flex--row#{$breakpoint-separator}#{$breakpoint}             { flex-direction: row; }
    .u-direction-row-reverse#{$breakpoint-separator}#{$breakpoint},
    .u-flex--row-reverse#{$breakpoint-separator}#{$breakpoint}     { flex-direction: row-reverse; }
    .u-direction-column#{$breakpoint-separator}#{$breakpoint},
    .u-flex--column#{$breakpoint-separator}#{$breakpoint}          { flex-direction: column; }
    .u-direction-column-reverse#{$breakpoint-separator}#{$breakpoint},
    .u-flex--column-reverse#{$breakpoint-separator}#{$breakpoint}  { flex-direction: column-reverse; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-wrap#{$breakpoint-separator}#{$breakpoint},
    .u-flex--wrap#{$breakpoint-separator}#{$breakpoint}            { flex-wrap: wrap; }
    .u-wrap-reverse#{$breakpoint-separator}#{$breakpoint},
    .u-flex--wrap-reverse#{$breakpoint-separator}#{$breakpoint}    { flex-wrap: wrap-reverse; }
    .u-nowrap#{$breakpoint-separator}#{$breakpoint},
    .u-flex--nowrap#{$breakpoint-separator}#{$breakpoint}          { flex-wrap: nowrap; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-justify-content-start#{$breakpoint-separator}#{$breakpoint},
    .u-flex--justify-start#{$breakpoint-separator}#{$breakpoint}   { justify-content: flex-start; }
    .u-justify-content-end#{$breakpoint-separator}#{$breakpoint},
    .u-flex--justify-end#{$breakpoint-separator}#{$breakpoint}     { justify-content: flex-end; }
    .u-justify-content-center#{$breakpoint-separator}#{$breakpoint},
    .u-flex--justify-center#{$breakpoint-separator}#{$breakpoint}  { justify-content: center; }
    .u-justify-content-between#{$breakpoint-separator}#{$breakpoint},
    .u-flex--justify-between#{$breakpoint-separator}#{$breakpoint} { justify-content: space-between; }
    .u-justify-content-around#{$breakpoint-separator}#{$breakpoint},
    .u-flex--justify-around#{$breakpoint-separator}#{$breakpoint}  { justify-content: space-around; }
    .u-justify-content-evenly#{$breakpoint-separator}#{$breakpoint},
    .u-flex--justify-evenly#{$breakpoint-separator}#{$breakpoint}  { justify-content: space-evenly; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-align-items-start#{$breakpoint-separator}#{$breakpoint},
    .u-flex--items-start#{$breakpoint-separator}#{$breakpoint}     { align-items: flex-start; }
    .u-align-items-end#{$breakpoint-separator}#{$breakpoint},
    .u-flex--items-end#{$breakpoint-separator}#{$breakpoint}       { align-items: flex-end; }
    .u-align-items-center#{$breakpoint-separator}#{$breakpoint},
    .u-flex--items-center#{$breakpoint-separator}#{$breakpoint}    { align-items: center; }
    .u-align-items-baseline#{$breakpoint-separator}#{$breakpoint},
    .u-flex--items-baseline#{$breakpoint-separator}#{$breakpoint}  { align-items: baseline; }
    .u-align-items-stretch#{$breakpoint-separator}#{$breakpoint},
    .u-flex--items-stretch#{$breakpoint-separator}#{$breakpoint}   { align-items: stretch; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-align-content-start#{$breakpoint-separator}#{$breakpoint},
    .u-flex--content-start#{$breakpoint-separator}#{$breakpoint}   { align-content: flex-start; }
    .u-align-content-end#{$breakpoint-separator}#{$breakpoint},
    .u-flex--content-end#{$breakpoint-separator}#{$breakpoint}     { align-content: flex-end; }
    .u-align-content-center#{$breakpoint-separator}#{$breakpoint},
    .u-flex--content-center#{$breakpoint-separator}#{$breakpoint}  { align-content: center; }
    .u-align-content-between#{$breakpoint-separator}#{$breakpoint},
    .u-flex--content-between#{$breakpoint-separator}#{$breakpoint} { align-content: space-between; }
    .u-align-content-around#{$breakpoint-separator}#{$breakpoint},
    .u-flex--content-around#{$breakpoint-separator}#{$breakpoint}  { align-content: space-around; }
    .u-align-content-stretch#{$breakpoint-separator}#{$breakpoint},
    .u-flex--content-stretch#{$breakpoint-separator}#{$breakpoint} { align-content: stretch; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-self-auto#{$breakpoint-separator}#{$breakpoint},
    .u-flex__self-auto#{$breakpoint-separator}#{$breakpoint}       { align-self: auto; }
    .u-self-start#{$breakpoint-separator}#{$breakpoint},
    .u-flex__self-start#{$breakpoint-separator}#{$breakpoint}      { align-self: flex-start; }
    .u-self-end#{$breakpoint-separator}#{$breakpoint},
    .u-flex__self-end#{$breakpoint-separator}#{$breakpoint}        { align-self: flex-end; }
    .u-self-center#{$breakpoint-separator}#{$breakpoint},
    .u-flex__self-center#{$breakpoint-separator}#{$breakpoint}     { align-self: center; }
    .u-self-baseline#{$breakpoint-separator}#{$breakpoint},
    .u-flex__self-baseline#{$breakpoint-separator}#{$breakpoint}   { align-self: baseline; }
    .u-self-stretch#{$breakpoint-separator}#{$breakpoint},
    .u-flex__self-stretch#{$breakpoint-separator}#{$breakpoint}    { align-self: stretch; }

    // Ikram :
    // Making the classnames more general so that it can be reusable
    // with other components and utilities styling
    .u-fill#{$breakpoint-separator}#{$breakpoint},
    .u-flex__fill#{$breakpoint-separator}#{$breakpoint}            { flex: 1 1 auto; }
    .u-grow-0#{$breakpoint-separator}#{$breakpoint},
    .u-flex__grow-0#{$breakpoint-separator}#{$breakpoint}          { flex-grow: 0; }
    .u-grow-1#{$breakpoint-separator}#{$breakpoint},
    .u-flex__grow-1#{$breakpoint-separator}#{$breakpoint}          { flex-grow: 1; }
    .u-shrink-0#{$breakpoint-separator}#{$breakpoint},
    .u-flex__shrink-0#{$breakpoint-separator}#{$breakpoint}        { flex-shrink: 0; }
    .u-shrink-1#{$breakpoint-separator}#{$breakpoint},
    .u-flex__shrink-1#{$breakpoint-separator}#{$breakpoint}        { flex-shrink: 1; }


    .u-order-first#{$breakpoint-separator}#{$breakpoint}           { order: -1; }
    .u-order-last#{$breakpoint-separator}#{$breakpoint}            { order: $flex-columns + 1; }

    @for $i from 0 through $flex-columns {
      .u-order-#{$i}#{$breakpoint-separator}#{$breakpoint} { order: $i; }
    }

} // @mixin flex-setup($breakpoint: 'global')



@if $use-utility-flex {
    @include flex-setup();

    @if $responsive {
        @if $responsive-flex-desktop {
            @include media-query(desktop) {
                @include flex-setup('portable');
            }
        }

        @if $responsive-flex-portable {
            @include media-query(portable) {
                @include flex-setup('portable');
            }
        }

        @if $responsive-flex-tablet {
            @include media-query(tablet) {
                @include flex-setup('portable');
            }
        }

        @if $responsive-flex-mobile {
            @include media-query(mobile) {
                @include flex-setup('mobile');
            }
        }
    }
}