////
///
/// Accordion Components Mixins Module
/// ===========================================================================
///
/// @group Atoms
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @todo None
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

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

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

// ============================================================================
// Atom | Badge
// ============================================================================

/// Base badge styles
@mixin badge--base {
    display: inline-block;
    line-height: 1;
    color: var(--color_fill_primary);
    background-color: var(--color_text_primary);
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    user-select: none;
    padding: q(4) q(8);
    @include sizing--border;
    // Empty badges collapse automatically
    &:empty {
        display: none;
    }
    /// Color variants
    &.accent {
        @include object--fill(accent_primary);
    }

    &.info {
        @include object--fill(log_info);
    }

    &.success {
        @include object--fill(log_success);
    }

    &.warning {
        @include object--fill(log_warning);
    }

    &.error {
        @include object--fill(log_error);
    }

    // Shape Modifiers
    &.squared {
        @include object--corner--squared;
    }

    &.rounded {
        @include object--corner--rounded;
    }

    &.pill {
        @include object--corner--pill;
    }

    /// Size Modifiers
    &.xs {
        @include font--size("02");
    }
    &.sm {
        @include font--size("03");
    }
    &.md {
        @include font--size("04");
    }
    &.lg {
        @include font--size("05");
    }
    &.xl {
        @include font--size("06");
    }
}

// .alert,
// .badge,
// .button,
// .panel {
//     // Shape Modifiers
//     &.pill {
//         @include object--corner--pill;
//     }
// }

/// Color variants
// @mixin badge--info {
//     background-color: var(--color_log_info);
// }

// @mixin badge--success {
//     background-color: var(--color_log_success);
// }

// @mixin badge--warning {
//     background-color: var(--color_log_warning);
// }

// @mixin badge--error {
//     background-color: var(--color_log_error);
// }

/// Shape variants

// @mixin badge--squared {
//     @include object--corner--squared;
// }
// @mixin badge--rounded {
//     @include object--corner--rounded;
// }
// @mixin badge--pill {
//     @include object--corner--pill;
// }