.components-filteredinputlabel-text {
  font-size: 1rem;
  min-width: 1%;

  & > span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    max-width: 100%;
  }

  & > .editing {
    background-color: var(--karma-filter-input-hoover-bg);
    color: var(--karma-filter-input-hoover-color);
  }

  &:hover {
    background-color: var(--karma-filter-input-hoover-bg);
    color: var(--karma-filter-input-hoover-color);
    border-radius: 0.25rem;
  }
}

.btn.components-filteredinputlabel > .badge,
.btn.components-filteredinputlabel > svg {
  /* match outer badge font size */
  font-size: 100%;
  font-weight: 600;

  /* we have badge inside a badge, make the inner one a little brighter
     in case both use same color classes */
  filter: brightness(115%);

  /* there's "top: -1px" on ".btn .badge"
     which moves the badge a bit to high, reset it */
  top: 0;

  &.btn-close {
    background-image: none;
  }
}

button.btn.components-filteredinputlabel {
  cursor: default;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

button.components-label.btn {
  &.btn-default:hover {
    background-color: var(--karma-color-default);
  }

  &.btn-primary:hover {
    background-color: var(--bs-primary);
  }

  &.btn-secondary:hover {
    background-color: var(--bs-secondary);
  }

  &.btn-success:hover {
    background-color: var(--bs-success);
  }

  &.btn-info:hover {
    background-color: var(--bs-info);
  }

  &.btn-warning:hover {
    background-color: var(--bs-warning);
  }

  &.btn-danger:hover {
    background-color: var(--bs-danger);
  }

  &.btn-light:hover {
    background-color: var(--bs-light);
  }

  &.btn-dark:hover {
    background-color: var(--bs-dark);
  }
}
