.problem__tags
  margin: 0 !important
  padding: 0 !important
  list-style: none !important
  font-size: 0
  word-break: keep-all
  display: flex
  flex-wrap: wrap

.problem__tag
  display: inline-block
  vertical-align: top
  height: rem($table-lh)
  margin: rem(0 2px 2px 0) !important
  padding: 0 !important

.problem__tag-item
  padding: 0 10px !important
  margin-left: rem(3px)
  margin-bottom: rem(5px)
  line-height: 30px !important
  display: inline-flex
  flex-direction: row
  align-items: center
  border: none
  border-radius: 2px
  box-shadow: none
  font-size: 14px
  line-height: 18px
  max-width: 100%
  min-height: 30px
  min-width: 30px
  padding: 6px 8px
  position: relative
  background-color: rgba(143, 153, 168, 0.15)
  color: #1c2127
  &:hover
    text-decoration: none
  > span
    display: flex
    align-items: center
  > *
    flex-grow: 0
    flex-shrink: 0
    margin-right: 8px
  &:before,
  > *
    margin-right: 4px
  > :last-child
    margin-right: 0
  &:focus
    outline: rgba(33, 93, 176, 0.752) solid 2px
    outline-offset: 0
    -moz-outline-radius: 6px
  &.interactive
    cursor: pointer
    &:hover
      background: rgba(143, 153, 168, 0.3)
      color: #111418

.problem__tag-link
  display: inline-block
  padding: rem(0 7px)
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  max-width: rem(250px)
  line-height: rem($table-lh)
  height: rem($table-lh)
  background: #F0F0F0
  color: $text-1-color !important
  font-size: rem($font-size-small)

  &:hover
    background: $primary-color
    color: #FFF !important
    text-decoration: none

.col--problem-name
  .problem__tags
    float: right

  .problem__tag
    margin: rem(0 2px 0 0) !important