@use "sass:map";
@use "./chip.config" as config;
@use "../../01-core/external" as *;

@mixin ss-chip {
    display: inline-flex;
    align-items: center;
    gap: map.get(config.$ss-chip-config, gap);

    height: map.get(config.$ss-chip-config, height);
    padding-inline: map.get(config.$ss-chip-config, padding-inline);

    background: map.get(config.$ss-chip-config, bg);
    color: map.get(config.$ss-chip-config, fg);
    border: q(1) solid map.get(config.$ss-chip-config, border);
    border-radius: map.get(config.$ss-chip-config, radius);

    font-size: map.get(config.$ss-chip-config, font-size);
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

@mixin ss-chip-removable {
    cursor: default;
}

/// Names of the status variants in `$ss-chip-config` (`variants`).
@function ss-chip-variant-names() {
    @return map.keys(map.get(config.$ss-chip-config, variants));
}

/// Solid status colour.
@mixin ss-chip-variant($name) {
    $c: map.get(map.get(config.$ss-chip-config, variants), $name);

    background: map.get($c, bg);
    color: map.get($c, fg);
    border-color: map.get($c, bg);
}

/// Outlined status colour (with `--outline`).
@mixin ss-chip-variant-outline($name) {
    $c: map.get(map.get(config.$ss-chip-config, variants), $name);

    background: transparent;
    color: map.get($c, bg);
}