/*!
 * Copyright 2023 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// 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;
        }
    }
}
