@charset "UTF-8";

// @description
// * center-x mixin.
// * This mixin generates CSS properties to horizontally center an element
// * within its container. It sets the right and left margins to `auto` and
// * add margin-inline property and sets it to `auto`.

// @access public

// @version 1.0.0

// @author Khaled Mohamed

// @license MIT

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

// @namespace general

// @module general/center-x

// @dependencies:
// * - Nothing.

// @example
// * .example {
// *   @include center-x;
// * }

// @output
// * .example {
// *   --sp-mx: auto;
// *   margin-inline: var(--sp-mx);
// *   margin-right: var(--sp-mx);
// *   margin-left: var(--sp-mx);
// * }

// @note
// * This mixin is useful for centering block-level elements horizontally
// * within their container.

@mixin center-x {
    --sp-mx: auto;

    margin-inline: var(--sp-mx);
    margin: {
        right: var(--sp-mx);
        left: var(--sp-mx);
    }
}