Connected.Components/Styles/components/_chip.scss

@import '../abstracts/variables';

.chip {
    border: none;
    cursor: default;
    display: inline-flex;
    max-width: 100%;
    outline: 0;
    padding: 0 12px;
    position: relative;
    box-sizing: border-box;
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    line-height: normal;
    margin: 4px;

    &.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    &.chip-size-small {
        border-radius: 12px;
        font-size: 12px;
        height: 24px;
    }

    &.chip-size-medium {
        height: 32px;
        font-size: 14px;
        border-radius: 16px;
    }

    &.chip-size-large {
        height: 40px;
        font-size: 16px;
        border-radius: 20px;
    }

    &.chip-label {
        border-radius: var(--default-borderradius);
    }

    &.clickable {
        cursor: pointer;
    }

    .chip-icon {
        margin-left: -4px;
        margin-right: 4px;
        margin-inline-start: -4px;
        margin-inline-end: 4px;
        color: inherit;
    }

    .chip-close-button {
        padding: 1px;
        margin-right: -4px;
        margin-left: 6px;
        margin-inline-end: -4px;
        margin-inline-start: 6px;
        height: 18px;
        width: 18px;
        color: inherit;
        transition: .3s cubic-bezier(.25,.8,.5,1),visibility 0s;

        .icon-size-small {
            font-size: 1.15rem;
        }

        &:hover {
            opacity: .70;
        }
    }

    & > .chip-content {
        align-items: center;
        display: inline-flex;
        height: 100%;
        max-width: 100%;
        user-select: none;
    }
}

.chip-filled {
    color: var(--palette-text-primary);
    background-color: var(--palette-action-disabled-background);

    &:hover:not(.disabled), &:focus-visible:not(.disabled) {
        background-color: var(--palette-action-disabled);
    }

    @each $color in $palette-colors {
        &.chip-color-#{$color} {
            color: var(--palette-#{$color}-text);
            background-color: var(--palette-#{$color});

            &:hover:not(.disabled), &:focus-visible:not(.disabled) {
                background-color: var(--palette-#{$color}-darken);
            }
        }
    }
}
.chip-outlined {
    color: var(--palette-text-primary);
    border: 1px solid var(--palette-lines-inputs);

    &:hover:not(.disabled), &:focus-visible:not(.disabled) {
        background-color: var(--palette-action-default-hover);
    }

    @each $color in $palette-colors {
        &.chip-color-#{$color} {
            color: var(--palette-#{$color});
            border: 1px solid var(--palette-#{$color});

            &:hover:not(.disabled), &:focus-visible:not(.disabled) {
                background-color: var(--palette-#{$color}-hover);
            }

            &.chip-selected {
                background-color: var(--palette-#{$color}-hover);

                &:hover:not(.disabled), &:focus-visible:not(.disabled) {
                    background-color: rgba(var(--palette-#{$color}-rgb), 0.12);
                }
            }
        }
    }
}
.chip-text {
    color: var(--palette-text-primary);
    background-color: var(--palette-action-default-hover);

    &:hover:not(.disabled), &:focus-visible:not(.disabled) {
        background-color: var(--palette-action-disabled-background);
    }

    @each $color in $palette-colors {
        &.chip-color-#{$color} {
            color: var(--palette-#{$color});
            background-color: var(--palette-#{$color}-hover);

            &:hover:not(.disabled), &:focus-visible:not(.disabled) {
                background-color: rgba(var(--palette-#{$color}-rgb), 0.12);
            }
        }
    }
}