@progress/kendo-ui/css/web/Default/chip/_layout.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

// Chip List
.k-chip-list {
    min-width: 0px;
    display: inline-flex;
    gap: @chip-padding-x;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

// Chip
.k-chip {
    overflow: hidden;
    padding: @chip-padding-y @chip-padding-x;
    height: @chip-height;
    position: relative;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: @chip-content-padding-x;
    font-size: @chip-font-size;
    cursor: pointer;
    user-select: none;
    outline: 0;

    &:focus,
    &.k-chip-focus {
        outline: 0;
    }
}

.k-chip-content {
    min-width: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    overflow: hidden;
    flex: 1 1 auto;
}

.k-chip-content:first-child {
    margin-inline-start: @chip-padding-x;
}
.k-chip-content:last-child {
    margin-inline-end: @chip-padding-x;
}

// Chip text
.k-chip-text,
.k-chip-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1 1 auto;
}


// Chip avatar
.k-chip-avatar {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex: none;
}

// Chip icon
.k-chip-icon {
    font-size: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.k-ie .k-chip-icon {
    margin-right: @chip-content-padding-x;
}

.k-remove-icon {
    margin-right: @chip-remove-icon-margin;
    font-size: @chip-remove-icon-font-size;
}

.k-chip-avatar {
    width: @chip-avatar-size;
    height: @chip-avatar-size;
    flex-basis: @chip-avatar-size;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

// Actions
.k-chip-actions {
    flex: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-self: center;
}
.k-chip-action {
    flex: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-self: center;
}


// Legacy chip icons
.k-remove-icon {
    font-size: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.k-ie .k-remove-icon {
    margin-right: 0;
    margin-left: @chip-content-padding-x;
}

// RTL
.k-chip {
    &[dir="rtl"],
    .k-rtl &,
    &.k-rtl {
        .k-chip-icon {
            margin-right: 0;
            margin-left: @chip-content-padding-x;
        }

        .k-remove-icon {
            margin-left: 0;
            margin-right: @chip-content-padding-x;
        }
    }
}