/*---- Tags-----*/

.tag {
	font-size: 0.75rem;
	color: #6b6f80;
	background-color: #f0f0f2;
	border-radius: 3px;
	padding: 0 .5rem;
	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;
  }
  
  a.tag {
	text-decoration: none;
	cursor: pointer;
	transition: .3s color, .3s background;
  
	&:hover {
	  background-color: rgba(110, 118, 135, 0.2);
	  color: inherit;
	}
  }
  
  .tag-addon {
	display: inline-block;
	padding: 0 .5rem;
	color: inherit;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.06);
	margin-block-start: 0px;
	margin-inline-end: -0.5rem;
	margin-block-end: 0px;
    	margin-inline-start: 0.5rem;
	text-align: center;
	min-width: 1.5rem;
  
	&:last-child {
	  border-start-end-radius: 3px;
	  border-end-end-radius: 3px;
	}
  
	i {
	  vertical-align: middle;
	  margin: 0 -.25rem;
	}
  }
  
  a.tag-addon {
	text-decoration: none;
	cursor: pointer;
	transition: .3s color, .3s background;
  
	&:hover {
	  background: rgba(0, 0, 0, 0.16);
	  color: inherit;
	}
  }
  
  .tag-avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-start-start-radius: 3px;
    	border-start-end-radius: 0px;
    	border-end-end-radius: 0px;
    	border-end-start-radius: 3px;
	margin-block-start: 0px;
	margin-inline-end: 0.5rem;
	margin-block-end: 0px;
   	margin-inline-start: -0.5rem;
  }
  
  .tag-blue {
	background-color: #083dc1;
	color: $white;
  }
  
  .tag-indigo {
	background-color: $indigo;
	color: $white;
  }
  
  .tag-purple {
	background-color: $purple;
	color: $white;
  }
  
  .tag-pink {
	background-color: $pink;
	color: $white;
  }
  
  .tag-red {
	background-color: #dc0441;
	color: $white;
  }
  
  .tag-orange {
	background-color: $orange;
	color: $white;
  }
  
  .tag-yellow {
	background-color: #ecb403;
	color: $white;
  }
  
  .tag-green {
	background-color: #2dce89;
	color: $white;
  }
  
  .tag-teal {
	background-color: $teal;
	color: $white;
  }
  
  .tag-cyan {
	background-color: $cyan;
	color: $white;
  }
  
  .tag-gray {
	background-color: $gray;
	color: $white;
  }
  
  .tag-gray-dark {
	background-color: $dark;
	color: $white;
  }
  
  .tag-azure {
	background-color: #45aaf2;
	color: $white;
  }
  
  .tag-lime {
	background-color: #7bd235;
	color: $white;
  }
  
  .tag-success {
	background-color: #2dce89;
	color: $white;
  }
  
  .tag-info {
	background-color: #45aaf2;
	color: $white;
  }
  
  .tag-warning {
	background-color: #ecb403;
	color: $white;
  }
  
  .tag-danger {
	background-color: #dc0441;
	color: $white;
  }
  
  .tag-light {
	background-color: #f8f9fa;
	color: $white;
  }
  
  .tag-dark {
	background-color: $dark;
	color: $white;
  }
  
  .tag-rounded {
	border-radius: 50px;
  
	.tag-avatar {
	  border-radius: 50px;
	}
  }
  
  .tags {
	margin-block-end: -.5rem;
	font-size: 0;
  
	> .tag {
	  margin-block-end: .5rem;
  
	  &:not(:last-child) {
		margin-inline-end: .5rem;
	  }
	}
  }
  /*---- Tags End-----*/