@use "../../01-core/prefix" as *;
@use "./chip.mixins" as chip;
@use "../../01-core/external" as *;

@layer ss.components {
    .#{$ss-prefix-module}-chip {
        @include chip.ss-chip;
    }

    // Solid status colours: `.ss-c-chip--info` …
    @each $name in chip.ss-chip-variant-names() {
        .#{$ss-prefix-module}-chip--#{$name} {
            @include chip.ss-chip-variant($name);
        }

        // Outlined status colours: `.ss-c-chip--outline.ss-c-chip--info` …
        .#{$ss-prefix-module}-chip--outline.#{$ss-prefix-module}-chip--#{$name} {
            @include chip.ss-chip-variant-outline($name);
        }
    }

    .#{$ss-prefix-module}-chip--outline {
        background: transparent;
        border-color: var(--ss-color-border-strong, var(--ss-color-border));
    }

    .#{$ss-prefix-module}-chip--removable {
        @include chip.ss-chip-removable;
    }

    .#{$ss-prefix-module}-chip__remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: q(16);
        height: q(16);

        background: transparent;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        color: inherit;
        line-height: 1;
    }
}