@keyframes moveandBack {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(2px, -2px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.lbaic-settings-tag {
  min-width: 0;
  max-width: var(--lbaic-settings-tag-max-width);
  width: max-content;
  min-height: var(--lbaic-settings-tag-height);
  flex: var(--lbaic-settings-tag-flex, 0 0 max-content);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline-start: var(--lbaic-settings-tag-pi-start);
  padding-inline-end: var(--lbaic-settings-tag-pi-end);
  background-color: var(--lbaic-settings-tag-bg);
  border-radius: 3px;
  overflow: hidden;

  &-h-28 {
    --lbaic-settings-tag-height: 28px;
  }

  &-h-24 {
    --lbaic-settings-tag-height: 24px;
  }

  &-pi-8 {
    --lbaic-settings-tag-pi-start: 8px;
    --lbaic-settings-tag-pi-end: 8px;
  }

  &-i {
    width: 20px;
    flex: 0 0 20px;
    height: auto;
    display: block;
    fill: var(--lbaic-settings-tag-color);
  }

  &-img {
    width: 18px;
    height: auto;
    flex: 0 0 18px;
    border-radius: 3px;

    &.avatar {
      width: 18px;
      flex: 0 0 18px;
      border-radius: 50%;
    }
  }

  &-label {
    flex: 1 0 0;
    display: block;
    font-size: var(--lbaic-settings-fs-13);
    color: var(--lbaic-settings-tag-color);
    line-height: var(--lbaic-settings-lh-18);
    white-space: pre-wrap;
    text-overflow: ellipsis;
    overflow: hidden;

    &:not(:first-child) {
      padding-inline-start: 10px;
    }

    &:not(:last-child) {
      padding-inline-end: 10px;
    }
  }

  &-link {
    display: flex;
    align-items: center;
    text-decoration: none;

    &:hover {
      &:has(.lbaic-settings-tag-link-i) {
        .lbaic-settings-external-arrow {
          animation: moveAndBack .6s ease;
        }
      }
    }

    &-i {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }
  }

  &-remove {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 3px;

    &:hover {
      background-color: var(--lbaic-settings-tag-remove-bg-hover);
    }

    &-i {
      width: 100%;
      height: auto;
      display: block;
      fill: var(--lbaic-settings-tag-i-fill);
    }
  }
}