// ============================================================================
// Atoms | Labels
// ============================================================================

@use "sass:map";
@use "sass:list";

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

/// Unified label styling for both `<label>` elements and `.label` classes.
/// Size map for label styles
$label-size-map: (
    "sm": (
        "02",
        0
    ),
    "md": (
        "03",
        1
    ),
    "lg": (
        "04",
        2
    )
) !default;

/// @mixin label_base
/// Unified label styling for both `<label>` elements and `.label` classes.
///
/// @param {String} $size ['m'] - Size key: 's', 'm', or 'l'.
///
@mixin label--base($size: "md") {
    @include reset_bleed;

    $font-size: list.nth(map.get($label-size-map, $size), 1);
    $margin: list.nth(map.get($label-size-map, $size), 2);

    @include font--size($font-size);
    display: block;
    width: 100%;
    // margin-top: 0;
    // margin-bottom: baseline($margin);
    padding-bottom: baseline($margin);
    // color: var(#{$color});
    user-select: none;
    cursor: default;
}

//   @include object--height--fixed(md); // uses 20q

@mixin label--hidden {
    @include visually-hidden;
}

///
/// Native label element styling
/// Provides basic styling for labels in forms.
///
.label,
label {
    @include label--base;
    //     @include label_base(--color_dark, "m");
}

.label--hidden {
    @include label--hidden;
}

.label--sm {
    @include label--base("sm");
    @include object--height--fixed(sm);
}

.label--md {
    @include label--base("md");
    @include object--height--fixed(md); // uses 20q
}

.label--lg {
    @include label--base("lg");
    @include object--height--fixed(lg);
}