@use "sass:math";

// core
.p-chip {
  display: inline-flex;
  align-items: center;
}

.p-chip-text {
  line-height: 1.5;
}

.p-chip-icon.pi {
  line-height: 1.5;
}

.p-chip-remove-icon {
  line-height: 1.5;
  cursor: pointer;
}

.p-chip img {
  border-radius: 50%;
}

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

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

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

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

  .p-chip-remove-icon {
    margin-left: $inlineSpacing;
    border-radius: $borderRadius;
    transition: $actionIconTransition;
    outline-color: transparent;

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

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