// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
.tag
  display: inline-block
  background-color: $light-matte
  padding: $gap/4 $gap
  border-radius: $radius
  border: .065rem solid shade($light-matte, .1)
  font-size: .9em
  color: $black

  +dark-mode
    background-color: shade($light-matte, .4)
    border-color: $border-dark

  &[href]
    text-decoration: none
    &:hover
      cursor: pointer
      background-color: shade($light, .05)

  &.is-rounded
    border-radius: 5rem

  &.is-big
    font-size: 1.2em

  &.is-white
    background-color: $white
    border-color: $border

  &.is-red
    background-color: tint($red, .75)
    border-color: $red

  &.is-yellow
    background-color: tint($yellow, .75)
    border-color: $yellow

  &.is-green
    background-color: tint($green, .75)
    border-color: $green

  // specific support for inline tag input field
  &.control
    border-width: .065rem
    border-style: solid
    border-color: $border
    background: transparent
    height: 1.5rem
    .input
      padding: 0 !important
    .button
      height: 100%

  .tag-remove
    margin-left: $gap/2
    color: $black
    opacity: .25
    &:hover
      cursor: pointer
      opacity: .75

.tag-list
  @extend .columns
  @extend .is-vcenter
  @extend .has-padding-bottom
  height: auto
  .label
    margin-right: $gap
    opacity: 1
    color: $black
  .tag
    margin: $gap $gap/2 0 0
    &:first-child
      margin-left: 0
