@charset "UTF-8";
@use "../../core/jkl";

.jkl-chip {
    --padding-inline: var(--jkl-unit-15);
    --padding-icon: var(--jkl-unit-10);
    --height: var(--jkl-unit-40);
    --gap: var(--jkl-unit-05);
    --text-color: var(--jkl-color-text-default);
    --border-color: var(--jkl-color-border-separator);
    --background-color: transparent;
    --border-width: #{jkl.rem(1px)};

    @include jkl.text-style("text-small") {
        font-weight: jkl.$typography-font-weight-bold;
    };

    cursor: pointer;
    position: relative;
    background-color: var(--background-color);
    color: var(--text-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: 99999px;
    display: inline-flex;
    align-items: center;
    text-align: initial;
    white-space: nowrap;
    gap: var(--gap);
    padding: 0 var(--padding-inline);
    min-height: var(--height);

    @include jkl.forced-colors-mode {
        border: 2px none CanvasText;
        border-bottom-style: dotted;
    }

    &::after {
        content: "";
        opacity: 0;
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--text-color);

        @include jkl.motion("standard", "productive", opacity);
    }

    &:focus-visible {
        @include jkl.focus-outline;
    }

    &:hover {
        &::after {
            opacity: 0.15;
        }
    }

    &--filter {
        &[aria-pressed="true"] {
            --background-color: var(--jkl-color-background-action);
            --text-color: var(--jkl-color-text-on-action);
            --border-color: var(--text-color);

            @include jkl.forced-colors-mode {
                forced-color-adjust: none;

                --background-color: CanvasText;
                --text-color: Canvas;
            }
        }
    }

    &:has(.jkl-icon) {
        padding-inline-end: var(--padding-icon);
    }
}