.tags {
  margin-block-end: -.5rem;
  font-size: 0;

  > .tag {
    margin-block-end: .5rem;

    &:not(:last-child) {
      margin-inline-end: .2rem;
    }
  }
}

.bootstrap-tagsinput {
  > .tag {

    &:not(:last-child) {
      margin-inline-end: .2rem;
      margin-block-end: 0.2rem;
    }
  }
}

.tags-group{
  .tag-item{
    position: relative;

    .tag{
      background-color: #{$primary-02};
      border-color: #{$primary-02};
      color: #{$primary};
      cursor: pointer;
    }

    .selectgroup-input:checked + .tag{
      background-color: #{$primary};
      border-color: #{$primary};
      color: #{$fixed-black} ;
    }
  }
}

.tag {
	font-size: 0.75rem;
	color: #{$default-color};
	border: 1px solid #{$border};
	border-radius: 3px;
	padding: 2px 0.55rem;
	line-height: 2em;
	display: -ms-inline-flexbox;
	display: inline-flex;
	cursor: default;
	font-weight: 400;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

  .tag-addon {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    background: #{$bg-hover};
    margin-block-start: 0;
    margin-inline-end: -.4rem;
    margin-block-end:  0;
    margin-inline-start: .5rem;
    text-align: center;
    min-width: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: .3s color, .3s background;
  
    &:last-child {
      border-radius: 3px;
    }
  
    &:hover {
      background: #{$gray-200};
      color: inherit;
    }
  
    i {
      vertical-align: middle;
      margin: 0 -.25rem;
      line-height: 1.5px;
      font-size: 13px;
    }
  }

  &.tag-primary {
    background-color: #{$primary};
    border-color: #{$primary};
    color: #{$fixed-black}  !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-secondary {
    background-color: #{$secondary};
    border-color: #{$secondary};
    color: #{$fixed-black} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-success {
    background-color: #{$success};
    border-color: #{$success};
    color: #{$fixed-white}  !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-info {
    background-color: #{$info};
    border-color: #{$info};
    color: #{$fixed-white}  !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-warning {
    background-color: #{$warning};
    border-color: #{$warning};
    color: #{$fixed-black} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-danger {
    background-color: #{$danger};
    border-color: #{$danger};
    color: #{$fixed-white}  !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-light {
    background-color: #{$gray-100};
    border-color: #{$gray-100};
    color: #{$gray-600} !important;

    .tag-addon{
      background-color: transparent;
    }
  }

  &.tag-dark {
    background-color: #{$gray-900};
    border-color: #{$gray-900};
    color: rgb($white)  !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-primary-transparent{
    background-color: #{$primary-02};
    border-color: #{$primary-02};
    color: #{$primary} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-secondary-transparent{
    background-color: rgba($secondary, 0.35);
    border-color: rgba($secondary, 0.35);
    color: #{$secondary} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-info-transparent{
    background-color: rgba($info, 0.15);
    border-color: rgba($info, 0.15);
    color: #{$info} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-warning-transparent{
    background-color: rgba($warning, 0.35);
    border-color: rgba($warning, 0.35);
    color: #{$gray-700} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-success-transparent{
    background-color: rgba($success, 0.15);
    border-color: rgba($success, 0.15);
    color: #{$success} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-danger-transparent{
    background-color: rgba($danger, 0.15);
    border-color: rgba($danger, 0.15);
    color: #{$danger} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-light-transparent{
    background-color: #{$gray-200};
    border-color: #{$gray-200};
    color: #{$gray-700} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-dark-transparent{
    background-color: #{$gray-400};
    border-color: #{$gray-400};
    color: #{$gray-900} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-primary{
    background-color: transparent !important;
    border-color: #{$primary} !important;
    color: #{$primary} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-secondary{
    background-color: transparent !important;
    border-color: #{$secondary} !important;
    color: #{$secondary} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-info{
    background-color: transparent !important;
    border-color: #{$info} !important;
    color: #{$info} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-success{
    background-color: transparent !important;
    border-color: #{$success} !important;
    color: #{$success} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-warning{
    background-color: transparent !important;
    border-color: #{$warning} !important;
    color: #{$warning} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-danger{
    background-color: transparent !important;
    border-color: #{$danger} !important;
    color: #{$danger} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-light{
    background-color: transparent !important;
    border-color: #{$border};
    color: #{$default-color} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }

  &.tag-outline-dark{
    background-color: transparent !important;
    border-color: #{$gray-900};
    color: #{$gray-900} !important;

    .tag-addon{
      background-color: transparent;
      opacity: 0.6;

      &:hover{
        opacity: 1;
      }
    }
  }
}

a.tag {
  text-decoration: none;
  cursor: pointer;
}

.bootstrap-tagsinput{
  .tag [data-role="remove"]::after{
    content: "\ea00";
    font-family: 'feather' !important;
    speak-as: normal;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
    margin: 0 -0.25rem;
    line-height: 1.5px;
    font-size: 13px;
  }
}