:root {
  --pf-v6-c-notification-badge--BackgroundColor: transparent;
  --pf-v6-c-notification-badge--MinWidth: 40px;
  --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
  --pf-v6-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
  --pf-v6-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
  --pf-v6-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
  --pf-v6-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
  --pf-v6-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
  --pf-v6-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
  --pf-v6-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
  --pf-v6-c-notification-badge--before--BorderColor: transparent;
  --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
  --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
  --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
  --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
  --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
  --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
  --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
  --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
  --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
  --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
  --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
  --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
  --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
  --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
  --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
}

.pf-v6-c-notification-badge {
  display: inline-flex;
  gap: var(--pf-v6-c-notification-badge--Gap);
  align-items: center;
  justify-content: center;
  padding-block-start: var(--pf-v6-c-notification-badge--PaddingTop);
  padding-block-end: var(--pf-v6-c-notification-badge--PaddingBottom);
  padding-inline-start: var(--pf-v6-c-notification-badge--PaddingLeft);
  padding-inline-end: var(--pf-v6-c-notification-badge--PaddingRight);
  margin-block-start: var(--pf-v6-c-notification-badge--MarginTop);
  margin-block-end: var(--pf-v6-c-notification-badge--MarginBottom);
  margin-inline-start: var(--pf-v6-c-notification-badge--MarginLeft);
  margin-inline-end: var(--pf-v6-c-notification-badge--MarginRight);
  background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
  border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
}
.pf-v6-c-notification-badge::before {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  content: "";
  border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
  border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
  transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
}
.pf-v6-c-notification-badge.pf-m-read {
  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
  --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
  color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
}
.pf-v6-c-notification-badge.pf-m-read:hover {
  --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
}
.pf-v6-c-notification-badge.pf-m-unread {
  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
  color: var(--pf-v6-c-notification-badge--m-unread--Color);
}
.pf-v6-c-notification-badge.pf-m-unread:hover {
  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
}
.pf-v6-c-notification-badge.pf-m-attention {
  --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
  color: var(--pf-v6-c-notification-badge--m-attention--Color);
}
.pf-v6-c-notification-badge.pf-m-attention:hover {
  --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
}
.pf-v6-c-notification-badge.pf-m-expanded {
  --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
  --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
  --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
  --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
}