.md-badge-content {
  position: relative;
  display: inline-block;
  color: var(--md-on-primary);
}
.md-badge-content .md-position-top {
  top: -4px;
}
.md-badge-content .md-position-bottom {
  bottom: -4px;
}

/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-badge {
  position: absolute;
  right: 0;
  transform: translateX(50%);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-style: normal;
  min-width: 22px;
  padding: 0 8px;
  height: 22px;
  border-radius: 11px;
  color: var(--on-secondary);
  pointer-events: none;
  z-index: 11;
  background-color: var(--md-secondary);
}
.md-badge.md-primary {
  color: var(--md-on-primary);
  background-color: var(--md-primary);
}
.md-list-item-content .md-badge {
  position: relative;
  transform: none;
  top: 0;
  bottom: 0;
  right: 0;
}
.md-badge.md-dense {
  padding: 0;
  border-radius: 50%;
  min-width: 18px;
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.md-badge.md-square {
  width: auto;
  border-radius: 3px;
  transform: none;
  height: 18px;
  padding: 0 4px;
}