// ═══════════════════════════════════════════════
// FERMENTY MOBILE — Mixins
// ═══════════════════════════════════════════════

// ── Truncate single line ──────────────────────
@mixin truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// ── Flex center ──────────────────────────────
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// ── Flex between ─────────────────────────────
@mixin flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

// ── Icon container ────────────────────────────
@mixin icon-box($size, $radius: $r-md, $bg: $g-pale, $color: $g-main) {
    width: $size;
    height: $size;
    border-radius: $radius;
    background: $bg;
    color: $color;
    @include flex-center;
    flex-shrink: 0;
}

// ── Card base ────────────────────────────────
@mixin card($padding: $sp-md) {
    background: #fff;
    border-radius: $r-lg;
    border: 1px solid $bd;
    padding: $padding;
}

// ── Progress bar ─────────────────────────────
@mixin progress-track($height: 4px, $bg: $g-pale) {
    height: $height;
    background: $bg;
    border-radius: $height;
    overflow: hidden;
}

// ── Status pill ──────────────────────────────
@mixin status-pill($bg, $color) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: $bg;
    color: $color;
    border-radius: $r-pill;
}

// ── Section label (for preview/dev labels, etc) ──
@mixin section-label {
    font-family: $font-ui;
    font-size: $fs-xs;
    font-weight: $fw-medium;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: $t-hint;
    background: none;
    padding: 0;
}