/* stylelint-disable selector-class-pattern */

@use '../../styles/common/rtl';

/*
*  Responsive attributes
*
*  References:
*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
*  2) https://css-tricks.com/almanac/properties/f/flex/
*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
*  5) http://godban.com.ua/projects/flexgrid
*/
@-moz-document url-prefix() {
    .layout-fill {
        margin: 0;
        width: 100%;
        min-height: 100%;
        height: 100%;
    }
}

@mixin flex-order-for-name($sizes: null) {
    @if not $sizes {
        $sizes: '';

        .flex-order {
            order: 0;
        }
    }

    @for $i from -20 through 20 {
        $order: '';
        $suffix: '';

        @each $s in $sizes {
            @if $s != '' {
                $suffix: '#{$s}-#{$i}';
            } @else {
                $suffix: '#{$i}';
            }

            $order: '.flex-order-#{$suffix}';
        }

        #{$order} {
            order: #{$i};
        }
    }
}

@mixin offset-for-name($sizes: null) {
    @if not $sizes {
        $sizes: '';
    }

    @for $i from 0 through 19 {
        $offsets: '';
        $suffix: '';

        @each $s in $sizes {
            @if $s != '' {
                $suffix: '#{$s}-#{$i * 5}';
            } @else {
                $suffix: '#{$i * 5}';
            }

            $offsets: '.offset-#{$suffix}, ' +
                '.flex-offset-#{$suffix}, ' +
                '.layout-margin .flex-offset-#{$suffix}, ' +
                '.layout-margin .offset-#{$suffix}';
        }

        #{$offsets} {
            @if $i != 0 {
                @include rtl.rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto);
            } @else {
                @include rtl.rtl-prop(margin-left, margin-right, 0, auto);
            }
        }
    }

    @each $i in 33 {
        $offsets: '';
        $suffix: '';

        @each $s in $sizes {
            @if $s != '' {
                $suffix: '#{$s}-#{$i}';
            } @else {
                $suffix: '#{$i}';
            }

            $offsets: '.offset-#{$suffix}, ' +
                '.flex-offset-#{$suffix}, ' +
                '.layout-margin .flex-offset-#{$suffix}, ' +
                '.layout-margin .offset-#{$suffix}';
        }

        #{$offsets} {
            margin-left: calc(100% / 3);
        }
    }

    @each $i in 66 {
        $offsets: '';
        $suffix: '';

        @each $s in $sizes {
            @if $s != '' {
                $suffix: '#{$s}-#{$i}';
            } @else {
                $suffix: '#{$i}';
            }

            $offsets: '.offset-#{$suffix}, ' +
                '.flex-offset-#{$suffix}, ' +
                '.layout-margin .flex-offset-#{$suffix}, ' +
                '.layout-margin .offset-#{$suffix}';
        }

        #{$offsets} {
            @include rtl.rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
        }
    }
}

@mixin layout-for-name($name: null) {
    @if not $name {
        $name: '';
    }

    @if $name != '' {
        $name: '-#{$name}';
    }

    .layout#{$name},
    .layout#{$name}-column,
    .layout#{$name}-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;

        min-width: 0;
        min-height: 0;
    }

    .layout#{$name}-column {
        flex-direction: column;
    }

    .layout#{$name}-row {
        flex-direction: row;
    }
}

