@use 'sass:list';
@use 'sass:math';

.p-chip {
  background-color: $chipBg;
  color: $chipTextColor;
  border-radius: $chipBorderRadius;
  padding: 0 list.nth($inputPadding, 2);

  .p-chip-text {
    line-height: 1.5;
    margin-top: math.div(list.nth($inputPadding, 1), 2);
    margin-bottom: math.div(list.nth($inputPadding, 1), 2);
  }

  .p-chip-icon {
    margin-right: $inlineSpacing;
  }

  img {
    width: 1.5 + list.nth($inputPadding, 1);
    height: 1.5 + list.nth($inputPadding, 1);
    margin-left: -1 * list.nth($inputPadding, 2);
    margin-right: $inlineSpacing;
  }

  .pi-chip-remove-icon {
    margin-left: $inlineSpacing;
    border-radius: $borderRadius;
    transition: $actionIconTransition;

    &:focus-visible {
      @include focused();
    }

    &:focus {
      outline: 0 none;
    }
  }
}