:root { --badge-content-padding: 2px 6px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info);}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { color: #fff; border-radius: 100px; font-size: 12px; padding: 2px 6px; vertical-align: middle; text-align: center; display: inline-block;}.var-badge__icon { padding: 2px 4px;}.var-badge__position { border: 2px #fff solid;}.var-badge--default { background: var(--badge-default-color);}.var-badge--primary { background: var(--badge-primary-color);}.var-badge--info { background: var(--badge-info-color);}.var-badge--warning { background: var(--badge-warning-color);}.var-badge--success { background: var(--badge-success-color);}.var-badge--danger { background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(-50%) translateX(50%);}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(-50%) translateX(-50%);}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(50%) translateX(50%);}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(50%) translateX(-50%);}.var-badge__dot { box-sizing: content-box; width: 8px; height: 8px; border-radius: 8px; padding: 0;}.var-badge__dot--right { right: 6px;}.var-badge__dot--left { left: 6px;}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter,.var-badge-fade-leave-to { opacity: 0;}