open-consul/ui/packages/consul-ui/app/components/search-bar/index.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

.search-bar {
  &-status {
    & {
      border-bottom: var(--decor-border-100);
      border-bottom-color: var(--token-color-surface-interactive-active);
    }
    .remove-all button {
      @extend %anchor;
    }
    li:not(.remove-all) {
      & {
        @extend %pill-200;
        border: var(--decor-border-100);
        border-color: var(--token-color-surface-interactive-active);
        color: var(--token-color-foreground-faint);
      }
      button {
        cursor: pointer;
      }
      button::before {
        @extend %with-cancel-plain-mask, %as-pseudo;
        color: var(--token-color-foreground-faint);
        margin-top: 1px;
        margin-right: 0.2rem;
      }
    }
    & {
      padding: 0.5rem 0;
      padding-left: 0.5rem;
    }
    dt::after {
      content: ':';
      padding-right: 0.3rem;
    }
    & > dl > dt {
      float: left;
    }
    dt {
      white-space: nowrap;
    }
    li {
      display: inline-flex;
    }
    li:not(:last-child) {
      margin-right: 0.3rem;
      margin-bottom: 0.3rem;
    }
    li:not(.remove-all) {
      & {
        padding: 0 0.2rem;
      }
      dl {
        display: flex;
      }
      button {
        padding: 0;
      }
    }
  }
}