// ============================================================================
// Atoms | Box
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;
@use "../../soul_object" as *;
@use "../../soul_type" as *;

// ============================================================================
// Maps
// ============================================================================

///
/// Map of predefined box sizes using baseline units.
/// @group Boxes
///
$box_size_map: (
    "00": 4,
    "01": 1,
    "02": 2,
    "03": 3,
    "04": 4,
    "05": 5,
    "06": 6,
    "07": 7,
    "08": 8,
    "09": 9,
    "10": 10,
    "11": 11,
    "12": 12,
) !default;

// ============================================================================
// Mixins
// ============================================================================

///
/// Sets a square box size based on a baseline multiplier.
/// @param {Number} $val - The size value to use for the box dimensions.
/// @group Boxes
///
@mixin box--size($val) {
    @include reset_bleed;
    @include sizing--content;
    $size: baseline($val);
    aspect-ratio: 1;
    width: $size;
    height: $size;
    min-width: $size;
    min-height: $size;
    max-width: $size;
    max-height: $size;
    font-size: $size;
    // Optional:
    // border-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@mixin box--size_rect($w, $h) {
    width: baseline($w);
    height: baseline($h);
    min-width: baseline($w);
    min-height: baseline($h);
    max-width: baseline($w);
    max-height: baseline($h);
}