@use '../theme/chips.tokens' as chips;
@use '../theme/spacing.tokens' as spacing;

$chip-max-width-small: spacing.rhythm(32);
$chip-max-width-medium: spacing.rhythm(56);

.pa-chip {
  align-items: center;
  background: chips.$color-background-chip-default;
  border: chips.$border-chip;
  border-radius: chips.$border-radius-chip;
  display: inline-flex;
  gap: spacing.rhythm(1);
  height: spacing.rhythm(4);
  max-width: $chip-max-width-small;
  overflow: hidden;
  padding: chips.$padding-chip;

  &.pa-with-avatar {
    padding-left: spacing.rhythm(0.5);
  }
  &.pa-with-button {
    padding-right: spacing.rhythm(0.5);

    .pa-button {
      height: spacing.rhythm(3);
      padding: spacing.rhythm(0.5);
    }
  }

  &.pa-selectionable:not(.pa-disabled) {
    cursor: pointer;

    &:hover {
      background: chips.$color-background-chip-default-hover;
    }
    &.pa-selected {
      background: chips.$color-background-chip-default-selected;
      border: chips.$border-chip-selected;
    }
  }
  &.pa-disabled {
    color: chips.$color-background-chip-default-disabled;
    border: chips.$border-chip-disabled;
  }

  pa-button {
    display: flex;
  }
}
.pa-chip-content-wrapper {
  font-size: chips.$font-size-chip;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: spacing.$size-viewport-medium-min) {
  .pa-chip {
    max-width: $chip-max-width-medium;
  }
}