<template>
<span class='c-tag' @click.prevent='$emit("click")'>
  <slot></slot>
  <span class='c-delete' @click.prevent='$emit("delete")'></span>
</span>
</template>

<script>
export default {
  props: {
  },
};
</script>

<style lang='sass' scoped>

$borderColor: rgba(0, 0, 0, 0.1)
$backgroundColor: #fafafa

.c-tag:not(body)
  display: inline-flex
  align-items: center
  color: #3a3a3a
  cursor: pointer
  background-color: $backgroundColor
  border: solid 1px $borderColor
  border-radius: 5px
  font-size: 13px
  height: 2em
  justify-content: center
  line-height: 1.5
  padding-left: 0.75em
  padding-right: 0.75em
  white-space: nowrap
  transition: all 0.2s ease-in-out
  &:hover
    background-color: #eaeaea
  .c-delete
    margin-left: 0.25em
    margin-right: -0.375em
  &.is-delete
    margin-left: 1px
    padding: 0
    position: relative
    width: 2em
    &:before,
    &:after
      background-color: currentColor
      content: ""
      display: block
      left: 50%
      position: absolute
      top: 50%
      transform: translateX(-50%) translateY(-50%) rotate(45deg)
      transform-origin: center center
    &:before
      height: 1px
      width: 50%
    &:after
      height: 50%
      width: 1px
      &:hover,
      &:focus
        background-color: darken(red, 5%)
      &:active
        background-color: darken(red, 10%)
    &.is-rounded
      border-radius: 290486px


.c-delete
  line-height: 1.5
  cursor: pointer
  font-size: 1rem
  user-select: none
  background-color: rgba(10, 10, 10, 0.2)
  border: none
  border-radius: 290486px
  display: inline-block
  flex-grow: 0
  flex-shrink: 0
  width: 20px
  height: 20px
  max-height: 20px
  max-width: 20px
  min-height: 20px
  min-width: 20px
  outline: none;
  position: relative
  vertical-align: top
  &:before,
  &:after
    background-color: rgb(255, 255, 255)
    content: ""
    display: block
    left: 50%
    position: absolute
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(45deg)
    transform-origin: center center
  &:before
    height: 2px
    width: 50%
  &:after
    height: 50%
    width: 2px
  &:hover,
  &:focus
    background-color: rgba(0, 0, 0, 0.4)

</style>