// common styles for label and badge style tags
.label, .badge {
	position:relative;
  border-radius:0;
  font-size:10px !important;
  text-transform:uppercase;
  padding:3px 10px;
 	margin-left:18px;
  background-color:@inactiveBack;
	color:@inactiveText;
	text-shadow:none;
	font-weight:normal;
	top:-2px;
  vertical-align: middle;
}

// number indicator - example in sketch activations, no hosts
.badge {
  padding: 0 5px;
  text-align:center;
  margin-top:5px;
  border-radius: 4px;
  line-height: 18px;
  font-weight: 500;
}

.chip {
  border-radius: 100px;
  padding: 3px 8px;
}

// override link text color
a {
   .label,
   .badge{
    color: @white;
   }
}

// When label tag is in a table cell
td .label {
	top:0;
  margin-left: -4px;
}

// Tags in sketch description - non-action label tag
.label.tag {
	top: 0;

	&:hover {
		-webkit-box-shadow:none;
   		-moz-box-shadow:none;
		box-shadow:none;
	}
}

// used in tag 'cloud'
.label-tag {
	color:#777;
}

// Author tag for 'other' users
.label-user {
  color: @textColor;
  border: 1px solid @Gray300;
  border-radius: 2px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  padding: 4px;
  word-break: keep-all;
}

.label-icon {
  border: 1px solid @Gray300;
  border-radius: 50%;
  height: 29px;
  width: 29px;
  display: block;
  position: relative;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &.agent_icon, &.build_icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
  }

  &.agent_icon {
    background-image: url(/images/agent.svg);
  }

  &.build_icon {
    background-image: url(/images/build/build_icon_big.svg);
  }
}

.badge {
  &-xl {
    font-size: 12px !important;
  }
  &-small_margin {
    margin-left: 10px;
  }
}

.label-warning, .badge-warning {
  background-color: #F5821F;
  color:white;
}

.label-success, .badge-success {
  background-color: @Green500;
  color:white;
}

.label-success-inverse, .badge-success-inverse {
  background-color: transparent;
  border: 1px solid @successMain;
  color: @successMain;
}

.label-info-inverse, .badge-info-inverse {
  background-color: transparent;
  border: 1px solid @textColor;
  color: @textColor;
}

.label-blue, .badge-blue {
  background-color: #7A8FF5;
  color:white;
}

.label-orange, .badge-orange {
  background-color: @Orange800;
  color: @Orange100;
}

.label-orange-inverse, .badge-orange-inverse {
  background-color: transparent;
  border: 1px solid @warningMain;
  color: @warningMain;
}

.label-important, .badge-important {
  background-color: @importantBack;
  color: @tagText;
}

.label-important-inverse, .badge-important-inverse {
  background-color: transparent;
  border: 1px solid @importantBack;
  color: @importantBack;
}