@mixin flex-properties-for-name($name: null) {
    $flexName: 'flex';

    @if $name {
        $flexName: 'flex-#{$name}';
        $name: '-#{$name}';
    } @else {
        $name: '';
    }

    // === flex: 1 1 0%;
    .#{$flexName} {
        flex: 1;
    }
    .#{$flexName}-grow {
        flex: 1 1 100%;
    }
    .#{$flexName}-initial {
        flex: 0 1 auto;
    }
    .#{$flexName}-auto {
        flex: 1 1 auto;
    }
    .#{$flexName}-none {
        flex: 0 0 auto;
    }
    .#{$flexName}-no-shrink {
        flex: 1 0 auto;
    }
    .#{$flexName}-no-grow {
        flex: 0 1 auto;
    }

    // (1-20) * 5 = 0-100%
    @for $i from 0 through 20 {
        $value: #{$i * 5 + '%'};

        .#{$flexName}-#{$i * 5} {
            flex: 1 1 100%;
            max-width: #{$value};
            max-height: 100%;
        }

        .layout-row > .#{$flexName}-#{$i * 5} {
            flex: 1 1 100%;
            max-width: #{$value};
            max-height: 100%;

            // Required by Chrome M48+ due to http://crbug.com/546034
            @if $i == 0 {
                min-width: 0;
            }
        }

        .layout-column > .#{$flexName}-#{$i * 5} {
            flex: 1 1 100%;
            max-width: 100%;
            max-height: #{$value};
        }

        .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
            flex: 1 1 100%;
            max-width: #{$value};
            max-height: 100%;

            // Required by Chrome M48+ due to http://crbug.com/546034
            @if $i == 0 {
                min-width: 0;
            }
        }

        .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
            flex: 1 1 100%;
            max-width: 100%;
            max-height: #{$value};

            // Required by Chrome M48+ due to http://crbug.com/546034
            @if $i == 0 {
                min-height: 0;
            }
        }
    }

    @if ($name == '') {
        .flex-33 {
            flex: 1 1 100%;
            max-width: 33.33%;
            max-height: 100%;
        }

        .flex-66 {
            flex: 1 1 100%;
            max-width: 66.66%;
            max-height: 100%;
        }
    }

    .layout-row {
        > .#{$flexName}-33 {
            flex: 1 1 33.33%;
            max-width: 33.33%;
            max-height: 100%;
        }

        > .#{$flexName}-66 {
            flex: 1 1 66.66%;
            max-width: 66.66%;
            max-height: 100%;
        }
    }

    .layout-column {
        > .#{$flexName}-33 {
            flex: 1 1 33.33%;
            max-width: 100%;
            max-height: 33.33%;
        }

        > .#{$flexName}-66 {
            flex: 1 1 66.66%;
            max-width: 100%;
            max-height: 66.66%;
        }
    }

    .layout#{$name}-row {
        > .#{$flexName}-33 {
            flex: 1 1 100%;
            max-width: 33.33%;
            max-height: 100%;
        }

        > .#{$flexName}-66 {
            flex: 1 1 100%;
            max-width: 66.66%;
            max-height: 100%;
        }

        // Required by Chrome M48+ due to http://crbug.com/546034
        > .flex {
            min-width: 0;
        }
    }

    .layout#{$name}-column {
        > .#{$flexName}-33 {
            flex: 1 1 100%;
            max-width: 100%;
            max-height: 33.33%;
        }

        > .#{$flexName}-66 {
            flex: 1 1 100%;
            max-width: 100%;
            max-height: 66.66%;
        }

        // Required by Chrome M48+ due to http://crbug.com/546034
        > .flex {
            min-height: 0;
        }
    }

    .layout-wrap {
        flex-wrap: wrap;
    }

    .layout-nowrap {
        flex-wrap: nowrap;
    }

    .layout-fill {
        margin: 0;

        width: 100%;

        min-height: 100%;
        height: 100%;
    }
}

