.input-group.components-filterinput-outer {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: $border-width solid var(--karma-filterinput-border);

  .bg-inherit {
    background-color: unset;
  }
}

.form-control.components-filterinput {
  cursor: text;
  height: auto;
  box-shadow: none;
  background-clip: unset;
  padding: 1px 0.25rem;
}

input.components-filterinput-wrapper {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  vertical-align: middle;
}

.components-filterinput-wrapper {
  min-height: 2rem;
  margin-top: 2px;
  margin-bottom: 2px;
}

.bg-focused {
  @supports (backdrop-filter: blur(12px)) {
    // TODO: why is this hardcoding colors?
    background-color: rgb(var(--karma-bg-focused-rgb, 81, 113, 132), 0.5);
  }

  @supports not (backdrop-filter: blur(12px)) {
    background-color: var(--karma-bg-focused);
  }
}

.input-group.components-filterinput-outer {
  &,
  & .btn,
  & .btn > svg {
    transition: background-color 0.2s linear;
  }
}
