.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: $filter-input-hoover-bg;
    color: $filter-input-hoover-color;
  }

  &:hover {
    background-color: $filter-input-hoover-bg;
    color: $filter-input-hoover-color;
    border-radius: 0.25rem;
  }
}

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

  /* 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;
}

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

button.components-label.btn {
  &.btn-default:hover {
    background-color: $color-default;
  }

  &.btn-primary:hover {
    background-color: $primary;
  }
  &.btn-secondary:hover {
    background-color: $secondary;
  }
  &.btn-success:hover {
    background-color: $success;
  }
  &.btn-info:hover {
    background-color: $info;
  }
  &.btn-warning:hover {
    background-color: $warning;
  }
  &.btn-danger:hover {
    background-color: $danger;
  }
  &.btn-light:hover {
    background-color: $light;
  }
  &.btn-dark:hover {
    // same as in Theme.scss
    background-color: $dark;
  }
}
