@import url("s2r://panorama/styles/dotastyles.css");
@import url("file://{resources}/styles/shared/variables.css");

@define pillHeight: 36px;

.UITagSelectRoot {
  flow-children: down;
  width: 100%;
}

#UITagSelectOptions {
  width: 100%;
}

#UITagSelectOptions .UITagSelectOption {
  width: 120px;
}

#UITagSelectTagList {
  flow-children: right-wrap;
  width: 100%;
}

#UITagSelectTagList .UITagSelectTag {
  flow-children: right;
  height: pillHeight;
  padding: 4px 6px 2px;
  margin-top: 8px;
  margin-left: 8px;
  border: 1px solid #666;
  border-radius: 2px;
  transition-duration: 0.2s;
  transition-property: opacity;
}

#UITagSelectTagList .UITagSelectTag:disabled {
  opacity: 0;
}

#UITagSelectTagList .UITagSelectTag .UITagSelectTagLabel {
  margin-top: 3px;
  font-size: 18px;
  vertical-align: center;
}

#UITagSelectTagList .UITagSelectTag .UITagSelectTagRemoveButton {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  vertical-align: center;
  background-image: controlsQuitIcon;
  background-size: 100%;
  wash-color: #ccc;
}

#UITagSelectTagList .UITagSelectTag .UITagSelectTagRemoveButton:hover {
  wash-color: #fff;
}
