/**
 * @provides phui-tag-view-css
 */

.phui-tag-view {
  font-weight: bold;
  text-decoration: none;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

a.phui-tag-view:hover {
  text-decoration: none;
}

.phui-tag-core-closed {
  text-decoration: line-through;
  color: rgba(0,0,0,0.5);
}

.phui-tag-core-closed:hover {
  text-decoration: none;
}

.phui-tag-core {
  color: inherit;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0 4px;
}

.phui-tag-type-state .phui-tag-core {
  padding: 1px 6px;
}

.phui-tag-view.phui-tag-type-state .phui-icon-view {
  margin: 0 6px 0 0;
}

.phui-tag-view .phui-icon-view {
  display: inline-block;
  margin: 0 4px 0 2px;
}

.phui-tag-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  top: -1px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.phui-tag-type-state {
  color: #ffffff;
  text-shadow: rgba(100, 100, 100, 0.40) 0px -1px 1px;
}

.phui-tag-type-object,
a.phui-tag-type-object,
a.phui-tag-type-object:link,
.phui-tag-core-closed .phui-tag-color-object {
  color: #000;
}

.phui-tag-type-person {
  white-space: nowrap;
  color: #19558d;
}

.phui-tag-color-red {
  background-color: {$red};
  border-color: {$red};
}

.phui-tag-color-orange {
  background-color: {$orange};
  border-color: {$orange};
}

.phui-tag-color-yellow {
  background-color: {$yellow};
  border-color: {$yellow};
}

.phui-tag-color-blue {
  background-color: {$blue};
  border-color: {$blue};
}

.phui-tag-color-indigo {
  background-color: {$indigo};
  border-color: {$indigo};
}

.phui-tag-color-green {
  background-color: {$green};
  border-color: {$green};
}

.phui-tag-color-violet {
  background-color: {$violet};
  border-color: {$violet};
}

.phui-tag-color-black {
  background-color: #333333;
  border-color: #333333;
}

.phui-tag-color-grey {
  background-color: {$lightgreytext};
  border-color: {$lightgreytext};
}

.phui-tag-color-white {
  background-color: #f7f7f7;
  border-color: #f7f7f7;
}

.phui-tag-color-object {
  background-color: #e7e7e7;
  border-color: #e7e7e7;
}

.phui-tag-color-person {
  background-color: #f1f7ff;
  border-color: #f1f7ff;
}

a.phui-tag-view:hover
  .phui-tag-core.phui-tag-color-person {
  border-color: #d9ebfd;
}

a.phui-tag-view:hover
  .phui-tag-core.phui-tag-color-object {
  border-color: #d7d7d7;
}

.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
  margin-top: 4px;
}

.phui-object-item .phabricator-handle-tag-list {
  display: inline;
}

.phui-object-item .phabricator-handle-tag-list-item {
  display: inline;
  margin: 0 4px 2px 0;
}


/* - Shaded Tags ---------------------------------------------------------------

  For object representation inside text areas and lists.

*/

.phui-tag-shade {
  font-weight: normal;
}

.phui-tag-shade .phui-icon-view {
  font-size: 12px;
}

.phui-tag-shade-slim .phui-icon-view {
  font-size: 11px;
}

.phui-tag-shade-slim .phui-tag-core {
  font-size: {$smallerfontsize};
}

/* - Red -------------------------------------------------------------------- */

.phui-tag-shade-red .phui-tag-core,
.jx-tokenizer-token.red {
  background: {$sh-redbackground};
  border-color: {$sh-lightredborder};
  color: {$sh-redtext};
}

.phui-tag-shade-red .phui-icon-view,
.jx-tokenizer-token.red .phui-icon-view,
.jx-tokenizer-token.red .jx-tokenizer-x {
  color: {$sh-redicon};
}

a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core,
.jx-tokenizer-token.red:hover {
  border-color: {$sh-redborder};
}

/* - Orange ----------------------------------------------------------------- */

.phui-tag-shade-orange .phui-tag-core,
.jx-tokenizer-token.orange {
  background: {$sh-orangebackground};
  border-color: {$sh-lightorangeborder};
  color: {$sh-orangetext};
}

.phui-tag-shade-orange .phui-icon-view,
.jx-tokenizer-token.orange .phui-icon-view,
.jx-tokenizer-token.orange .jx-tokenizer-x {
  color: {$sh-orangeicon};
}

a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core,
.jx-tokenizer-token.orange:hover {
  border-color: {$sh-orangeborder};
}

/* - Yellow ----------------------------------------------------------------- */

.phui-tag-shade-yellow .phui-tag-core,
.jx-tokenizer-token.yellow {
  background: {$sh-yellowbackground};
  border-color: {$sh-lightyellowborder};
  color: {$sh-yellowtext};
}

.phui-tag-shade-yellow .phui-icon-view,
.jx-tokenizer-token.yellow .phui-icon-view,
.jx-tokenizer-token.yellow .jx-tokenizer-x {
  color: {$sh-yellowicon};
}

