.badge {
  composes: borderBox from "./Layout.css";
  composes: rounding1 from "./Borders.css";
  align-content: center;
  display: flex;
  height: 20px;
  white-space: nowrap;
}

.padding {
  padding: var(--space-0) 6px;
}

.middle {
  composes: inlineBlock from "./Layout.css";
  vertical-align: middle;
}

.top {
  composes: inlineBlock from "./Layout.css";
  vertical-align: super;
}

.badgeVR {
  composes: borderBox from "./Layout.css";
  align-content: center;
  border-radius: var(--sema-rounding-100);
  display: flex;
  height: 20px;
  white-space: nowrap;
}

.innerBorder {
  border: var(--sema-space-50) solid var(--base-color-transparent);
}

.paddingVR {
  padding: var(--space-0) var(--sema-space-100);
}

.paddingInteractiveVR {
  padding: var(--space-0) calc(var(--sema-space-100) - var(--sema-space-50));
}

.focusedDefaultOutline {
  border: var(--sema-space-50) solid
    var(--sema-color-border-focus-inner-default);
  outline: var(--sema-space-50) solid
    var(--sema-color-border-focus-outer-default);
}

.focusedDarkOutline {
  border: var(--sema-space-50) solid var(--sema-color-border-focus-inner-light);
  outline: var(--sema-space-50) solid var(--sema-color-border-focus-outer-dark);
}

.focusedLightOutline {
  border: var(--sema-space-50) solid var(--sema-color-border-focus-inner-dark);
  outline: var(--sema-space-50) solid var(--sema-color-border-focus-outer-light);
}

/* Color */

.info,
.interactive-info {
  background-color: var(--color-background-badge-info-default);
}

.interactive-info:hover {
  background-color: var(--color-background-badge-info-hover);
}

.error,
.interactive-error {
  background-color: var(--color-background-badge-error-default);
}

.interactive-error:hover {
  background-color: var(--color-background-badge-error-hover);
}

.warning,
.interactive-warning {
  background-color: var(--color-background-badge-warning-default);
}

.interactive-warning:hover {
  background-color: var(--color-background-badge-warning-hover);
}

.success,
.interactive-success {
  background-color: var(--color-background-badge-success-default);
}

.interactive-success:hover {
  background-color: var(--color-background-badge-success-hover);
}

.recommendation,
.interactive-recommendation {
  background-color: var(--color-background-badge-recommendation-default);
}

.interactive-recommendation:hover {
  background-color: var(--color-background-badge-recommendation-hover);
}

.neutral,
.interactive-neutral {
  background-color: var(--color-background-badge-neutral-default);
}

.interactive-neutral:hover {
  background-color: var(--color-background-badge-neutral-hover);
}

.darkWash,
.interactive-darkWash {
  background-color: var(--color-background-badge-darkwash-default);
}

.interactive-darkWash:hover {
  background-color: var(--color-background-badge-darkwash-hover);
}

.lightWash,
.interactive-lightWash {
  background-color: var(--color-background-badge-lightwash-default);
}

.interactive-lightWash:hover {
  background-color: var(--color-background-badge-lightwash-hover);
}