@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;
  }
}