a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core,
.jx-tokenizer-token.yellow:hover {
  border-color: {$sh-yellowborder};
}

/* - Blue ------------------------------------------------------------------- */

.phui-tag-shade-blue .phui-tag-core,
.jx-tokenizer-token.blue {
  background: {$sh-bluebackground};
  border-color: {$sh-lightblueborder};
  color: {$sh-bluetext};
}

.phui-tag-shade-blue .phui-icon-view,
.jx-tokenizer-token.blue .phui-icon-view,
.jx-tokenizer-token.blue .jx-tokenizer-x {
  color: {$sh-blueicon};
}

a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
.jx-tokenizer-token.blue:hover {
  border-color: {$sh-blueborder};
}

/* - Indigo ----------------------------------------------------------------- */

.phui-tag-shade-indigo .phui-tag-core,
.jx-tokenizer-token.indigo {
  background: {$sh-indigobackground};
  border-color: {$sh-lightindigoborder};
  color: {$sh-indigotext};
}

.phui-tag-shade-indigo .phui-icon-view,
.jx-tokenizer-token.indigo .phui-icon-view,
.jx-tokenizer-token.indigo .jx-tokenizer-x {
  color: {$sh-indigoicon};
}

a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core,
.jx-tokenizer-token.indigo:hover {
  border-color: {$sh-indigoborder};
}

/* - Green ------------------------------------------------------------------ */

.phui-tag-shade-green .phui-tag-core,
.jx-tokenizer-token.green {
  background: {$sh-greenbackground};
  border-color: {$sh-lightgreenborder};
  color: {$sh-greentext};
}

.phui-tag-shade-green .phui-icon-view,
.jx-tokenizer-token.green .phui-icon-view,
.jx-tokenizer-token.green .jx-tokenizer-x {
  color: {$sh-greenicon};
}

a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core,
.jx-tokenizer-token.green:hover {
  border-color: {$sh-greenborder};
}

/* - Violet ----------------------------------------------------------------- */

.phui-tag-shade-violet .phui-tag-core,
.jx-tokenizer-token.violet {
  background: {$sh-violetbackground};
  border-color: {$sh-lightvioletborder};
  color: {$sh-violettext};
}

.phui-tag-shade-violet .phui-icon-view,
.jx-tokenizer-token.violet .phui-icon-view,
.jx-tokenizer-token.violet .jx-tokenizer-x {
  color: {$sh-violeticon};
}

a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core,
.jx-tokenizer-token.violet:hover {
  border-color: {$sh-violetborder};
}

/* - Pink ------------------------------------------------------------------- */

.phui-tag-shade-pink .phui-tag-core,
.jx-tokenizer-token.pink {
  background: {$sh-pinkbackground};
  border-color: {$sh-lightpinkborder};
  color: {$sh-pinktext};
}

.phui-tag-shade-pink .phui-icon-view,
.jx-tokenizer-token.pink .phui-icon-view,
.jx-tokenizer-token.pink .jx-tokenizer-x {
  color: {$sh-pinkicon};
}

a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core,
.jx-tokenizer-token.pink:hover {
  border-color: {$sh-pinkborder};
}

/* - Grey ------------------------------------------------------------------- */

.phui-tag-shade-grey .phui-tag-core,
.jx-tokenizer-token.grey {
  background: {$sh-greybackground};
  border-color: {$sh-lightgreyborder};
  color: {$sh-greytext};
}

.phui-tag-shade-grey .phui-icon-view,
.jx-tokenizer-token.grey .phui-icon-view,
.jx-tokenizer-token.grey .jx-tokenizer-x {
  color: {$sh-greyicon};
}

a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
.jx-tokenizer-token.grey:hover {
  border-color: {$sh-greyborder};
}

/* - Checkered -------------------------------------------------------------- */

.phui-tag-shade-checkered .phui-tag-core,
.jx-tokenizer-token.checkered {
  background: url(/rsrc/image/checker_lighter.png);
  border-style: dashed;
  border-color: {$sh-greyborder};
  color: {$sh-greytext};
  text-shadow: 1px 1px #fff;
}

.phui-tag-shade-checkered .phui-icon-view,
.jx-tokenizer-token.checkered .phui-icon-view,
.jx-tokenizer-token.checkered .jx-tokenizer-x {
  color: {$sh-greyicon};
}

a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
.jx-tokenizer-token.checkered:hover {
  border-style: solid;
  border-color: {$sh-greyborder};
}

/* - Disabled --------------------------------------------------------------- */

.phui-tag-shade-disabled .phui-tag-core {
  background-color: {$sh-disabledbackground};
  border-color: {$sh-lightdisabledborder};
  color: {$sh-disabledtext};
}

.phui-tag-shade-disabled .phui-icon-view {
  color: {$sh-disabledicon};
}

a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
  border-color: {$sh-disabledborder};
}
