// https://m3.material.io/components/badges/specs

.sd-badge {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    &-label {
        position: absolute;
        background: var(--md-sys-color-error);
        color: var(--md-sys-color-on-error);
        pointer-events: none;
    }
    &[data-sd='none'] &-label {
        opacity: 0;
    }
    &[data-sd='small'] &-label {
        left: calc(50% + 6px);
        top: calc(50% - 12px);
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 6px;
    }
    &[data-sd='large'] &-label {
        left: 50%;
        top: calc(50% - 16px);
        display: inline-block;
        width: max-content;
        padding: 0 4px;
        height: 16px;
        line-height: 16px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: lighter;
    }
}