.bd-chip-root {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    line-height: 1;
    height: 32px;
    border-radius: 18px;
    overflow: hidden;
}

.bd-chip {
    padding: 0 12px 0 12px;
}

.btn.bd-chip-delete {
    width: 28px;
    height: 28px;
}

.bd-chip-outlined {
    border: 1px solid;
}

.bd-chip-icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.bd-chip-md {
    height: 28px;

    .bd-chip-icon {
        @include marginStart(2px);
        @include marginEnd(-0.325rem);
    }
}

.bd-chip-sm {
    font-size: 0.75rem;
    height: 24px;

    .btn.bd-chip-delete {
        width: 24px;
        height: 24px;
    }
}

@mixin chipTheme($palette) {
    $text-primary: map-get($palette, text, primary);
    $text-main: map-get($palette, text, main);
    $bg: map-get($palette, bg, main);
    $fill: mix($text-main, $bg, 10%);
    $border: mix($text-main, $bg, 26%);

    .bd-chip-filled {
        background-color: $fill;
    }

    .bd-chip-outlined {
        border-color: $border;
    }
}

.theme-bd.theme-light {
    @include chipTheme(map-get($theme, light));
}

.theme-bd.theme-dark {
    @include chipTheme(map-get($theme, dark));
}