.label {
  display: inline-block;
  margin: 2px;
  border: 1px solid;
  border-radius: 2px;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  cursor: default;
}

/** Kinds **/

.danger {
  border-color: var(--dangerColor);
  background-color: var(--dangerColor);

  &.outline {
    color: var(--dangerColor);
  }

  &:global(.colorImpaired) {
    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
  }
}

.default {
  border-color: var(--themeLightColor);
  background-color: var(--themeLightColor);

  &.outline {
    color: var(--themeLightColor);
  }
}

.disabled {
  border-color: var(--disabledColor);
  background-color: var(--disabledColor);

  &.outline {
    color: var(--offWhite);
  }
}

.info {
  border-color: var(--infoColor);
  background-color: var(--infoColor);
  color: var(--infoTextColor);

  &.outline {
    color: var(--infoColor);
  }
}

.inverse {
  border-color: var(--inverseLabelColor);
  background-color: var(--inverseLabelColor);
  color: var(--inverseLabelTextColor);

  &.outline {
    background-color: var(--inverseLabelTextColor) !important;
    color: var(--inverseLabelColor);
  }
}

.primary {
  border-color: var(--primaryColor);
  background-color: var(--primaryColor);

  &.outline {
    color: var(--primaryColor);
  }
}

.success {
  border-color: var(--successColor);
  background-color: var(--successColor);
  color: #eee;

  &.outline {
    color: var(--successColor);
  }
}

.warning {
  border-color: var(--warningColor);
  background-color: var(--warningColor);

  &.outline {
    color: var(--warningColor);
  }

  &:global(.colorImpaired) {
    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
  }
}

.queue {
  border-color: var(--queueColor);
  background-color: var(--queueColor);

  &.outline {
    color: var(--queueColor);
  }
}

/** Sizes **/

.small {
  padding: 1px 3px;
  font-size: 11px;
}

.medium {
  padding: 2px 5px;
  font-size: 12px;
}

.large {
  padding: 3px 7px;
  font-weight: bold;
  font-size: $defaultFontSize;
}

/** Outline **/

.outline {
  background-color: var(--disabledLabelColor);
}