:host {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background-color: transparent;
}

::slotted(gux-icon) {
  inline-size: 100%;
  block-size: 100%;
}

.gux-container {
  --gux-fontFamily: var(--gse-ui-notificationBadge-medium-fontFamily);
  --gux-fontWeight: var(--gse-ui-notificationBadge-medium-fontWeight);
  --gux-fontSize: var(--gse-ui-notificationBadge-medium-fontSize);
  --gux-lineHeight: var(--gse-ui-notificationBadge-medium-lineHeight);
  --gux-height: var(--gse-ui-notificationBadge-height-medium);
  --gux-width: var(--gse-ui-notificationBadge-width-medium-default);
  --gux-iconSize: var(--gse-ui-notificationBadge-iconSize-medium);
  --gux-color: var(--gse-ui-notificationBadge-infoBold-foregroundColor);
  --gux-backgroundColor: var(--gse-ui-notificationBadge-infoBold-backgroundColor);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--gux-width);
  block-size: var(--gux-height);
  font-family: var(--gux-fontFamily);
  font-size: var(--gux-fontSize);
  font-weight: var(--gux-fontWeight);
  line-height: var(--gux-lineHeight);
  color: var(--gux-color);
  background-color: var(--gux-backgroundColor);
  border-radius: calc(var(--gux-height) * 0.5);
}
.gux-container .gux-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--gux-iconSize);
  block-size: var(--gux-iconSize);
}
.gux-container.gux-warning {
  --gux-color: var(--gse-ui-notificationBadge-warning-foregroundColor);
  --gux-backgroundColor: var(--gse-ui-notificationBadge-warning-backgroundColor);
}
.gux-container.gux-error {
  --gux-color: var(--gse-ui-notificationBadge-error-foregroundColor);
  --gux-backgroundColor: var(--gse-ui-notificationBadge-error-backgroundColor);
}
.gux-container.gux-success {
  --gux-color: var(--gse-ui-notificationBadge-success-foregroundColor);
  --gux-backgroundColor: var(--gse-ui-notificationBadge-success-backgroundColor);
}
.gux-container.gux-info-bold {
  --gux-color: var(--gse-ui-notificationBadge-infoBold-foregroundColor);
  --gux-backgroundColor: var(--gse-ui-notificationBadge-infoBold-backgroundColor);
}
.gux-container.gux-info-subtle {
  --gux-color: var(--gse-ui-notificationBadge-infoSubtle-foregroundColor);
  --gux-backgroundColor: var(--gse-ui-notificationBadge-infoSubtle-backgroundColor);
}
.gux-container.gux-small {
  --gux-height: var(--gse-ui-notificationBadge-height-small);
  --gux-width: var(--gse-ui-notificationBadge-width-small);
}
.gux-container.gux-small * {
  visibility: hidden;
}
.gux-container.gux-medium {
  --gux-height: var(--gse-ui-notificationBadge-height-medium);
  --gux-width: var(--gse-ui-notificationBadge-width-medium-default);
  --gux-fontFamily: var(--gse-ui-notificationBadge-medium-fontFamily);
  --gux-fontWeight: var(--gse-ui-notificationBadge-medium-fontWeight);
  --gux-fontSize: var(--gse-ui-notificationBadge-medium-fontSize);
  --gux-lineHeight: var(--gse-ui-notificationBadge-medium-lineHeight);
  --gux-iconSize: var(--gse-ui-notificationBadge-iconSize-medium);
}
.gux-container.gux-medium.gux-icon {
  --gux-width: var(--gux-height);
}
.gux-container.gux-medium.gux-digits-1 {
  --gux-width: var(--gse-ui-notificationBadge-width-medium-default);
}
.gux-container.gux-medium.gux-digits-2 {
  --gux-width: var(--gse-ui-notificationBadge-width-medium-medium);
}
.gux-container.gux-medium.gux-digits-3 {
  --gux-width: var(--gse-ui-notificationBadge-width-medium-large);
}
.gux-container.gux-large {
  --gux-height: var(--gse-ui-notificationBadge-height-large);
  --gux-width: var(--gse-ui-notificationBadge-width-large-default);
  --gux-fontFamily: var(--gse-ui-notificationBadge-large-fontFamily);
  --gux-fontWeight: var(--gse-ui-notificationBadge-large-fontWeight);
  --gux-fontSize: var(--gse-ui-notificationBadge-large-fontSize);
  --gux-lineHeight: var(--gse-ui-notificationBadge-large-lineHeight);
  --gux-iconSize: var(--gse-ui-notificationBadge-iconSize-large);
}
.gux-container.gux-large.gux-icon {
  --gux-width: var(--gux-height);
}
.gux-container.gux-large.gux-digits-1 {
  --gux-width: var(--gse-ui-notificationBadge-width-large-default);
}
.gux-container.gux-large.gux-digits-2 {
  --gux-width: var(--gse-ui-notificationBadge-width-large-medium);
}
.gux-container.gux-large.gux-digits-3 {
  --gux-width: var(--gse-ui-notificationBadge-width-large-large);
}