@mixin layout-align-for-name($suffix: null) {
    // Alignment attributes for layout containers' children
    // Arrange on the Main Axis
    // center, start, end, space-between, space-around
    // flex-start is the default for justify-content
    // ------------------------------

    $name: 'layout-align';
    @if $suffix {
        $name: 'layout-align-#{$suffix}';
    }

    .#{$name},
    .#{$name}-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }

    // Main Axis Center
    .#{$name}-start,
    .#{$name}-start-start,
    .#{$name}-start-center,
    .#{$name}-start-end,
    .#{$name}-start-stretch {
        justify-content: flex-start;
    }

    // Main Axis Center
    .#{$name}-center, //stretch
    .#{$name}-center-start,
    .#{$name}-center-center,
    .#{$name}-center-end,
    .#{$name}-center-stretch {
        justify-content: center;
    }

    // Main Axis End
    .#{$name}-end, //stretch
    .#{$name}-end-start,
    .#{$name}-end-center,
    .#{$name}-end-end,
    .#{$name}-end-stretch {
        justify-content: flex-end;
    }

    // Main Axis Space Around
    .#{$name}-space-around, //stretch
    .#{$name}-space-around-center,
    .#{$name}-space-around-start,
    .#{$name}-space-around-end,
    .#{$name}-space-around-stretch {
        justify-content: space-around;
    }

    // Main Axis Space Between
    .#{$name}-space-between, //stretch
    .#{$name}-space-between-center,
    .#{$name}-space-between-start,
    .#{$name}-space-between-end,
    .#{$name}-space-between-stretch {
        justify-content: space-between;
    }

    // Arrange on the Cross Axis
    // center, start, end
    // stretch is the default for align-items
    // ------------------------------

    // Cross Axis Start
    .#{$name}-start-start,
    .#{$name}-center-start,
    .#{$name}-end-start,
    .#{$name}-space-between-start,
    .#{$name}-space-around-start {
        align-items: flex-start;
        align-content: flex-start;
    }

    // Cross Axis Center
    .#{$name}-start-center,
    .#{$name}-center-center,
    .#{$name}-end-center,
    .#{$name}-space-between-center,
    .#{$name}-space-around-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }

    // Cross Axis Center IE overflow fix
    .#{$name}-start-center > *,
    .#{$name}-center-center > *,
    .#{$name}-end-center > *,
    .#{$name}-space-between-center > *,
    .#{$name}-space-around-center > * {
        max-width: 100%;
    }

    // Cross Axis End
    .#{$name}-start-end,
    .#{$name}-center-end,
    .#{$name}-end-end,
    .#{$name}-space-between-end,
    .#{$name}-space-around-end {
        align-items: flex-end;
        align-content: flex-end;
    }

    // Cross Axis Start
    .#{$name}-start-stretch,
    .#{$name}-center-stretch,
    .#{$name}-end-stretch,
    .#{$name}-space-between-stretch,
    .#{$name}-space-around-stretch {
        align-items: stretch;
        align-content: stretch;
    }
}

@mixin layout-indents() {
    $sizes: (
        '3xs': var(--kbq-size-3xs),
        'xxs': var(--kbq-size-xxs),
        'xs': var(--kbq-size-xs),
        's': var(--kbq-size-s),
        'm': var(--kbq-size-m),
        'l': var(--kbq-size-l),
        'xl': var(--kbq-size-xl),
        'xxl': var(--kbq-size-xxl),
        '3xl': var(--kbq-size-3xl),
        '4xl': var(--kbq-size-4xl),
        '5xl': var(--kbq-size-5xl),
        '6xl': var(--kbq-size-6xl),
        '7xl': var(--kbq-size-7xl)
    );

    $indents: 'padding', 'margin', 'gap';

    @each $indent in $indents {
        @each $name, $value in $sizes {
            .layout-#{$indent}-#{$name} {
                #{$indent}: $value !important;
            }

            .layout-#{$indent}-top-#{$name} {
                #{$indent}-top: $value !important;
            }

            .layout-#{$indent}-right-#{$name} {
                #{$indent}-right: $value !important;
            }

            .layout-#{$indent}-bottom-#{$name} {
                #{$indent}-bottom: $value !important;
            }

            .layout-#{$indent}-left-#{$name} {
                #{$indent}-left: $value !important;
            }

            .layout-#{$indent}-vertical-#{$name} {
                #{$indent}-top: $value !important;
                #{$indent}-bottom: $value !important;
            }

            .layout-#{$indent}-horizontal-#{$name} {
                #{$indent}-left: $value !important;
                #{$indent}-right: $value !important;
            }
        }

        .layout-#{$indent}-no-top {
            #{$indent}-top: 0 !important;
        }

        .layout-#{$indent}-no-right {
            #{$indent}-right: 0 !important;
        }

        .layout-#{$indent}-no-bottom {
            #{$indent}-bottom: 0 !important;
        }

        .layout-#{$indent}-no-left {
            #{$indent}-left: 0 !important;
        }
    }
}

@mixin layouts-for-breakpoint($name: null) {
    @include flex-order-for-name($name);
    @include offset-for-name($name);
    @include layout-align-for-name($name);

    @include flex-properties-for-name($name);
    @include layout-for-name($name);

    @include layout-indents();
}