.chip {
    --rocket-ui-chip-color-background: var(--rocket-color-grey-200);
    --rocket-ui-chip-color-border: var(--rocket-color-grey-200);
    --rocket-ui-chip-color-text: var(--rocket-color-grey-600);
    --rocket-ui-chip-color-icon: var(--rocket-color-grey-600);
    --rocket-image-border-radius: var(--rocket-ui-circle-image-border-radius);

    $this: &;

    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0.175rem 0.5rem;
    column-gap: 0.375rem;
    background: var(--rocket-ui-chip-color-background);
    border: 1px solid var(--rocket-ui-chip-color-border);
    border-radius: 4px;

    svg {
        display: block;
    }

    @at-root {
        a#{&},
        button#{&} {
            cursor: pointer;
        }
    }

    &--disabled,
    &[disabled] {
        opacity: 0.6;
        pointer-events: none;
    }

    &__text {
        @include truncate(100%);

        flex-grow: 1;
        width: 1%;
        color: var(--rocket-ui-chip-color-text);
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.4;
    }

    &__close {
        @include transition;

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;

        @include event {
            opacity: 0.7;
        }

        svg {
            @include size(1rem);
        }

        path {
            stroke: var(--rocket-ui-chip-color-icon);
        }
    }

    &__thumb {
        @include size(1.5rem);

        display: flex;
        align-items: center;
        justify-content: center;

        img {
            overflow: hidden;
            border-radius: 50%;
        }

        svg {
            @include size(inherit);
        }

        path {
            stroke: var(--rocket-ui-chip-color-icon);
        }
    }

    &--icon {
        @include size(2rem);

        justify-content: center;
        padding: 0.25rem;
        border-radius: 50%;
    }

    &--xs,
    &--sm {
        #{$this} {
            &__text {
                font-size: 0.75rem;
                line-height: (16 / 12);
            }
        }

        &#{$this} {
            &--icon {
                padding: 0.25rem;
            }
        }
    }

    &--sm {
        height: 1.75rem;
        padding: 0.375rem 0.5rem;

        #{$this} {
            &__thumb {
                @include size(1rem);
            }
        }

        &#{$this} {
            &--icon {
                @include size(1.75rem);
            }
        }
    }

    &--xs {
        height: 1.1rem;
        padding: 0.25rem 0.375rem;

        #{$this} {
            &__thumb {
                @include size(1rem);
            }
        }

        &#{$this} {
            &--icon {
                @include size(1.5rem);
            }
        }
    }

    &--light-darker {
        --rocket-ui-chip-color-border: var(--rocket-color-grey-600);
    }

    &--light-primary {
        --rocket-ui-chip-color-background: var(--rocket-color-primary-100);
        --rocket-ui-chip-color-border: var(--rocket-color-primary-100);
        --rocket-ui-chip-color-text: var(--rocket-color-primary-400);
        --rocket-ui-chip-color-icon: var(--rocket-color-primary-400);
    }

    &--light-primary-darker {
        --rocket-ui-chip-color-background: var(--rocket-color-primary-100);
        --rocket-ui-chip-color-border: var(--rocket-color-primary-400);
        --rocket-ui-chip-color-text: var(--rocket-color-primary-400);
        --rocket-ui-chip-color-icon: var(--rocket-color-primary-400);
    }

    &--dark {
        --rocket-ui-chip-color-background: var(--rocket-color-grey-600);
        --rocket-ui-chip-color-border: var(--rocket-color-grey-600);
        --rocket-ui-chip-color-text: var(--rocket-color-white-base);
        --rocket-ui-chip-color-icon: var(--rocket-color-white-base);
    }

    &--dark-darker {
        --rocket-ui-chip-color-background: var(--rocket-color-grey-700);
        --rocket-ui-chip-color-border: var(--rocket-color-grey-700);
        --rocket-ui-chip-color-text: var(--rocket-color-white-base);
        --rocket-ui-chip-color-icon: var(--rocket-color-white-base);
    }

    &--dark-primary {
        --rocket-ui-chip-color-background: var(--rocket-color-primary-400);
        --rocket-ui-chip-color-border: var(--rocket-color-primary-400);
        --rocket-ui-chip-color-text: var(--rocket-color-white-base);
        --rocket-ui-chip-color-icon: var(--rocket-color-white-base);
    }

    &--dark-primary-darker {
        --rocket-ui-chip-color-background: var(--rocket-color-primary-500);
        --rocket-ui-chip-color-border: var(--rocket-color-primary-500);
        --rocket-ui-chip-color-text: var(--rocket-color-white-base);
        --rocket-ui-chip-color-icon: var(--rocket-color-white-base);
    }
}