@charset "UTF-8";

// @description
// * flex-direction mixin.
// * This mixin provides a convenient way to set the `flex-direction`
// * property with vendor prefixes for better cross-browser compatibility.

// @access public

// @version 1.2.1

// @author Khaled Mohamed

// @license MIT

// @repository: https://github.com/Black-Axis/sass-pire

// @reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

// @namespace main-props

// @module main-props/flex-dir

// @dependencies:
// * - LibFunc.is-in-list (function).
// * - Error.throw (function).

// @param {String} $value
// * The value for the `flex-direction` property.
// * Allowed values:
// * row, r, row-reverse, r-rev, column, col, c, column-reverse, col-rev.
// * Default: row.

// @throws {Error}
// * Throws an error if the provided $value is not one of
// * the allowed values.

// @example
// * .example {
// *   @include flex-dir(column);
// * }

// @output:
// * .example {
// *   -webkit-box-orient: vertical;
// *   -webkit-box-direction: normal;
// *   -webkit-flex-direction: column;
// *   -ms-flex-direction: column;
// *   -moz-flex-direction: column;
// *   -o-flex-direction: column;
// *   flex-direction: column;
// * }

// @note
// * There are two mixins in this file.
// * The first is the (flex-dir) mixin and second is (f-d) mixin.
// * The second one is for only simplicity when using (flex-dir) mixin.
// * The core logic of (f-d) mixin is to call the first one.
// * You can use one of them as you want.

// stylelint-disable scss/dollar-variable-empty-line-before
// stylelint-disable scss/no-global-function-names

@use "../../../functions/global/is-in-list" as LibFunc;
@use "../../../development-utils/toggle-error-message" as Error;

@mixin flex-dir($value: row) {
    $flex-direction-values: (row, r, row-reverse, r-rev, column, col, c, column-reverse, col-rev, "") !default;

    $merge-flex-direction-column: (
        -webkit-box-orient: vertical,
        -webkit-box-direction: normal,
        -webkit-flex-direction: column,
        -ms-flex-direction: column,
        -moz-flex-direction: column,
        -o-flex-direction: column,
        flex-direction: column
    ) !default;

    $merge-flex-direction-column-reverse: (
        -webkit-box-orient: vertical,
        -webkit-box-direction: reverse,
        -webkit-flex-direction: column-reverse,
        -ms-flex-direction: column-reverse,
        -moz-flex-direction: column-reverse,
        -o-flex-direction: column-reverse,
        flex-direction: column-reverse
    ) !default;

    $merge-flex-direction-row: (
        -webkit-box-orient: horizontal,
        -webkit-box-direction: normal,
        -webkit-flex-direction: row,
        -ms-flex-direction: row,
        -moz-flex-direction: row,
        -o-flex-direction: row,
        flex-direction: row
    ) !default;

    $merge-flex-direction-row-reverse: (
        -webkit-box-orient: horizontal,
        -webkit-box-direction: reverse,
        -webkit-flex-direction: row-reverse,
        -ms-flex-direction: row-reverse,
        -moz-flex-direction: row-reverse,
        -o-flex-direction: row-reverse,
        flex-direction: row-reverse
    ) !default;

    @if LibFunc.is-in-list($flex-direction-values, $value) {
        @if $value == column or $value == col or $value == c {
            @each $prop, $val in $merge-flex-direction-column {
                #{$prop}: $val;
            }
        } @else if $value == row or $value == r or $value == "" {
            @each $prop, $val in $merge-flex-direction-row {
                #{$prop}: $val;
            }
        } @else if $value == row-reverse or $value == r-rev {
            @each $prop, $val in $merge-flex-direction-row-reverse {
                #{$prop}: $val;
            }
        } @else if $value == column-reverse or $value == col-rev {
            @each $prop, $val in $merge-flex-direction-column-reverse {
                #{$prop}: $val;
            }
        }
    } @else {
        content: Error.throw("The second parameter of is-in-list function must be one of: (#{$flex-direction-values}).");
    }
}

@mixin f-d($value: row) {
    @include flex-dir($value);
}