// <li>
//   <span class="value">Filter value</span>
//   <a href="/" title="Discard">&times;</a>
// </li>

ul[data-element="tag_list"]
  display: flex
  list-style: none
  padding: 0
  margin: 0

  li
    display: flex
    align-items: center
    background: #e3e3e3
    border-radius: 18px
    padding: 0 1px
    margin: 0 0 0 12px

    &:first-child
      margin-left: 0

    & > .value
      display: block
      font-size: 13px
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      color: #666
      padding: 3px 2px 3px 12px

    a
      display: block
      font-size: 18px
      line-height: 1
      padding: 0 8px

      &, &:visited, &:active, &:focus
        outline: none
        color: #000

      &:hover
        text-decoration: none
        color: #c00

  &.highlighted

    li
      background: #ffdb4d

      & > .value
        color: #000
