/*!
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

.c-tag{
  display:-webkit-inline-box;
  display:inline-flex;
  flex-wrap:nowrap;
  -webkit-box-align:center;
          align-items:center;
  -webkit-transition:box-shadow .1s ease-in-out;
  transition:box-shadow .1s ease-in-out;
  border:0;
  border-radius:2px;
  background-color:#e9ebed;
  padding:0 8px;
  max-width:100%;
  height:20px;
  overflow:hidden;
  line-height:1.66667;
  font-size:12px;
  font-weight:600;
}

.c-tag,.c-tag:hover{
  text-decoration:none;
  color:#49545c;
}

.c-tag:hover{
  cursor:default;
}

.c-tag.is-focused,.c-tag:focus{
  outline:0;
  box-shadow:0 0 0 2px rgba(104, 115, 125, .35);
  text-decoration:none;
  color:#49545c;
}

.c-tag:link:hover,.c-tag:visited:hover{
  cursor:pointer;
}

.c-tag:-webkit-any-link:hover{
  cursor:pointer;
}

.c-tag:-moz-any-link:hover{
  cursor:pointer;
}

.c-tag:any-link:hover{
  cursor:pointer;
}

.c-tag.is-rtl{
  direction:rtl;
}

.c-tag>*{
  min-width:2em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.c-tag.c-tag--azure{
  background-color:#1371d6;
  color:#fff;
}

.c-tag.c-tag--blue{
  background-color:#1f73b7;
  color:#fff;
}

.c-tag.c-tag--crimson{
  background-color:#c72a1c;
  color:#fff;
}

.c-tag.c-tag--fuschia{
  background-color:#a81897;
  color:#fff;
}

.c-tag.c-tag--green{
  background-color:#038153;
  color:#fff;
}

.c-tag.c-tag--grey{
  background-color:#68737d;
  color:#fff;
}

.c-tag.c-tag--kale{
  background-color:#17494d;
  color:#fff;
}

.c-tag.c-tag--lemon{
  background-color:#ffbb10;
  color:#703815;
}

.c-tag.c-tag--lime{
  background-color:#2e8200;
  color:#fff;
}

.c-tag.c-tag--mint{
  background-color:#058541;
  color:#fff;
}

.c-tag.c-tag--orange{
  background-color:#bf5000;
  color:#fff;
}

.c-tag.c-tag--pink{
  background-color:#d42054;
  color:#fff;
}

.c-tag.c-tag--purple{
  background-color:#6a27b8;
  color:#fff;
}

.c-tag.c-tag--red{
  background-color:#cc3340;
  color:#fff;
}

.c-tag.c-tag--royal{
  background-color:#3353e2;
  color:#fff;
}

.c-tag.c-tag--teal{
  background-color:#028079;
  color:#fff;
}

.c-tag.c-tag--yellow{
  background-color:#ffb057;
  color:#703815;
}

.c-tag.c-tag--azure.is-focused,.c-tag.c-tag--azure:focus{
  box-shadow:0 0 0 2px rgba(19, 113, 214, .35);
}

.c-tag.c-tag--blue.is-focused,.c-tag.c-tag--blue:focus{
  box-shadow:0 0 0 2px rgba(31, 115, 183, .35);
}

.c-tag.c-tag--crimson.is-focused,.c-tag.c-tag--crimson:focus{
  box-shadow:0 0 0 2px rgba(199, 42, 28, .35);
}

.c-tag.c-tag--fuschia.is-focused,.c-tag.c-tag--fuschia:focus{
  box-shadow:0 0 0 2px rgba(168, 24, 151, .35);
}

.c-tag.c-tag--green.is-focused,.c-tag.c-tag--green:focus{
  box-shadow:0 0 0 2px rgba(3, 129, 83, .35);
}

.c-tag.c-tag--grey.is-focused,.c-tag.c-tag--grey:focus{
  box-shadow:0 0 0 2px rgba(104, 115, 125, .35);
}

.c-tag.c-tag--kale.is-focused,.c-tag.c-tag--kale:focus{
  box-shadow:0 0 0 2px rgba(23, 73, 77, .35);
}

.c-tag.c-tag--lemon.is-focused,.c-tag.c-tag--lemon:focus{
  box-shadow:0 0 0 2px rgba(255, 187, 16, .35);
}

.c-tag.c-tag--lime.is-focused,.c-tag.c-tag--lime:focus{
  box-shadow:0 0 0 2px rgba(46, 130, 0, .35);
}

.c-tag.c-tag--mint.is-focused,.c-tag.c-tag--mint:focus{
  box-shadow:0 0 0 2px rgba(5, 133, 65, .35);
}

.c-tag.c-tag--orange.is-focused,.c-tag.c-tag--orange:focus{
  box-shadow:0 0 0 2px rgba(191, 80, 0, .35);
}

.c-tag.c-tag--pink.is-focused,.c-tag.c-tag--pink:focus{
  box-shadow:0 0 0 2px rgba(212, 32, 84, .35);
}

.c-tag.c-tag--purple.is-focused,.c-tag.c-tag--purple:focus{
  box-shadow:0 0 0 2px rgba(106, 39, 184, .35);
}

.c-tag.c-tag--red.is-focused,.c-tag.c-tag--red:focus{
  box-shadow:0 0 0 2px rgba(204, 51, 64, .35);
}

.c-tag.c-tag--royal.is-focused,.c-tag.c-tag--royal:focus{
  box-shadow:0 0 0 2px rgba(51, 83, 226, .35);
}

.c-tag.c-tag--teal.is-focused,.c-tag.c-tag--teal:focus{
  box-shadow:0 0 0 2px rgba(2, 128, 121, .35);
}

.c-tag.c-tag--yellow.is-focused,.c-tag.c-tag--yellow:focus{
  box-shadow:0 0 0 2px rgba(255, 176, 87, .35);
}

.c-tag.c-tag--yellow.is-focused,.c-tag.c-tag--yellow:focus,.c-tag.c-tag--yellow:hover{
  color:#703815;
}

.c-tag--sm{
  padding:0 4px;
  height:16px;
  line-height:1.6;
  font-size:10px;
}

.c-tag--lg{
  border-radius:4px;
  padding:0 12px;
  height:32px;
  line-height:2.66667;
}

.c-tag--pill.c-tag--sm{
  padding:0 6px;
  min-width:24px;
}

.c-tag--pill.c-tag--sm>*{
  min-width:12px;
}

.c-tag--pill.c-tag--lg{
  min-width:48px;
}

.c-tag--pill.c-tag--lg>*{
  min-width:24px;
}

.c-tag--round.c-tag--sm,.c-tag--round.c-tag--sm>*{
  min-width:16px;
}

.c-tag--round.c-tag--lg,.c-tag--round.c-tag--lg>*{
  min-width:32px;
}

.c-tag--pill{
  border-radius:100px;
  min-width:30px;
}

.c-tag--pill,.c-tag--round{
  -webkit-box-pack:center;
          justify-content:center;
}

.c-tag--round{
  border-radius:50%;
  padding:0;
  min-width:20px;
}

.c-tag--pill>*{
  min-width:14px;
  text-align:center;
}

.c-tag--round>*{
  min-width:20px;
  text-align:center;
}

.c-tag__remove{
  flex-shrink:0;
  -webkit-transition:opacity .25s ease-in-out;
  transition:opacity .25s ease-in-out;
  opacity:.8;
  margin-right:-8px;
  border:0;
  border-radius:2px;
  background:no-repeat
    50%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%2368737d'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E")
    transparent;
  cursor:pointer;
  padding:0;
  width:20px;
  height:20px;
  font-size:0;
}

.c-tag__remove.is-hovered,.c-tag__remove:hover{
  opacity:.9;
}

.c-tag__remove:focus{
  outline:none;
}

.c-tag--lg .c-tag__remove{
  margin-right:-12px;
  width:32px;
  height:32px;
}

.c-tag--sm .c-tag__remove{
  margin-right:-4px;
  width:16px;
  height:16px;
}

.c-tag--pill .c-tag__remove{
  border-radius:50%;
}

.c-tag--round .c-tag__remove{
  display:none;
}

.c-tag.c-tag--azure .c-tag__remove,.c-tag.c-tag--blue .c-tag__remove,.c-tag.c-tag--crimson .c-tag__remove,.c-tag.c-tag--fuschia .c-tag__remove,.c-tag.c-tag--green .c-tag__remove,.c-tag.c-tag--grey .c-tag__remove,.c-tag.c-tag--kale .c-tag__remove,.c-tag.c-tag--lime .c-tag__remove,.c-tag.c-tag--mint .c-tag__remove,.c-tag.c-tag--orange .c-tag__remove,.c-tag.c-tag--pink .c-tag__remove,.c-tag.c-tag--purple .c-tag__remove,.c-tag.c-tag--red .c-tag__remove,.c-tag.c-tag--royal .c-tag__remove,.c-tag.c-tag--teal .c-tag__remove{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23fff'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-tag.c-tag--lemon .c-tag__remove,.c-tag.c-tag--yellow .c-tag__remove{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23703815'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-tag.is-rtl .c-tag__remove{
  -webkit-box-orient:horizontal;
  -webkit-box-direction:reverse;
          flex-direction:row-reverse;
  margin-right:0;
  margin-left:-8px;
}

.c-tag--lg.is-rtl .c-tag__remove{
  margin-left:-12px;
}

.c-tag--sm.is-rtl .c-tag__remove{
  margin-left:-4px;
}

.c-tag__avatar{
  flex-shrink:0;
  margin:2px 5px 2px -6px;
  border-radius:2px;
  width:16px;
  min-width:16px;
  height:16px;
  font-size:0;
}

.c-tag--lg .c-tag__avatar{
  margin:3px 10px 3px -9px;
  border-radius:3px;
  width:26px;
  min-width:26px;
  height:26px;
}

.c-tag--pill .c-tag__avatar{
  border-radius:50%;
}

.c-tag--round .c-tag__avatar,.c-tag--sm .c-tag__avatar{
  display:none;
}

.c-tag.is-rtl .c-tag__avatar{
  margin-right:-6px;
  margin-left:5px;
}

.c-tag--lg.is-rtl .c-tag__avatar{
  margin-right:-9px;
  margin-left:10px;
}