@if $css-variable-enabled {
  $chip-border-radius: var(--chip-border-radius);
  $chip-margin: var(--chip-margin);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}chip {
  display: inline-flex;
  height: 30px;
  background-color: var(--chip-bg-color);
  align-items: center;
  vertical-align: bottom;
  border-radius: $chip-border-radius;
  margin: $chip-margin;
  transition: $primary-transition;

  > span {
    margin-right: 12px;
    margin-left: 8px;
  }

  span:only-child {
    margin-left: 12px;
    margin-right: 12px;
  }

  span:first-child {
    margin-left: 12px;
  }

  > .#{$prefix}icon {
    margin-right: 8px;
    margin-left: -4px;
    --icon-size: 1rem;
    border-radius: 1000px;
    padding: 10px;

    &:hover, &.#{$prefix}hovered, &:focus {
      background-color: $stransparent;
    }
  }

  > img {
    height: 100%;
    border-radius: $chip-border-radius;
  }

  &.#{$prefix}large {
    height: 40px;
  }

  &.#{$prefix}small {
    height: 22px;
    font-size: 13px;

    > .#{$prefix}icon {
      --icon-size: 0.7rem;
      padding: 5px;
    }
  }
}