.gtc-rc-search-async {
  // Styles for pills inside the select input
  &__multi-value {
    display: inline-flex;
    margin: 2px;
    align-items: center;
    border-radius: 12px;
    height: 21px;
    padding: 2px 8px;
    
    &__label {
      margin-right: 4px;
      font-size: 13px;
      font-weight: 600;
    }
    
    &__remove-button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      margin: 0;
      font-size: 14px;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        opacity: 0.7;
      }
      
      &:focus {
        outline: none;
      }
    }
  }


  // Override react-select styles to accommodate pills
  &__react-select {
    &__multi-value {
      margin: 0;
      background: transparent;
      
      &__label {
        display: none; // Hide default label since we use custom component
      }
      
      &__remove {
        display: none; // Hide default remove button since we use custom component
      }
    }

    &__value-container {
      padding: 2px 8px;
      flex-wrap: wrap;
      align-items: center;
      min-height: 32px;
    }

    &__input-container {
      margin: 2px;
      padding: 0;
    }
  }
}
