@use "../../assets/mixins.scss" as *;

.pl-chip-tooltip {
  display: inline-flex;
}

.pl-chip {
  --chip-color: var(--txt-01);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  background: var(--chip-bg);
  border: var(--chip-border);
  border-radius: 6px;
  max-width: 256px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weigh-base);
  line-height: calc(var(--line-height-base) + 2px);
  letter-spacing: -0.2px;
  color: var(--chip-color);

  &.small {
    height: 24px;
    padding: 0 6px;
    border-radius: 4px;
  }

  &.large {
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
  }

  [data-theme="dark"] & {
    color: #fff;
  }

  &__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__close {
    cursor: pointer;

    --mask-color: var(--chip-close-ic-color);

    &:hover {
      --mask-color: var(--chip-close-ic-hover-color);
    }

    &:focus-visible {
      --mask-color: var(--chip-close-ic-hover-color);
      box-shadow: 0 0 0 2px var(--border-color-focus);
      border-radius: 1px;
      outline: none;
    }

    &--icon {
      background: var(--mask-color);
      @include mask(url("../../assets/images/16_close.svg"), 16px);
    }
  }
}