@import '~assets/styles/variables.sass'

.label-box
  &.size
    &-small ::v-deep(.label)
      font-size: 12px
      padding: 1px 4px

    &-medium ::v-deep(.label)
      font-size: 12px
      padding: 2px 6px

    &-large ::v-deep(.label)
      font-size: 14px
      padding: 3px 8px

  &.color
    &-plain ::v-deep(.label)
      background: $background-level-4

    &-lightpink ::v-deep(.label)
      background: #FBE0E0

    &-lightblue ::v-deep(.label)
      background: #D7EAF9

    &-geographic ::v-deep(.label)
      background: #DDF7BA
      text-transform: uppercase

    &-registers, &-register
      ::v-deep(.label)
        background: $background-level-4
        text-transform: uppercase

    &-subject ::v-deep(.label)
      background: #F2E0FA
      text-transform: uppercase

  .label
    margin-right: 5px

    &.last
      margin-right: 0

    .tooltip
      right: 0
      top: 50%
      z-index: 200000
      pointer-events: none
      padding: 0 4px 0 3px
      margin-right: -7px
      transform: translate(100%, -50%)
      transition: 0.12s
      background: rgba(black, 0.5)
      filter: drop-shadow(0 0 0.5px black)
      line-height: 16px
      white-space: nowrap

      &::after
        $size: 6px

        content: ''
        z-index: 1
        position: absolute
        top: 50%
        left: 0
        margin-left: 1px
        transform: translate(-100%, -50%)
        border: $size solid transparent
        border-right-color: rgba(black, 0.5)

      &.p-leave-to, &.p-enter
        opacity: 0

      &.p-enter-to, &.p-leave
        opacity: 1
