// ============================================================================
// Mixins | Alert Component
// ============================================================================

/// Alert Component
/// ============================================================================
/// @group Components
/// @author Scape Agency
/// @since 0.1.0
/// @access public
///

@use "sass:string";

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

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

@mixin alert--base {
    display: flex;
    // align-items: flex-start;
    align-items: center; // vertically center icon + content
    // padding: q(12) q(16); // consistent top/bottom and left/right
    padding-left: q(4);
    padding-right: q(4);
    gap: q(4); // space between icon and text
    white-space: nowrap; // Prevent line breaks
    overflow: hidden; // Optional: hide overflow
    text-overflow: ellipsis; // Optional: ellipsis for long text
    font-size: q(12) !important;
    border-width: q(1);
    border-style: solid;
    border-radius: 0;
    border-color: transparent; // default, overridden by variants
    &::before {
        content: none;
        display: inline-block;
        // position: absolute;
        // left: q(8);
        top: q(12); // adjust vertically to center with text
        font-size: q(8);
        // line-height: 1;
        flex-shrink: 0;
    }
}

@function css-var($name) {
    @return string.unquote("--#{$name}");
}

@mixin alert--variant($token) {
    background-color: var(css-var("color_#{$token}--75"));
    color: var(css-var("color_#{$token}"));
    border-color: var(css-var("color_#{$token}--50"));

    @include alert--base; // includes nested `&__icon`, etc.
}

@mixin alert--success {
    @include alert--variant("log_success");
    &::before {
        content: "✔";
    }
}

@mixin alert--warning {
    @include alert--variant("log_warning");
    &::before {
        content: "⚠";
    }
}

@mixin alert--error {
    @include alert--variant("log_error");
    &::before {
        content: "✖";
    }
}

@mixin alert--info {
    @include alert--variant("log_info");
    &::before {
        content: "ℹ";
    }
}

@mixin alert {
    @include alert--base;
}