.labelWrapper {
  font-size: 0.72rem;
}

.labelText {
  background-color: var(--body-light-bg);
  line-height: 18px;
  padding: 0 5px 0 10px;
  border-color: var(--color-black-15) !important;
  border-radius: 3px;
}

.labelTextNoIcon {
  padding-left: 5px;
}

.iconWrapper {
  border-color: var(--color-black-15) !important;
  height: 20px;
  line-height: 1rem;
  color: var(--light-gray);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: inset -1px 0 var(--color-black-25);
  margin-right: -3px;
  min-width: 20px;
}

.iconLegend {
  top: 1px;
}

.onlyIcon {
  border-radius: 3px !important;
  width: 21px;
}

.iconWrapper path {
  stroke: var(--light-gray);
}

.iconWrapper:not(.onlyIcon)::before {
  content: '';
  position: absolute;
  right: -3px;
  top: calc(50% - 3px);
  height: 6px;
  width: 6px;
  border-radius: 50%;
  box-shadow: inset -1px 0 var(--color-black-25);
}

.default .iconWrapper {
  background-color: var(--light-gray);
  color: var(--bs-dark);
}

.default .iconWrapper::before {
  background-color: var(--light-gray);
}

.warning .iconWrapper {
  background-color: var(--bs-orange);
}

.warning .iconWrapper::before {
  background-color: var(--bs-orange);
}

.success .iconWrapper {
  background-color: var(--bs-success);
}

.success .iconWrapper::before {
  background-color: var(--bs-success);
}

.danger .iconWrapper {
  background-color: var(--bs-danger);
}

.danger .iconWrapper::before {
  background-color: var(--bs-danger);
}

.custom .iconWrapper {
  color: var(--light-gray);
}

.custom .iconWrapper::before {
  background-color: inherit;
}
