.components-label-with-hover:hover {
  filter: brightness(0.85);
  cursor: pointer;
}

.components-label {
  border: 1px solid transparent;

  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* https://stackoverflow.com/a/20566810 */
  vertical-align: bottom !important;

  margin-top: 2px;
  margin-bottom: 2px;
}

.btn-default,
.bg-default {
  background-color: $color-default;
}
.border-default {
  border: 1px solid $color-default;
}

.components-label:not(.rounded-pill) {
  &.bg-default,
  &.btn-default {
    border: 1px solid darken($color-default, 2%);
  }

  &.bg-primary,
  &.btn-primary {
    border: 1px solid lighten($primary, 2%);
  }
  &.bg-secondary,
  &.btn-secondary {
    border: 1px solid lighten($secondary, 2%);
    background-color: lighten($secondary, 4%) !important;
  }
  &.bg-success,
  &.btn-success {
    border: 1px solid darken($success, 2%);
  }
  &.bg-danger,
  &.btn-danger {
    border: 1px solid lighten($danger, 2%);
  }
  &.bg-warning,
  &.btn-warning {
    border: 1px solid lighten($warning, 3%);
  }
  &.bg-info,
  &.btn-info {
    border: 1px solid darken($info, 2%);
  }
  &.bg-dark,
  &.btn-dark {
    border: 1px solid darken($dark, 2%);
  }
}

/* badge class uses em and we modify font sizes a bit, so switch to rem */
span.badge.components-label:not(.rounded-pill) {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
span.badge.components-label.rounded-pill {
  padding-right: 0.6rem;
  padding-left: 0.6rem;
}
span.badge.components-label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

button.components-label-bright,
span.components-label-bright,
.components-label-bright {
  color: $black;
  &:hover {
    color: $black;
  }

  &.components-label-name,
  .components-label-name {
    color: lighten($black, 20%);
    &:hover {
      color: lighten($black, 20%);
    }
  }
  &.components-label-value,
  .components-label-value {
    color: $black;
    &:hover {
      color: $black;
    }
  }

  @for $i from 10 through 11 {
    &.components-label-brightness-#{$i} {
      border: 1px solid darken(#fff, $i * 1.1%);
    }
  }
}

button.components-label-dark,
span.components-label-dark,
.components-label-dark {
  color: $white;
  &:hover {
    color: $white;
  }

  &.components-label-name,
  .components-label-name {
    color: darken($white, 10%);
    &:hover {
      color: darken($white, 10%);
    }
  }

  &.components-label-value,
  .components-label-value {
    color: $white;
    &:hover {
      color: $white;
    }
  }
}

.components-label > svg.fa-xmark {
  text-decoration: none;
  line-height: 1;
  opacity: 0.4;

  &:hover {
    opacity: 1;
  }
}