// ============================================================================================= //
//                                            MIXINS                                             //
// ============================================================================================= //

@use "sass:math";
@use "@unsass/css";
@use "./functions";
@use "./variables";

///
/// @example - scss
///   .foo {
///     @include rem.declaration(font-size, 16px);
///   }
///
/// @example - css
///   .foo {
///     font-size: 1rem;
///   }
///
/// @example - scss
///   .foo {
///     @include rem.declaration(margin, 20px 30px);
///   }
///
/// @example - css
///   .foo {
///     margin: 1.25rem 1.875rem;
///   }
///
/// @example - scss
///   .foo {
///     @include rem.declaration(border, 1px solid darkcyan);
///   }
///
/// @example - css
///   .foo {
///     border: 0.0625rem solid darkcyan;
///   }
///
/// @example - scss
///   .foo {
///     @include rem.declaration(box-shadow, (0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75)));
///   }
///
/// @example - css
///   .foo {
///     box-shadow: 0 0 0.625rem 0.3125rem rgba(0, 139, 139, 0.75), inset 0 0 0.625rem 0.3125rem rgba(0, 139, 139, 0.75);
///   }
///
/// @see {mixin} css.declaration
/// @see {function} functions.convert
///
@mixin declaration($property, $value, $important: false) {
    @include css.declaration($property, functions.convert($value), $important);
}

///
/// @example - scss
///   html,
///   body {
///     @include rem.baseline;
///   }
///
/// @example - css
///   html,
///   body {
///     font-size: 100%;
///   }
///
/// @see {mixin} css.declaration
/// @see {function} functions.baseline
///
@mixin baseline($important: false) {
    @include css.declaration(font-size, functions.baseline(), $important);
}

///
/// @example - scss
///   @include config(10px);
///
@mixin config($baseline: null) {
    @if $baseline {
        variables.$baseline: $baseline;
    }
}