@import "../colors"; @import "../globals"; @import "../mixins"; @import "./config"; .chip { position: relative; display: inline-block; max-width: 100%; padding: 0 $chip-padding; margin-right: $chip-margin-right; overflow: hidden; font-size: $chip-font-size; line-height: $chip-height; color: $chip-color; text-overflow: ellipsis; white-space: nowrap; background-color: $chip-background; border-radius: $chip-height; } .avatar { padding-left: 0; > [data-react-toolbox="avatar"] { width: $chip-height; height: $chip-height; margin-right: $chip-icon-margin-right; vertical-align: middle; > span { font-size: $chip-icon-font-size; line-height: $chip-height; } } } .deletable { padding-right: $chip-remove-size + 2 * $chip-remove-margin; } .delete { position: absolute; right: 0; display: inline-block; width: $chip-remove-size; height: $chip-remove-size; padding: $chip-remove-margin; margin: $chip-remove-margin; vertical-align: middle; cursor: pointer; } .delete:hover .deleteIcon { background: $chip-remove-background-hover; } .deleteIcon { vertical-align: top; background: $chip-remove-background; border-radius: $chip-remove-size; .deleteX { fill: transparent; stroke-width: $chip-remove-stroke-width; stroke: $chip-remove-color; } }